`
宋双旺
  • 浏览: 154489 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

实战YUI 的 Menu 组件

    博客分类：
  • YUI
yui 
阅读更多

Menu家族成员

YAHOO.widget.Menu

YAHOO.widget.Overlay 的子类,其他menu容器的超类. Menu类创建一个容器(Container)并放置一列垂直的列表.每项菜单称为MenuItem.

YAHOO.widget.ContextMenu

Menu的子类,创建一个菜单,能被某html元素的contextmenu事件触发.每项菜单称为MenuItem.

YAHOO.widget.MenuBar

Menu的子类,只不过是水平风格而不是垂直风格.每项菜单称为MenuItem.

组成关系图如下




Menu 和 MenuItem 的关系图如下



每个MenuItem 又可以是一个Menu,这叫做 sub menu item.

开始

以下库是必须的:(注:这段是翻译官方网的,有问题.原因在后文有说明 )

<!--  Core + Skin CSS  -->
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css" >

<!--  Dependencies  -->  
 < script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >

<!--  Source File  -->
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >


基本用法

Menu可以通过html或js两种方式完成配置.Menu组件遵循 YAHOO.widget.Module 的模型,用一个div作为body,所有<li>元素象征一个item.最简单的menu如下,传入div的id并依次调用render,show方法即可,如下:


 < html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >  
 < title > 交通违法数据处理系统 2009 </ title >

<!--  Core + Skin CSS  -->
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css" >

<!--  Dependencies  -->  
 < script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >

<!--  Source File  -->
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >


</ head >

< body  class ="yui-skin-sam" >
< div  id ="basicmenu"  class ="yuimenu" >
     < div  class ="bd" >
         < ul  class ="first-of-type" >
             < li  class ="yuimenuitem" >
                 < a  class ="yuimenuitemlabel"  href ="http://mail.yahoo.com" >
                    Yahoo! Mail
                 </ a >
             </ li >
             < li  class ="yuimenuitem" >
                 < a  class ="yuimenuitemlabel"  href ="http://addressbook.yahoo.com" >
                    Yahoo! Address Book
                 </ a >
             </ li >
             < li  class ="yuimenuitem" >
                 < a  class ="yuimenuitemlabel"  href ="http://calendar.yahoo.com" >
                    Yahoo! Calendar
                 </ a >
             </ li >
             < li  class ="yuimenuitem" >
                 < a  class ="yuimenuitemlabel"  href ="http://notepad.yahoo.com" >
                    Yahoo! Notepad
                 </ a >
             </ li >
         </ ul >             
     </ div >
</ div >

< script >
YAHOO.util.Event.onContentReady( " basicmenu " ,  function  () {
            
     /*
         Instantiate a Menu.  The first argument passed to the 
         constructor is the id of the element in the DOM that represents 
         the Menu instance.
     */
    
     var  oMenu  =   new  YAHOO.widget.Menu( " basicmenu " );
    
    
     /*
         Call the "render" method with no arguments since the markup for 
         this Menu instance already exists in the DOM.
     */
    
    oMenu.render();
    

     //  Show the Menu instance
    
    oMenu.show();
            
});
 </ script >


</ body >
</ html >


Js初始化Menu


在html里放一个div,在Menu的构造函数里传入div的id,并调用addItem , insertItem , 和 addItems 等方法添加元素,如下

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
     < meta  http-equiv ="content-type"  content ="text/html; charset=utf-8" >
< title > Basic Menu From JavaScript </ title >

< style  type ="text/css" >
/* margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments.  */
body  {
    margin : 0 ;
    padding : 0 ;
}

#rendertarget  {
    width : 180px ;
}

</ style >

< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css"   />
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css"   />
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >


<!-- begin custom header content for this example -->
< style  type ="text/css" >

     /*
        Set the "zoom" property to "normal" since it is set to "1" by the 
        ".example-container .bd" rule in yui.css and this causes a Menu
        instance's width to expand to 100% of the browser viewport.
     */
    
    div.yuimenu .bd  {
    
        zoom :  normal ;
    
     }

</ style >
<!-- end custom header content for this example -->

</ head >

< body  class =" yui-skin-sam" >

< div  id ="rendertarget" ></ div >

< script  type ="text/javascript" >

     /*
         Initialize and render the Menu when the element it is to be 
         rendered into is ready to be scripted.
     */

    YAHOO.util.Event.onAvailable( " rendertarget " ,  function  () {

         /*
             Instantiate a Menu:  The first argument passed to the 
             constructor is the id of the element in the page 
             representing the Menu; the second is an object literal 
             of configuration properties.
         */

         var  oMenu  =   new  YAHOO.widget.Menu( " basicmenu " , { fixedcenter:  true ,visible: true ,position: " static "  });


         /*
            Add items to the Menu instance by passing an array of object literals 
            (each of which represents a set of YAHOO.widget.MenuItem 
            configuration properties) to the "addItems" method.
         */

        oMenu.addItems([

                { text:  " Yahoo! Mail " , url:  " http://mail.yahoo.com "  },
                { text:  " Yahoo! Address Book " , url:  " http://addressbook.yahoo.com "  },
                { text:  " Yahoo! Calendar " , url:  " http://calendar.yahoo.com "  },
                { text:  " Yahoo! Notepad " ,  url:  " http://notepad.yahoo.com "  }

            ]);


         /*
            Since this Menu instance is built completely from script, call the 
            "render" method passing in the DOM element that it should be 
            appended to.
         */

        oMenu.render( " rendertarget " );


         //  Set focus to the Menu when it is made visible

        
        oMenu.show();
    
    });
    
 </ script >


</ body >
</ html >





如果你运行这两个例子,你会发现第二个菜单比第一个好看很多,原因在于官方网的getting start章节里少引了一些必需的库.完整的js和css库应该如上第二个例子,即:


 < link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css"   />
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css"   />
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >


前两个例子的菜单是一直显示的,特别主意的是第二个例子,通过Menu的初始化函数传入配置让菜单一直显示.

用button控制菜单显示与否,看官网的例子得了.在这里 , 重点是这两句:

//  Set focus to the Menu when it is made visible
oMenu.subscribe( " show " , oMenu.focus);
YAHOO.util.Event.addListener( " menutoggle " ,  " click " , oMenu.show,  null , oMenu);

 

创建子菜单



Html方式创建子菜单


方法很简单,再创建一个Menu,然后放到某个<li>元素里即可,如下例子:(重点看submenu begin end 一段)


 < html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >  
 < title > 交通违法数据处理系统 2009 </ title >


< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css"   />
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css"   />
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >


</ head >

< body  class ="yui-skin-sam" >

< div  id ="productsandservices"  class ="yuimenu" >
     < div  class ="bd" >
         < ul  class ="first-of-type" >
             < li  class ="yuimenuitem" >
            
                 < a  class ="yuimenuitemlabel"  href ="#communication" >
                    Communication
                 </ a >

                 <!--  A submenu begin:****************************************************************** -->

                 < div  id ="communication"  class ="yuimenu" >
                     < div  class ="bd" >
                         < ul >

                         < li  class ="yuimenuitem" >
                                     < a  class ="yuimenuitemlabel"  href ="http://mail.yahoo.com" >
                                        Yahoo! Mail
                                     </ a >
                                 </ li >
                                 < li  class ="yuimenuitem" >
                                     < a  class ="yuimenuitemlabel"  href ="http://addressbook.yahoo.com" >
                                        Yahoo! Address Book
                                     </ a >
                                 </ li >
                                 < li  class ="yuimenuitem" >
                                     < a  class ="yuimenuitemlabel"  href ="http://calendar.yahoo.com" >
                                        Yahoo! Calendar
                                     </ a >
                                 </ li >
                                 < li  class ="yuimenuitem" >
                                     < a  class ="yuimenuitemlabel"  href ="http://notepad.yahoo.com" >
                                        Yahoo! Notepad
                                     </ a >
                                 </ li >

                         </ ul >
                     </ div >
                 </ div >  
                  <!--  A submenu end:****************************************************************** -->

            
             </ li >
             < li  class ="yuimenuitem" >
            
                 < a  class ="yuimenuitemlabel"  href ="http://shopping.yahoo.com" >
                    Shopping
                 </ a >

                 <!--  A submenu  -->

                 < div  id ="shopping"  class ="yuimenu" >
                     < div  class ="bd" >                     
                         < ul >

                         <!--  Items for the submenu go here  -->

                         </ ul >
                     </ div >
                 </ div >                     
            
             </ li >
             < li  class ="yuimenuitem" >
            
                 < a  class ="yuimenuitemlabel"  href ="http://entertainment.yahoo.com" >
                    Entertainment
                 </ a >

                 <!--  A submenu  -->

                 < div  id ="entertainment"  class ="yuimenu" >
                     < div  class ="bd" >                     
                         < ul >

                         <!--  Items for the submenu go here  -->

                         </ ul >                     
                     </ div >
                 </ div >                                         
            
             </ li >
             < li  class ="yuimenuitem" >
            
                 < a  class ="yuimenuitemlabel"  href ="#information" >
                    Information
                 </ a >

                 <!--  A submenu  -->

                 < div  id ="information"  class ="yuimenu" >
                     < div  class ="bd" >                                         
                         < ul >

                         <!--  Items for the submenu go here  -->

                         </ ul >                     
                     </ div >
                 </ div >                                         
            
             </ li >
         </ ul >             
     </ div >
</ div >


< script >
YAHOO.util.Event.onContentReady( " productsandservices " ,  function  () {
            
     /*
         Instantiate a Menu.  The first argument passed to the 
         constructor is the id of the element in the DOM that represents 
         the Menu instance.
     */
    
     var  oMenu  =   new  YAHOO.widget.Menu( " productsandservices " );
    
    
     /*
         Call the "render" method with no arguments since the markup for 
         this Menu instance already exists in the DOM.
     */
    
    oMenu.render();
    

     //  Show the Menu instance
    
    oMenu.show();
            
});
 </ script >


</ body >
</ html >

 

Js方式创建子菜单

比用html方式简单,在加入菜单的时候,加个subitem对象即可:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
     < meta  http-equiv ="content-type"  content ="text/html; charset=utf-8" >
< title > Basic Menu From JavaScript </ title >

< style  type ="text/css" >
/* margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments.  */
body  {
    margin : 0 ;
    padding : 0 ;
}

#rendertarget  {
    width : 180px ;
}

</ style >

< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css"   />
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css"   />
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >


<!-- begin custom header content for this example -->
< style  type ="text/css" >

     /*
        Set the "zoom" property to "normal" since it is set to "1" by the 
        ".example-container .bd" rule in yui.css and this causes a Menu
        instance's width to expand to 100% of the browser viewport.
     */
    
    div.yuimenu .bd  {
    
        zoom :  normal ;
    
     }

</ style >
<!-- end custom header content for this example -->

</ head >

< body  class =" yui-skin-sam" >

< div  id ="rendertarget" ></ div >

< script  type ="text/javascript" >

    YAHOO.util.Event.onAvailable( " rendertarget " ,  function  () {  
         var  oMenu  =   new  YAHOO.widget.Menu( " basicmenu " , { fixedcenter:  true ,visible: true ,position: " static "  });
        oMenu.addItems([

                { text:  " Yahoo! Mail " , 
                    submenu: { 
    
                            id:  " submenu1 " ,  //  Id for the submenu element to be created
        
                             //  Array of YAHOO.widget.MenuItem configuration properties
        
                            itemdata: [ " Menu Item One " ,  " Menu Item Two " ,  " Menu Item Three " ]
                        }               
                
                },
                { text:  " Yahoo! Address Book " , url:  " http://addressbook.yahoo.com "  },
                { text:  " Yahoo! Calendar " , url:  " http://calendar.yahoo.com "  },
                { text:  " Yahoo! Notepad " ,  url:  " http://notepad.yahoo.com "  }

            ]);

        oMenu.render( " rendertarget " );
        oMenu.show();
    
    });
    
 </ script >


</ body >
</ html >

 

Menu的配置

在构造Menu或者增加item的时候,都可以加入一些配置选项,如下.完整的配置选项请参考api.

YAHOO.util.Event.onDOMReady( function  () {


     var  oMenu  =   new  YAHOO.widget.Menu( " mymenu " , { visible:  true  });


    oMenu.addItems([
        { text:  " Menu Item One " , disabled:  true  }, 
        { text:  " Menu Item Two " , checked:  true  }
        ]);
    
    oMenu.render(document.body);

});


在初始化之后,Menu和每个Item都保留有一个cfg对象.该对象保留着配置信息,可以通过getProperty和setProperty方法取得.如下:

YAHOO.util.Event.onDOMReady( function  () {


     var  oMenu  =   new  YAHOO.widget.Menu( " mymenu " , { visible:  true  });
    
    oMenu.addItems([
        { text:  " Menu Item One " , disabled:  true  }, 
        { text:  " Menu Item Two " , checked:  true  }
        ]);
    
    oMenu.render(document.body);
    
    alert(oMenu.getItem( 0 ).cfg.getProperty( " text " ));     //  alerts "Menu Item One"
    
    oMenu.getItem( 0 ).cfg.setProperty( " disabled " ,  false );
    alert(oMenu.cfg.getProperty( " visible " ));   //  alerts "true"    
    
    oMenu.cfg.setProperty( " visible " ,  false );    
    alert(oMenu.cfg.getProperty( " visible " ));   //  alerts "false"
    
});



Menu的事件

以下例子展示了如何改写show和hide方法,这两个方法继承自Module组件.在方法的参数p_aArgs中,第一个参数是event对象,第二个参数是MenuItem本身.

YAHOO.util.Event.onDOMReady( function  () {
            
     //  Create a new Menu instance
    
     var  oMenu  =   new  YAHOO.widget.Menu( " mymenu " );
    
    oMenu.addItems([ " Menu Item 1 " ,  " Menu Item 2 " ,  " Menu Item 3 " ]);
    
    
     //  Define a handler for the "show" event
    
     function  onShow(p_sType, p_aArgs) {  
    
        alert( this .id  +   "  is now visible " );
    
    }
    
     //  Define a handler for the "hide" event
    
     function  onHide(p_sType, p_aArgs) {  
    
        alert( this .id  +   "  is now hidden " );
    
    }
    
     //  Subscribe to the "show" and "hide" events
    
    oMenu.subscribe( " show " , onShow);
    oMenu.subscribe( " hide " , onHide);
    
    oMenu.render(document.body);   
    

    function onClick(p_sType, p_aArgs) {  

        var oEvent = p_aArgs[0],    // DOM Event
            oMenuItem = p_aArgs[1]; // YAHOO.widget.MenuItem instance


        // Alert the type of the DOM event

        alert(oEvent.type);


        // If a MenuItem was clicked, alert the value of its text label

        if (oMenuItem) {

            alert(oMenuItem.cfg.getProperty("text"));

        }

    }


    // Subscribe to the "click" event

    oMenu.subscribe("click", onClick);
    oMenu.show();

});

分享到：
| 【转】小议swfupload的bug及解决之道
评论
发表评论

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

相关推荐

    【YUI组件】基于YUI的表单验证器

    通常，这样的组件会有一个主JS文件（如`yui-form-validator.js`），可能还有一个CSS文件（如`yui-form-validator.css`）来处理样式，以及一些示例或测试用例文件。 **相关知识点：** 1. **YUI库**：了解YUI的基本...

    YUI3 dialog组件

    **YUI3 Dialog组件详解** YUI3是Yahoo!推出的一款强大的JavaScript库，它提供了丰富的UI组件和工具，用于构建高性能、跨平台的Web应用程序。Dialog组件是YUI3中的一个重要部分，它允许开发者创建可交互的弹出窗口，...

    Yahoo YUI 插件库

    4. **日期和时间选择器**：YUI Calendar组件提供了一个用户友好的日历界面，可以用于日期输入和选择，简化了日期相关的用户交互。 5. **表单验证**：YUI FormValidator插件可以帮助开发者快速实现表单验证，确保...

    YUI.rar_html_javascript YUI_yui_yui javascript

    3. **下拉菜单**：YUI的Menu组件可以轻松创建多级下拉菜单，提升网站导航的用户体验。 4. **拖放功能**：YUI的Drag & Drop模块支持元素的拖放操作，适用于创建可交互的布局或组织工具。 5. **数据表格**：YUI的...

    yui.rar 例子

    例如，例子中可能用到了“yui-button”来创建交互式的按钮，或者使用“yui-menu”构建导航菜单，这些组件大大简化了开发工作，提升了用户体验。 在实际开发中，YUI的调试工具也非常实用。YUI Logger可以帮助开发者...

    yui 资源包

    在3.9.0 r2这个版本中，YUI提供了丰富的组件和工具，帮助开发者创建高效、可维护且用户体验优良的Web应用。 一、YUI的核心特性 1. **模块化**：YUI采用AMD（Asynchronous Module Definition）模块加载机制，允许...

    雅虎YUI组建

    **雅虎YUI组件详解** 雅虎用户界面库（Yahoo! User Interface Library，简称YUI）是雅虎公司推出的一款开源JavaScript和CSS框架，旨在帮助开发者构建高性能、可扩展的前端应用。YUI包含了丰富的组件，包括布局管理...

    YUI 入门教程YUI 入门教程YUI 入门教程

    `env`模块提供了关于浏览器环境和YUI组件的信息，而`YUI_config`允许用户定义自定义的配置和回调函数，以适应不同的加载需求。 除此之外，YUI还提供了动画模块、CSS样式管理、数据处理、表格、菜单、表单验证等多种...

    YUI-EXT使用详解

    1. **组件（Components）**：YUI-EXT的核心就是组件，每个组件都是一个自包含的、可重用的UI元素，如按钮、面板、树形视图等。这些组件都有自己的生命周期，包括创建、初始化、渲染和销毁等阶段，便于开发者进行控制...

    《YUI使用文档》汉语版的yui学习材料

    `env`模块则包含环境信息和YUI组件的详细信息，这对于了解YUI运行环境和组件状态非常有帮助。`YUI_config.listener`允许定义自定义回调函数，当有新的YUI组件被加载时，该函数会被调用。 YUI的DOM操作是其强大之处...

    YAHOO yui2.7 文档+ 代码+例子

    YUI 2.7提供的文档详尽介绍了每个组件的用法，包括API参考、教程和示例代码，对于初学者来说是极好的学习资源。通过文档，开发者可以快速上手，并理解如何将YUI应用到实际项目中。同时，示例代码有助于直观地展示...

    YUI3.6文档及示例

    YUI3.6版本是该库的一个重要里程碑，提供了丰富的组件和工具，以支持现代Web开发的需求。在这个文档及示例的压缩包中，你将找到关于YUI3.6的详细信息，包括API文档和实践示例，这将有助于你深入理解和应用YUI。 YUI...

    yui_2.6.0r2

    《深入解析YUI 2.6.0r2：JavaScript组件库的基石》 YUI，全称为Yahoo! User Interface Library，是雅虎公司推出的一个开源JavaScript库，旨在帮助开发者构建高质量、高性能的Web应用程序。YUI 2.6.0r2是该库的一个...

    YUI2 库与例子都有了

    4. **组件（Components）**：YUI2提供了多种组件，如按钮、表格、日历、菜单、滑块等，这些组件可以快速构建用户界面，同时提供了丰富的API供开发者自定义和扩展。 5. **数据（Data）**：YUI2支持数据绑定和模型-...

    yui3-master.zip

    《深入理解YUI3：基于yui3-master.zip的探讨》 YUI（Yahoo! User Interface Library）是由雅虎公司开发的一套开源JavaScript库，它为Web开发者提供了丰富的功能和工具，以创建交互性强、性能优秀的网页应用。YUI3是...

    yahoo3.0 YUI　Ｅxamples

    这个压缩包很可能是包含了一系列的代码示例，演示了如何在实际项目中使用YUI 3.0的各种组件和功能。 【描述】提到这是一个"Examples"集合，并提醒用户这不是"spring2.0中文参考手册.pdf"，暗示了压缩包的内容与...

    YUI-ajax框架开发文档

    YUI的核心在于提供了一系列模块化的组件，包括DOM操作、事件处理、动画效果、Ajax交互等，使得前端开发更加便捷高效。在"YUI-ajax框架开发文档"中，我们可以深入探讨YUI如何通过其Ajax组件实现异步数据通信。 YUI中...

    yui3.10.3最新版

    YUI 3的核心组件包括事件处理、DOM操作、动画效果、CSS样式管理、AJAX请求、数据存储以及各种用户界面组件等。 ### 版本3.10.3的特性 - **性能优化**：YUI 3.10.3版本在性能方面做了许多改进，包括更快的脚本执行...

    关于yui的学习

    通过学习这个组件，开发者可以掌握如何在网页中创建交互式的树形结构，并学会如何与其他YUI组件配合使用，提升用户界面的交互体验。 在实际应用中，YUI TreeView的使用通常涉及到以下几个关键知识点： 1. **初始化...

    yui_3.8.1.zip

    YUI 3.8.1是其发展过程中的一个重要版本，包含了丰富的组件和工具，为前端开发者提供了强大的功能支持。 一、YUI的核心理念 YUI的核心理念是模块化和可配置性。它将各种功能划分为独立的模块，开发者可以根据需求...

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