mass Framework menu插件
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
共9页: 1 2 3 4 5 6 7 8 9 下一页
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
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于mass Framework menu插件的详细内容...