小试jquery构建UI组件

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

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

1.       构建框架

   js 代码

    

   (function($) {
   
       $.youi = $.youi || {};
   
       $.youi.menu = {};
   
       $.youi.menuItem = {};
   
       $.extend($.youi.menu, {..........});
   
       $.extend($.youi.menuItem, {..........});
                         ....................
   })(jQuery);

2.  定义jquery扩展访问方法

    

$.fn.extend({
    youiMenu:function(options){
        var menu = this;
        $.youi.menu.create(this,options);
        return menu;
    },

    youiMenuItem:function(options){
        var menuItem = this;
        $.youi.menuItem.create(this,options);
        return menuItem;
    }
});

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

        扩展 $.youi.menu

js代码

$.extend($.youi.menu, {
    menuItems:[],
    /**
     * 初始化函数
     */
    create:function(el,options){
        $.youi.menu.initMenu(el,options);
        $("body",document).click(function(){
            $.youi.menu.closeMenu(el);
        });
    },

    initMenu:function(el,options){
        $("ul>li",el).each(function(){
            $(this).youiMenuItem({menu:el});
        });
    },

    closeMenu:function(menu){
        $($.youi.menu.menuItems).each(function(){
            $("ul",this).hide();
        });
        menu.attr("activeMenu","false");  //菜单激活属性
    }
});

 

 扩展$.youi.menuItem

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

js 代码

$.extend($.youi.menuItem, {
    menuItemAttrs:function(el){
        return {
            id        :el.attr("id"),
            text      :el.attr("text"),
            menuIcon:el.attr("menuIcon"),
            action  :el.attr("youiAction"),//opera中 action属性会自动加上路径 file://D:...
            hotKey  :el.attr("hotKey"),
            type      :el.attr("menuType"),//本想使用type的 可opera不干
            checked :el.attr("youiChecked"),//opera中checked属性只能显示checked，有时opera，无语了....
            group     :el.attr("group"),
            active  :el.attr("active")
        };
    },

    create:function(el,options){
        options = $.extend({},options,$.youi.menuItem.menuItemAttrs(el));
        if(!options.id){   //处理id属性
            options.id = "menu-"+$.youi.menu.menuItems.length;
            el.attr("id",options.id);
        }

        if(options.type=="menuSplit"){
            $.youi.menuItem.initMenuSplit(el,options);
            return;
        }else if(options.type=="menuBar"){
            $.youi.menuItem.initMenuBar(el,options);
        }else{
            $.youi.menuItem.initMenuItem(el,options);
        }

        $("ul:first",el).hide();
        $("ul:first",el).addClass("youi-menu-panel");
        /**
         * 为菜单节点添加访问方法
         */
        $.extend(el,{
            addMenuItem:function(){
                $.youi.menuItem.addMenuItem(this);
            },

            getParent:function(){
                return el.parent("li").youiMenuItem({menu:options.menu});
            },

            toString:function(){
                return this.attr("id");
            }
        });

        el.mouseover(function(){
            el.addClass("youi-menu-active");
            $.youi.menuItem.hoverOverLI($(this),options);
            return false;
        });

        el.mouseout(function(){
            el.removeClass("youi-menu-active");
            $.youi.menuItem.hoverOutLI($(this));
            return false;
        });

        var action = options.action;
        if(action){
            el.click(function(){
                if($(this).attr("active")=="false"){return false;};//非活动菜单

                if(typeof(action)=="string"){
                    try{
                        jQuery.actionFactory[action].apply(el,[]);
                    }catch(err){
                        //alert("click:"+err.message);
                        $("#out").html(err.message);
                        //alert("not find callback function:"+action);
                    }
                }else if(typeof(action)=="function"){
                    action.apply(el);
                }
            });

        }
        el.click(function(){return false;});

        $.youi.menu.menuItems.push(el);
    },

    initMenuSplit:function(el,options){
        el.addClass("youi-menu-split");
        el.append('class="youi-menu-split-span"/>');
    },

    initMenuBar:function(el,options){
        el.addClass("youi-menu-horizontal");
        el.click(function(){
            var activeMenu = options.menu.attr("activeMenu");
            if(activeMenu=="true"){
                options.menu.attr("activeMenu","false");
                $("ul",this).hide();
            }else{
                options.menu.attr("activeMenu","true");
                $(this).mouseover();
            }
            return false;
        });
    },

    initMenuItem:function(el,options){
        el.addClass("youi-menu-vertical");
        var menuUl = $("ul:first",el);
        if(menuUl.size()==0){
            menuUl = $(" ");
            el.append(menuUl);
        }else{}

        if(menuUl.prev().is("a")){

        }else{
            $(el.get(0).firstChild).wrap('');
        }
        var link = $("a:first",el);
        link.addClass("youi-menu-vertical-a");
        if(options.active=="false"){
            link.css("color","#8C8C8C");
        }
        if($("li",menuUl).size()>0){
            link.addClass("youi-menu-vertical-arrow");
        }

        var menuIconDiv = $("div.youi-menu-icon",link);
        if(menuIconDiv.size()===0){
            menuIconDiv = $('"images/youi/s.gif" class="youi-menu-icon"/>');
            link.prepend(menuIconDiv);
        }
        var menuIcon = options.menuIcon;

        if(options.checked=="false"){
            if(options.group){

            }else{
                menuIconDiv.addClass("youi-menu-unchecked-icon");
            }
        }else if(options.checked=="true"){
            if(options.group){
                menuIconDiv.addClass("youi-menu-group-checked-icon");
            }else{
                menuIconDiv.addClass("youi-menu-checked-icon");
            }

        }else{
            if(menuIcon){
                menuIconDiv.css("backgroundImage","url("+menuIcon+")");
            }
        }

        el.mousedown(function(){
            if($(this).attr("active")=="false"){return false;};
            var checked = this.getAttribute("youiChecked");
            var group = this.getAttribute("group");
            var menuIconDiv = $("img.youi-menu-icon:first",this);

            if(checked == "false"){
                if(group){
                    $(this).parent().find('> li[@group='+group+'] > a > img').not(menuIconDiv).removeClass("youi-menu-group-checked-icon");
                    $(this).parent().find('> li[@group='+group+']').not(this).attr("youiChecked","false");
                    menuIconDiv.addClass("youi-menu-group-checked-icon");
                }else{
                    menuIconDiv.removeClass("youi-menu-unchecked-icon").addClass("youi-menu-checked-icon");
                }
                this.setAttribute("youiChecked","true");
            }else if(checked == "true"){
                if(group){

                }else{
                    menuIconDiv.removeClass("youi-menu-checked-icon").addClass("youi-menu-unchecked-icon");
                    this.setAttribute("youiChecked","false");
                }
            }else{

            }
            //如果有子节点，不收起
            if($("li",this).size()==0){
                $(this).click();
                $.youi.menu.closeMenu(options.menu);
            }
            return false;
        });

        var hotKey = options.hotKey;
        if(hotKey){
            jQuery.hotkeys.add(hotKey,function(){el.click();});
            var hotKeyPanel = $('class="youi-menu-hotKey">'+hotKey+'');
            hotKeyPanel.css("right","15px");
            link.append(hotKeyPanel);
        }
    },

    addMenuItem:function(menuItem){

    },

    /*
     *
     */
    hoverOverLI:function(menuItem,options){
        if(options.menu.attr("activeMenu")!="true"){return;}

        var menuUl = $("ul:first",menuItem);
        menuItem.parent().find('> li > ul:visible').not(menuUl).hide();

        if($("li",menuUl).size()>0&&menuItem.attr("active")!="false"){
            if(menuItem.attr("hasLoad")!="true"){
                menuItem.attr("hasLoad","true");
            }
            menuUl.css("position","absolute");
            var menuLeft = 0;
            var menuTop = 0;
            if(options.type=="menuBar"){
                menuLeft = menuItem.get(0).offsetLeft;
                menuTop = menuItem.get(0).offsetTop+menuItem.get(0).offsetHeight;
            }else{
                menuLeft = menuItem.get(0).offsetLeft+menuItem.get(0).offsetWidth-6;
                menuTop = menuItem.get(0).offsetTop-2;
            }
            menuUl.css("left",menuLeft);
            menuUl.css("top",menuTop);
            menuUl.show();
        }
    },

    hoverOutLI:function(menuItem){
        $("ul:visible:gt(0)",menuItem).hide();
    }
});

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

js 代码

/******************************************************************************************************************************/
(function (jQuery){
    this.version = '(beta)(0.0.1)';
    this.register = function(name, options, callback) {
        if (jQuery.isFunction(options)){
            callback = options;
            options = {};
        }

        jQuery.actionFactory[name]=function(){
            var checked = this.attr("youiChecked");
            var value = this.attr("value");
            callback.apply(this,[checked,value]);
        };

        return jQuery;
    };
    this.remove = function(name) {
        return jQuery;
    };
    jQuery.actionFactory = this;
    return jQuery;
})(jQuery);

 调用注册

js 代码

//注册菜单调用方法
jQuery.actionFactory.register("openFile",function(){
    alert("openFile...");
});

jQuery.actionFactory.register("close",function(){
    alert("close...");
});

jQuery.actionFactory.register("showToolBar",function(checked){
    if(checked=="true"){
        alert("显示工具栏");
    }else{
        alert("隐藏工具栏");
    }
});

jQuery.actionFactory.register("setFontSize",function(checked,value){
    alert(value);
});

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

 

 

 

 

评论

2 楼 abin30 2008-09-24  

老大，能不能把完整的代码共享一下啊。。 本人js很臭，实在是没有办法自己写啊。。。

1 楼 qq82600528 2007-11-26  

这么漂亮的代码看了几次也，也没有下文。
踩一脚，期待ing...继续！