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   

 
 
   
   
   
   

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

        c、addClass   

 
 
   
   
   
   

    
    
    
    
$(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  案例如：

 
 
   
   
   
   

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

        f、effect

            shake,pulsate,bounce 案例如：

 
 
   
   
   
   

    
    
    
    
$(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、如何使用（配置参数的使用，方法的使用，自定义事件的使用）;

           -配置参数（配置参数可以在初始化时，也可以试初始化后)如：         

 
 
   
   
   
   

    
    
    
    
 $(obj).draggable({axis:'y'}); //初始化为y轴可以拖动
    
    
    
    
 $(obj).draggable('option','axis','x'); //修改为x轴拖动
   
   
   
   

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

 
 
   
   
   
   

    
    
    
    
 $(obj).draggable({axis:'y'}); //初始化为y轴可以拖动
    
    
    
    
 $(obj).draggable('destroy');  //销毁拖动
   
   
   
   

           方法的第二种写法：             

 
 
   
   
   
   

    
    
    
    
 var $obj = $(obj).draggable('instance'); //获取对象
    
    
    
    
 $obj.destroy();
   
   
   
   

           -自定义事件 （普通事件之上的封装）         

 
 
   
   
   
   

    
    
    
    
$(obj).draggable({axis:'y',create:function(){
    
    
    
    
        console.log("初始化");
    
    
    
    
 },start:function(){
    
    
    
    
        console.log("拖拽开始");
    
    
    
    
},stop:function(){
    
    
    
    
         console.log("托转接胡搜");
    
    
    
    
});
   
   
   
   

           事件的第二种写法： (注意没有dragcreat方法 这个比较独特)              

 
 
   
   
   
   

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

    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 //重新刷新试图
            案例：       

 
 
   
   
   
   

    
    
    
    
$( "#div1" ).accordion({ heightStyle : 'auto' }); //给一个列表元素添加一行高度没有自适应会出现滚动条
    
    
    
    
$('input').click(function(){
    
    
    
    
       var html = $('#div1 div').eq(0).html();
    
    
    
    
       $('#div1 div').eq(0).append(html);
    
    
    
    
       $( "#div1" ).accordion('refresh');
    
    
    
    
});  
   
   
   
   

    3-4 ui core核心操作

        选择器

           – :data()   如：

 
 
   
   
   
   

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

           – :focusable() 如：

 
 
   
   
   
   

    
    
    
    
$('div').children(':focusable()').css('background','red') //给能获取光标元素添加背景色
   
   
   
   

           – :tabbable() 如：

 
 
   
   
   
   

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

        方法

           – disableSelection() 如：

 
 
   
   
   
   

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

           – enableSelection() 如：

 
 
   
   
   
   

    
    
    
    
$('div').enableSelection(); //允许选中
   
   
   
   

           – focus()   如：

 
 
   
   
   
   

    
    
    
    
 $('input').eq(0).focus(1000,function(){alert(1)}); //1秒后获取焦点并有回调函数
   
   
   
   

           – scrollParent()   //找到有滚动条的父级对象
           – jQuery.ui.keyCode  //作用不大 代替keycode的值  如：

 
 
   
   
   
   

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

        实用工具

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

                -如案例：

 
 
   
   
   
   

    
    
    
    
$('#div2').position({  //div2会定位在div1内部的右上角
    
    
    
    
            my : 'right top',
    
    
    
    
            at : 'right top',
    
    
    
    
            of : '#div1'
    
    
    
    
});
   
   
   
   

        Widget Factory（一个组件开发的规范）

            编写出具备相同抽象化的插件
            命名空间
            继承方法
                http://api.jqueryui.com/jQuery.widget/
            私有和公有
            实例：编写widget进度条插件           

 
 
   
   
   
   

    
    
    
    
$.widget('miaov.testProgressBar',$.ui.mouse,{
    
    
    
    
    options : {
    
    
    
    
        value : 0,
    
    
    
    
        ut : '%',
    
    
    
    
        color : 'black',
    
    
    
    
        customMouseUp : function(){}
    
    
    
    
    },
    
    
    
    
    _create : function(){ //初始化
    
    
    
    
        var progress = this.options.value + this.options.ut;
    
    
    
    
        this.element.html( progress ).css('color',this.options.color);
    
    
    
    
        this._mouseInit();
    
    
    
    
    },
    
    
    
    
    _setOption : function(a,b){//
    
    
    
    
        if(a == 'value'){
    
    
    
    
            this.element.html( b + this.options.ut );
    
    
    
    
        }
    
    
    
    
    },
    
    
    
    
    aaa : function(){//公有方法
    
    
    
    
        alert(1);
    
    
    
    
    },
    
    
    
    
    _aaa : function(){//私有方法
    
    
    
    
        alert(2);
    
    
    
    
    },
    
    
    
    
    _mouseUp : function(){
    
    
    
    
        this.element.trigger('miaovcustomMouseUp');
    
    
    
    
        this.options.customMouseUp();
    
    
    
    
    }
    
    
    
    
    
    
    
    
    
});