jquery-ui學習筆記

組件和插件的區別 ：  

     組件和理解爲一組的插件

1、引入jq-ui.js  和css 

2、如何定製下載

3、分爲幾個大模塊：

    UI核心，UI交互，UI控件，UI特效，CSS主題

    3-1、UI特效（是獨立的不依賴其他模塊） effect效果分爲： 

        a、easing函數：

            http://www.w3cschool.cc/jqueryui/api-easings.html

        b、animate   

1. $(obj).animate({'height':'500'},1000,'linear');

        c、addClass   

1. $(obj).addClass('box',1000,'linear');

        d、removeClass 如上

        e、show/hide/toggle  

            -effect
                    blind  :  百葉窗    bounce  :  反彈
                    clip  :  剪切   drop  :  降落
                    explode  :  爆炸    fade  :  淡入淡出
                    fold   :  摺疊      puff   :  膨脹
                    pulsate   :  心跳      scale   :  縮放
                    shake   :  震動      size   :  尺寸
                    slide   :  滑動      transfer   :  轉移
                    如：$(obj).show(‘clip’,1000);
            -direction
                    up,down,left,right  案例如：

1. $(obj).toggle('blind',{direction:'up'},1000);

        f、effect

            shake,pulsate,bounce 案例如：

1. $(obj).effect('shake',1000);

    3-2、ui交互 

        draggable() 拖拽   
        droppable() 拖拽後釋放
        resizable() 縮放改變對象的寬高
        selectable() 選中（按鍵不放滾動選中）
        sortable() 排序（按鍵不放拖動排序位置）
        快速演示
        http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-api-draggable      

        a、參數說明：

            -以上交互效果都包含三種參數   基本參數：{option},  方法：methods, 事件events(寫在option中);

        b、如何使用（配置參數的使用，方法的使用，自定義事件的使用）;

           -配置參數（配置參數可以在初始化時，也可以試初始化後)如：         

1. $(obj).draggable({axis:'y'}); //初始化爲y軸可以拖動
2. $(obj).draggable('option','axis','x'); //修改爲x軸拖動

           -方法使用（是在初始化後）           

1. $(obj).draggable({axis:'y'}); //初始化爲y軸可以拖動
2. $(obj).draggable('destroy'); //銷燬拖動

           方法的第二種寫法：             

1. var $obj = $(obj).draggable('instance'); //獲取對象
2. $obj.destroy();

           -自定義事件 （普通事件之上的封裝）         

1. $(obj).draggable({axis:'y',create:function(){
2. console.log("初始化");
3. },start:function(){
4. console.log("拖拽開始");
5. },stop:function(){
6. console.log("託轉接胡搜");
7. });

           事件的第二種寫法： (注意沒有dragcreat方法 這個比較獨特)              

1. $(obj).draggable({'dragstart':function(){
2. console.log("初始化");
3. }
4. });           

    3-3 ui控件

        accordion()             autocomplete()
        button()                datepicker()
        dialog()                menu()
        progressbar()           selectmenu()
        slider()                spinner()
        tabs()                  ooltip()

        佈局HTML

            -學習index.html實例

        鍵盤控制

        css樣式

            學習index.html實例
            框架 : http://api.jqueryui.com/theming/css-framework/

        方法

            refresh //重新刷新試圖
            案例：       

1. $( "#div1" ).accordion({ heightStyle : 'auto' }); //給一個列表元素添加一行高度沒有自適應會出現滾動條
2. $('input').click(function(){
3. var html = $('#div1 div').eq(0).html();
4. $('#div1 div').eq(0).append(html);
5. $( "#div1" ).accordion('refresh');
6. });  

    3-4 ui core核心操作

        選擇器

           – :data()   如：

1. $('div:data(name)').css('background','red'); //給有name屬性的div添加背景色

           – :focusable() 如：

1. $('div').children(':focusable()').css('background','red') //給能獲取光標元素添加背景色

           – :tabbable() 如：

1. $('div').children(':tabbable()').css('background','red') //能接受tab索引的元素

        方法

           – disableSelection() 如：

1. $('div').disableSelection(); //禁止選中

           – enableSelection() 如：

1. $('div').enableSelection(); //允許選中

           – focus()   如：

1. $('input').eq(0).focus(1000,function(){alert(1)}); //1秒後獲取焦點並有回調函數

           – scrollParent()   //找到有滾動條的父級對象
           – jQuery.ui.keyCode  //作用不大 代替keycode的值  如：

1. if(ev.keyCode == $.ui.keyCode.ENTER){alert("回車")}

        實用工具

            mouse()
                內部使用，基於Widget Factory
                http://api.jqueryui.com/mouse/
                繼承格式 : $.ui.mouse
            position()
                my 
                at
                of

                -如案例：

1. $('#div2').position({ //div2會定位在div1內部的右上角
2. my : 'right top',
3. at : 'right top',
4. of : '#div1'
5. });

        Widget Factory（一個組件開發的規範）

            編寫出具備相同抽象化的插件
            命名空間
            繼承方法
                http://api.jqueryui.com/jQuery.widget/
            私有和公有
            實例：編寫widget進度條插件           

1. $.widget('miaov.testProgressBar',$.ui.mouse,{
2. options : {
3. value : 0,
4. ut : '%',
5. color : 'black',
6. customMouseUp : function(){}
7. },
8. _create : function(){ //初始化
9. var progress = this.options.value + this.options.ut;
10. this.element.html( progress ).css('color',this.options.color);
11. this._mouseInit();
12. },
13. _setOption : function(a,b){//
14. if(a == 'value'){
15. this.element.html( b + this.options.ut );
16. }
17. },
18. aaa : function(){//公有方法
19. alert(1);
20. },
21. _aaa : function(){//私有方法
22. alert(2);
23. },
24. _mouseUp : function(){
25. this.element.trigger('miaovcustomMouseUp');
26. this.options.customMouseUp();
27. }
29. });