`
zhyi_12
  • 浏览: 99008 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

小试jquery构建UI组件

UIjQueryCSSOperaEXT
阅读更多

  最近试用了一下EXT2.0的UI组件，又把jquery的官方UI插件库下来看了下。虽说我个人是更喜欢jquey的风格的，但对于组件化的UI来说，两者目前还有较大的差距。翻翻jquery的插件库，没有找到一个比较顺眼的菜单组件。正好拿这个开刀，仿照EXT写个组件自娱自乐一下。鄙视一下自己直接拿了EXT的图标就用。

  习惯性的使用dom元素的属性进行扩展。 习惯性的喜欢下面的方式构建插件

  1.       构建框架

    js 代码

     

    1. (function($) {   
    2.   
    3.     $.youi = $.youi || {};   
    4.        
    5.     $.youi.menu = {};   
    6.        
    7.     $.youi.menuItem = {};   
    8.    
    9.     $.extend($.youi.menu, {..........});
    10.     
    11.     $.extend($.youi.menuItem, {..........});
    12.                       ....................   
    13. })(jQuery);  
  2.  定义jquery扩展访问方法

    

  1. $.fn.extend({   
  2.     youiMenu:function(options){   
  3.         var menu = this;   
  4.         $.youi.menu.create(this,options);   
  5.         return menu;   
  6.     },   
  7.            
  8.     youiMenuItem:function(options){   
  9.         var menuItem = this;   
  10.         $.youi.menuItem.create(this,options);   
  11.         return menuItem;   
  12.     }   
  13. });  

       3.    写执行代码，代码向来写的很不规范，每次都等着重构。

        扩展 $.youi.menu

js代码
  1. $.extend($.youi.menu, {   
  2.     menuItems:[],   
  3.     /**  
  4.      * 初始化函数  
  5.      */  
  6.     create:function(el,options){   
  7.         $.youi.menu.initMenu(el,options);   
  8.         $("body",document).click(function(){   
  9.             $.youi.menu.closeMenu(el);   
  10.         });   
  11.     },   
  12.        
  13.     initMenu:function(el,options){   
  14.         $("ul>li",el).each(function(){   
  15.             $(this).youiMenuItem({menu:el});   
  16.         });   
  17.     },   
  18.        
  19.     closeMenu:function(menu){   
  20.         $($.youi.menu.menuItems).each(function(){   
  21.             $("ul",this).hide();   
  22.         });   
  23.         menu.attr("activeMenu","false");  //菜单激活属性 
  24.     }   
  25. });  

 

 扩展$.youi.menuItem

向来喜欢用dom的属性进行扩展。习惯了jquery的options。

js 代码
  1. $.extend($.youi.menuItem, {   
  2.     menuItemAttrs:function(el){   
  3.         return {   
  4.             id        :el.attr("id"),   
  5.             text      :el.attr("text"),   
  6.             menuIcon:el.attr("menuIcon"),   
  7.             action  :el.attr("youiAction"),//opera中 action属性会自动加上路径 file://D:...   
  8.             hotKey  :el.attr("hotKey"),   
  9.             type      :el.attr("menuType"),//本想使用type的 可opera不干   
  10.             checked :el.attr("youiChecked"),//opera中checked属性只能显示checked，有时opera，无语了....   
  11.             group     :el.attr("group"),   
  12.             active  :el.attr("active")   
  13.         };   
  14.     },   
  15.        
  16.     create:function(el,options){   
  17.         options = $.extend({},options,$.youi.menuItem.menuItemAttrs(el));   
  18.         if(!options.id){   //处理id属性
  19.             options.id = "menu-"+$.youi.menu.menuItems.length;   
  20.             el.attr("id",options.id);   
  21.         }   
  22.            
  23.         if(options.type=="menuSplit"){   
  24.             $.youi.menuItem.initMenuSplit(el,options);   
  25.             return;   
  26.         }else if(options.type=="menuBar"){   
  27.             $.youi.menuItem.initMenuBar(el,options);   
  28.         }else{   
  29.             $.youi.menuItem.initMenuItem(el,options);   
  30.         }   
  31.            
  32.         $("ul:first",el).hide();   
  33.         $("ul:first",el).addClass("youi-menu-panel");   
  34.         /**  
  35.          * 为菜单节点添加访问方法  
  36.          */  
  37.         $.extend(el,{   
  38.             addMenuItem:function(){   
  39.                 $.youi.menuItem.addMenuItem(this);   
  40.             },   
  41.                
  42.             getParent:function(){   
  43.                 return el.parent("li").youiMenuItem({menu:options.menu});   
  44.             },   
  45.                
  46.             toString:function(){   
  47.                 return this.attr("id");   
  48.             }   
  49.         });   
  50.   
  51.         el.mouseover(function(){   
  52.             el.addClass("youi-menu-active");   
  53.             $.youi.menuItem.hoverOverLI($(this),options);   
  54.             return false;   
  55.         });   
  56.            
  57.         el.mouseout(function(){   
  58.             el.removeClass("youi-menu-active");   
  59.             $.youi.menuItem.hoverOutLI($(this));   
  60.             return false;   
  61.         });   
  62.            
  63.         var action = options.action;   
  64.         if(action){   
  65.             el.click(function(){   
  66.                 if($(this).attr("active")=="false"){return false;};//非活动菜单   
  67.                    
  68.                 if(typeof(action)=="string"){   
  69.                     try{   
  70.                         jQuery.actionFactory[action].apply(el,[]);   
  71.                     }catch(err){   
  72.                         //alert("click:"+err.message);   
  73.                         $("#out").html(err.message);   
  74.                         //alert("not find callback function:"+action);   
  75.                     }   
  76.                 }else if(typeof(action)=="function"){   
  77.                     action.apply(el);   
  78.                 }   
  79.             });   
  80.                
  81.         }   
  82.         el.click(function(){return false;});   
  83.            
  84.         $.youi.menu.menuItems.push(el);   
  85.     },   
  86.        
  87.     initMenuSplit:function(el,options){   
  88.         el.addClass("youi-menu-split");   
  89.         el.append('class="youi-menu-split-span"/>');   
  90.     },   
  91.        
  92.     initMenuBar:function(el,options){   
  93.         el.addClass("youi-menu-horizontal");   
  94.         el.click(function(){   
  95.             var activeMenu = options.menu.attr("activeMenu");   
  96.             if(activeMenu=="true"){   
  97.                 options.menu.attr("activeMenu","false");   
  98.                 $("ul",this).hide();   
  99.             }else{   
  100.                 options.menu.attr("activeMenu","true");   
  101.                 $(this).mouseover();   
  102.             }   
  103.             return false;   
  104.         });   
  105.     },   
  106.        
  107.     initMenuItem:function(el,options){   
  108.         el.addClass("youi-menu-vertical");   
  109.         var menuUl = $("ul:first",el);   
  110.         if(menuUl.size()==0){   
  111.             menuUl = $("
      "
    );   
  112.             el.append(menuUl);   
  113.         }else{}   
  114.            
  115.         if(menuUl.prev().is("a")){   
  116.                
  117.         }else{   
  118.             $(el.get(0).firstChild).wrap('');   
  119.         }   
  120.         var link = $("a:first",el);   
  121.         link.addClass("youi-menu-vertical-a");   
  122.         if(options.active=="false"){   
  123.             link.css("color","#8C8C8C");   
  124.         }   
  125.         if($("li",menuUl).size()>0){   
  126.             link.addClass("youi-menu-vertical-arrow");   
  127.         }   
  128.            
  129.         var menuIconDiv = $("div.youi-menu-icon",link);   
  130.         if(menuIconDiv.size()===0){   
  131.             menuIconDiv = $('"images/youi/s.gif" class="youi-menu-icon"/>');   
  132.             link.prepend(menuIconDiv);   
  133.         }   
  134.         var menuIcon = options.menuIcon;   
  135.            
  136.         if(options.checked=="false"){   
  137.             if(options.group){   
  138.                    
  139.             }else{   
  140.                 menuIconDiv.addClass("youi-menu-unchecked-icon");   
  141.             }   
  142.         }else if(options.checked=="true"){   
  143.             if(options.group){   
  144.                 menuIconDiv.addClass("youi-menu-group-checked-icon");   
  145.             }else{   
  146.                 menuIconDiv.addClass("youi-menu-checked-icon");   
  147.             }   
  148.                
  149.         }else{   
  150.             if(menuIcon){   
  151.                 menuIconDiv.css("backgroundImage","url("+menuIcon+")");   
  152.             }   
  153.         }   
  154.            
  155.         el.mousedown(function(){   
  156.             if($(this).attr("active")=="false"){return false;};   
  157.             var checked = this.getAttribute("youiChecked");   
  158.             var group = this.getAttribute("group");   
  159.             var menuIconDiv = $("img.youi-menu-icon:first",this);   
  160.                
  161.             if(checked == "false"){   
  162.                 if(group){   
  163.                     $(this).parent().find('> li[@group='+group+'] > a > img').not(menuIconDiv).removeClass("youi-menu-group-checked-icon");   
  164.                     $(this).parent().find('> li[@group='+group+']').not(this).attr("youiChecked","false");   
  165.                     menuIconDiv.addClass("youi-menu-group-checked-icon");   
  166.                 }else{   
  167.                     menuIconDiv.removeClass("youi-menu-unchecked-icon").addClass("youi-menu-checked-icon");   
  168.                 }   
  169.                 this.setAttribute("youiChecked","true");   
  170.             }else if(checked == "true"){   
  171.                 if(group){   
  172.                        
  173.                 }else{   
  174.                     menuIconDiv.removeClass("youi-menu-checked-icon").addClass("youi-menu-unchecked-icon");   
  175.                     this.setAttribute("youiChecked","false");   
  176.                 }   
  177.             }else{   
  178.                    
  179.             }   
  180.             //如果有子节点，不收起   
  181.             if($("li",this).size()==0){   
  182.                 $(this).click();   
  183.                 $.youi.menu.closeMenu(options.menu);   
  184.             }   
  185.             return false;   
  186.         });   
  187.            
  188.         var hotKey = options.hotKey;   
  189.         if(hotKey){   
  190.             jQuery.hotkeys.add(hotKey,function(){el.click();});   
  191.             var hotKeyPanel = $('class="youi-menu-hotKey">'+hotKey+'');   
  192.             hotKeyPanel.css("right","15px");   
  193.             link.append(hotKeyPanel);   
  194.         }   
  195.     },   
  196.        
  197.     addMenuItem:function(menuItem){   
  198.            
  199.     },   
  200.        
  201.     /*  
  202.      *  
  203.      */  
  204.     hoverOverLI:function(menuItem,options){   
  205.         if(options.menu.attr("activeMenu")!="true"){return;}   
  206.            
  207.         var menuUl = $("ul:first",menuItem);   
  208.         menuItem.parent().find('> li > ul:visible').not(menuUl).hide();   
  209.            
  210.         if($("li",menuUl).size()>0&&menuItem.attr("active")!="false"){   
  211.             if(menuItem.attr("hasLoad")!="true"){   
  212.                 menuItem.attr("hasLoad","true");   
  213.             }   
  214.             menuUl.css("position","absolute");   
  215.             var menuLeft = 0;   
  216.             var menuTop = 0;   
  217.             if(options.type=="menuBar"){   
  218.                 menuLeft = menuItem.get(0).offsetLeft;   
  219.                 menuTop = menuItem.get(0).offsetTop+menuItem.get(0).offsetHeight;   
  220.             }else{   
  221.                 menuLeft = menuItem.get(0).offsetLeft+menuItem.get(0).offsetWidth-6;   
  222.                 menuTop = menuItem.get(0).offsetTop-2;   
  223.             }   
  224.             menuUl.css("left",menuLeft);   
  225.             menuUl.css("top",menuTop);   
  226.             menuUl.show();   
  227.         }   
  228.     },   
  229.        
  230.     hoverOutLI:function(menuItem){   
  231.         $("ul:visible:gt(0)",menuItem).hide();   
  232.     }   
  233. });  

  菜单动作调用实在是没想到什么好方法管理了，就用注册式的action方式吧

js 代码
  1. /******************************************************************************************************************************/  
  2. (function (jQuery){   
  3.     this.version = '(beta)(0.0.1)';   
  4.     this.register = function(name, options, callback) {   
  5.         if (jQuery.isFunction(options)){   
  6.             callback = options;   
  7.             options = {};   
  8.         }   
  9.            
  10.         jQuery.actionFactory[name]=function(){   
  11.             var checked = this.attr("youiChecked");   
  12.             var value = this.attr("value");   
  13.             callback.apply(this,[checked,value]);   
  14.         };   
  15.            
  16.         return jQuery;   
  17.     };       
  18.     this.remove = function(name) {      
  19.         return jQuery;   
  20.     };   
  21.     jQuery.actionFactory = this;   
  22.     return jQuery;       
  23. })(jQuery);  

 调用注册

js 代码
  1. //注册菜单调用方法   
  2. jQuery.actionFactory.register("openFile",function(){   
  3.     alert("openFile...");   
  4. });   
  5.   
  6. jQuery.actionFactory.register("close",function(){   
  7.     alert("close...");   
  8. });   
  9.   
  10. jQuery.actionFactory.register("showToolBar",function(checked){   
  11.     if(checked=="true"){   
  12.         alert("显示工具栏");   
  13.     }else{   
  14.         alert("隐藏工具栏");   
  15.     }   
  16. });   
  17.   
  18. jQuery.actionFactory.register("setFontSize",function(checked,value){   
  19.     alert(value);   
  20. });  

 大概完成了一半，感觉还是比较有意思，看看初步的成功

 

 

 

 

  • 描述: 预览界面
  • 大小: 976.2 KB
分享到：
评论
2 楼 abin30 2008-09-24  
老大，能不能把完整的代码共享一下啊。。 本人js很臭，实在是没有办法自己写啊。。。
1 楼 qq82600528 2007-11-26  
这么漂亮的代码看了几次也，也没有下文。
踩一脚，期待ing...继续！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics