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();
}

});