Fork me on GitHub
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  
posted on   HackerVirus  阅读(236)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2025 HackerVirus
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示