menu插件的结构是基于tabs插件上改进过来的，以后就连tabs插件都会改成这种新的形式。或许过不久，我会将这种结构抽象成一个新的模块，里面提供一个类，让所有UI插件都继承自它。
新插件系统的简述：
- 插件名即实例方法名，并且此插件只添加一个实例方法，如tabs插件只在$.fn中添加一个tabs方法。
- 此实例方法同时拥有初始化插件，销毁插件，调用插件的各种方法的能力。
- 当某一元素被包装成mass的节点链对象$(node)后，第一次调用此插件方法，即是初始化插件。一般地，参数为一个对象。
- 当这个节点链对象再次调用插件方法，传入的第一个参数为字符串，则会判定此插件对象有没有此方法，有则调用此方法。
- 想移除当前UI，只需传入"destroy"。
- 所有插件对象都拥有getUI, invoke, destroy, setOptions方法，都拥有parent, target, ID属性。
下面menu插件的配置参数：
- data
- 必需。一个对象数组,里面的对象要求拥有html或sub属性,sub也是一个类似结构的对象数组。
- hover_class
- 可选。菜单项移上去时发生作用的类名,默认是hover。
- direction
- 可选。可用值为"vertical"或"horizontal", 默认是"vertical"。
$1.require("ready,20120303_menu",function( ){ $1("#black").menu({ data: [ { html:"随笔", sub:[ {html:"生活"}, {html:"杂文"}, {html:"思考"} ] }, { html:"编程工具", sub:[ {html:"Vim"}, {html:"NetBeans"}, {html:"Git"} ] }, { html:"编程语言", sub:[ {html:"Web开发",sub:[ {html:"HTML"}, {html:"javascript"}, {html:"CSS"} ]}, {html:"Python"}, {html:"Java语言"}, {html:"C/C++"}, {html:"Android开发"} ] }, {html:"操作系统",sub:[ {html:"IOS"}, {html:"window"}, {html:"ubuntu"} ]} ], direction: "horizontal" }); }); |
#black .menu_item{ width:120px; padding-left:10px; height:24px; line-height:24px; border-bottom:1px solid #fff; background:#000; color:#fff; } #black .hover { background:#636!important; color:black; } |
我们再来一个复杂的垂直菜单，它是显示mass Framework的所有API。
#bright .main_menu, #bright .sub_menu{ width:130px; -moz-box-shadow:0 0 10px #06c; -webkit-box-shadow:0 0 10px #06c; box-shadow:0 0 10px #06c; } #bright .menu_item{ width:120px; padding-left:10px; height:24px; line-height:24px; border-bottom:1px solid #fff; background:#0088aa; color:#fff; } #bright .hover { background:#f36100!important; color:black; } |
$1.require("ready,more/menu,more/api",function( _,_,api ){var pathMap = { "模块加载模块": "/doc/core/$", "特征嗅探模块": "/doc/support/$", "语言扩展模块": "/doc/lang/$", "类工厂模块": "/doc/class/$", "选择器模块": "/doc/query/$", "数据缓存模块": "/doc/data/$", "节点操作模块": "/doc/node/$", "派发器模块": "/doc/target/$", "属性操作模块": "/doc/attr/$", "DOM事件模块": "/doc/event/$", "样式操作模块": "/doc/css/$", "动画模块": "/doc/fx/$", "操作流模块": "/doc/flow/$", "AJAX模块": "/doc/ajax/$"}var makeData = function( json, path ){ return Object.keys( json ).map(function(key){ var ret = { html: key } var new_path = path + (typeof pathMap[key] == "string" ? pathMap[key] : key) + "." if(typeof json[ key ] === "object"){ ret.sub = makeData( json[ key ], new_path); }else{ ret.attr = { type: json[ key ], path: new_path + "html" } } return ret; },json );}//上面的代码用于生成menu的数据包var menu= $1("#bright").menu({ data: makeData(api, "")}).menu("getUI");$1(document).click(function(e){//点击其他处隐藏二级或二级以上的子菜单 if(!$1.contains(menu[0], e.target)){ menu.find(".sub_menu:visible").hide(); }}) |
有关menu插件更详细的说明请到github中查看。
当前标签: node.js
Windows 上使用 Github 司徒正美 2012-01-20 14:05 阅读:2269 评论:0
node.js 后端框架设计构想 司徒正美 2011-12-13 16:22 阅读:3015 评论:6
node.js 跨文件的自定义全局对象 司徒正美 2011-12-03 18:22 阅读:1041 评论:0
node.js 判定是否为Buffer 司徒正美 2011-12-03 00:12 阅读:922 评论:0
node.js 热部署 司徒正美 2011-11-29 12:47 阅读:2851 评论:4
Ubuntu 安装node.js 司徒正美 2011-11-29 02:00 阅读:1180 评论:0
node.js 文件操作 司徒正美 2011-11-28 09:17 阅读:3053 评论:7
node.js 动态执行脚本 司徒正美 2011-11-25 18:26 阅读:2481 评论:0
node.js 一个简单的页面输出 司徒正美 2011-11-20 13:29 阅读:2461 评论:2
node.js服务器端 司徒正美 2011-11-09 14:08 阅读:11 评论:0
跟我学node.js--6、域名解析 司徒正美 2011-11-09 14:07 阅读:9 评论:0
跟我学node.js--7、net模块 司徒正美 2011-11-09 14:07 阅读:6 评论:0
跟我学node.js--1、开场白 司徒正美 2011-11-09 14:06 阅读:18 评论:0
跟我学node.js--2、hello world 司徒正美 2011-11-09 14:06 阅读:11 评论:0
跟我学node.js--3、模块加载 司徒正美 2011-11-09 14:06 阅读:10 评论:0
跟我学node.js--4、基本知识 司徒正美 2011-11-09 14:06 阅读:14 评论:0
日本研究node.js的牛人 司徒正美 2011-09-29 21:21 阅读:1725 评论:3
node.js入门 司徒正美 2010-07-15 22:04 阅读:17958 评论:19
mass Framework tabs插件 司徒正美 2012-02-25 16:53 阅读:1563 评论:1
mass Framework pagination插件v2 司徒正美 2012-02-23 09:01 阅读:1869 评论:3
mass Framework pagination插件 司徒正美 2012-02-22 11:19 阅读:2065 评论:3
mass Framework flip插件 司徒正美 2012-02-20 20:52 阅读:1965 评论:4
mass Framework placeholder插件 司徒正美 2012-02-17 21:45 阅读:1736 评论:5
javascript suggest效果 司徒正美 2012-02-16 10:34 阅读:2243 评论:3
javascript题目，重写函数让其无限相加 司徒正美 2012-02-15 10:19 阅读:2556 评论:13
javascript 瀑布流 司徒正美 2012-02-06 14:43 阅读:4277 评论:10
(转)HTML5 全屏 API 司徒正美 2012-02-05 21:56 阅读:1602 评论:0
新锐浏览器支持原生CustomEvent事件 司徒正美 2012-02-05 13:24 阅读:1401 评论:0
javascript题目，如何在重写alert后还能正常弹出alert 司徒正美 2012-02-03 09:21 阅读:4191 评论:24
奇技淫巧之Object.keys 司徒正美 2011-12-24 11:03 阅读:3536 评论:4
mass Framework第四种模板函数 司徒正美 2011-12-17 12:03 阅读:1793 评论:1
属性监听器 司徒正美 2011-12-13 18:58 阅读:1211 评论:2
FF或将支持返回一个HTML文档对象 司徒正美 2011-12-02 10:14 阅读:985 评论:0
1 < 2 < 3为true， 3 > 2 > 1为false 司徒正美 2011-11-23 10:29 阅读:1233 评论:1
停止IE的bgsound元素的播放 司徒正美 2011-11-22 16:57 阅读:1023 评论:0
javascript 操作流——回调的回调 司徒正美 2011-11-22 00:36 阅读:2392 评论:5
我的模块加载系统 v13 司徒正美 2011-11-17 13:06 阅读:3294 评论:8
我的第五代选择器Icarus 司徒正美 2011-11-10 12:44 阅读:5105 评论:15
我的第四代选择器Rage 司徒正美 2011-11-09 22:14 阅读:1153 评论:2
最近のWebSocket事情についてまとめとく 司徒正美 2011-11-09 14:05 阅读:678 评论:0
原生构造器的无new实例化 司徒正美 2011-11-08 09:21 阅读:884 评论:0
querySelector用法改进 司徒正美 2011-11-08 03:35 阅读:806 评论:1
对XML元素操作的一些注意点 司徒正美 2011-11-07 02:03 阅读:788 评论:2
xpath的一些测试 司徒正美 2011-11-06 16:09 阅读:476 评论:0
属性选择器的对于空白字符的匹配策略 司徒正美 2011-11-05 00:02 阅读:465 评论:0
javascript模板系统 ejs v8 司徒正美 2011-10-23 09:45 阅读:2466 评论:3
取得元素节点的默认display值 司徒正美 2011-09-16 14:50 阅读:1718 评论:3
IE10支持的新特性 司徒正美 2011-09-14 20:59 阅读:1023 评论:0
javascript 让实例的方法都异步执行 司徒正美 2011-09-13 10:30 阅读:1059 评论:0
中断与停止CSS transition 司徒正美 2011-09-11 11:17 阅读:1919 评论:1
通过javascript操作CSS3属性实现动画 司徒正美 2011-09-07 08:52 阅读:2416 评论:6
判定是否支持XHTML 司徒正美 2011-09-06 23:05 阅读:594 评论:0
判定是否使用输入法 司徒正美 2011-08-23 20:53 阅读:911 评论:0
requestAnimationFrame 动画接口 司徒正美 2011-08-22 17:24 阅读:1094 评论:2
使用requestAnimationFrame更好的实现javascript动画(转) 司徒正美 2011-08-22 09:10 阅读:1079 评论:0
javascript String.indexOf实现 司徒正美 2011-08-19 09:00 阅读:2356 评论:6
获取href属性 司徒正美 2011-08-05 11:27 阅读:1 评论:0
创建纯空Object 司徒正美 2011-08-03 09:39 阅读:890 评论:1
javascript 只保留整数部分 司徒正美 2011-07-04 22:47 阅读:1158 评论:7
preventDefault 司徒正美 2011-07-03 14:10 阅读:1 评论:0
javascript 本地数据库例子 司徒正美 2011-06-29 16:02 阅读:903 评论:0
我的微博收藏2 司徒正美 2011-06-17 07:26 阅读:690 评论:0
我的微博收藏 司徒正美 2011-06-16 10:22 阅读:1719 评论:8
验证身份证 司徒正美 2011-06-14 11:08 阅读:654 评论:2
PROMISES FROM A TO J 司徒正美 2011-06-05 12:22 阅读:580 评论:0
另一个行拖动效果 司徒正美 2011-05-30 15:09 阅读:1046 评论:1
好吓人的3D旋转效果 司徒正美 2011-05-30 06:21 阅读:0 评论:0
dense array 与 sparse array 司徒正美 2011-05-30 06:20 阅读:2 评论:0