jquery 插件（七） jquery UI(2)

1.addClass

addClass严格意义上讲不算UI，只是一个方法，其实下面的和这个一样，也是方法，都可以属于api。addClass用法，这里介绍可以用时间和callback函数，例子如下：

$("#button").click(function(){  $("p").addClass("newClass",1000,function(){setTimeout(function(){$("p").removeClass("p")},1000)});});

2.animate

$("#button").toggle(function(){  // toggle为在下面function中切换，第一次点击的fn和第二次点击的fn。click的升级版  $("p").animate({backgroundColor:'#aa00001',color:'#fff',width:500},1000)});},function(){  // animate和addClass作用相似，addClass更为简洁，可以加callback  $("p").animate({backgroundColor:'#fff',color:'#000',width:240},1000)});});

3.autocomplete

完成下拉项的匹配工作，用法很简单，使用前加载jquery.ui.autocomplete.js

$(function(){

 var aviable = ["ActionScript","Asp","Java","Hbag"];

$("input#tag").autocomplete({source:aviable}); // 可以设置很多参数

});

4.button

该控件无聊的封装了button checkbox radio等，可以使用圆角效果或者其他效果。在头部加jquery.ui.button.js

$(function(){

 $("input:submit,a,button",".demo").button();

$("a",".demo").click(function(){return false;});

});

5.draggable

第一次见识jquery的插件就是这个了，可以水平垂直等各种方向拖动

$(function(){

 $("#sortable").sortable({revert:true});

 $("#draggable").draggable({

 connectToSortable:'#sortable',

 helper:'clone',

revert:'invalid'

});

}):

各种和拖动有关的效果

6.droppable

和draggable搭配，让某个div拖动到一个固定的div中

$(function(){

 $("#draggable").draggable();

 $("#droppable").droppable({

   accept:"#draggable",  //只接收某一个

   drop:function(event,ui){

      $(this).addClass("ui-state-highlight").

      find("p").html("Dropped");

   }

  });

});

7.effect

做出一些类似幻灯片的效果

  $(function(){     function runEffect(){       var selectedEffect = $("#effectTypes").val();       var options ={};       if( selectedEffect == "scale"){          options ={percent:0};        }//....a lot of options ....       if( selectedEffect == "transfer"){          options ={to:'#button',className:'ui-effects-transfer'};        }    }$("#effect").effect(selectedEffect,options,500,callback);}function callback(){ setTimeout(function(){   $("#effect").removeAttr("style").hide().fadeIn();  },1000);}

8.hide

改写了原来的hide方法，增加了一些幻灯片效果

  $("effect").hide(selectedEffect,options,100,callback):

9.removeClass

10.position

drag的定位版

11.resizable

可以放大缩小div的插件

  $("#resizable").resizable(function(){    containment:'#container' })

12.selectable

option的图文版，应该会比较常用

$("#selectable").selectable({   stop:function(){        var result = $("select-result").empty();        $(".ui-select",this).each(function(){          var index = $("#selectable li").index(this);        result.append(" #"+(index+1) );    }});

13.show

jquery中show函数的增强版，和hide函数参数同

14.sortable

支持排序，鼠标拖拽

$("#sortable1,#sortable2").sortable().disableSelection();var $tabs = $("tabs").tabs();var $tab_items = $("ul:first li",$tabs).droppable({   accept:'.connectSortable li' ,   hoverClass:'ui-state-hover',   drop:function(event,ui){     var $item = $(this);     var $list = $($item.find('a').attr("href")).find('.connectSortable');     ul,draggable.hide('slow',function(){        $tabs.tabs("select",$tab_items.index($item));        $(this).appendTo($list).show('slow');       }     }   });

15.switchClass

和addClass，removeClass功能点同。

$(".newClass").switchClass("newClass","anotherNewClass",1000); 

16.troggle

17.troggleClass

$("#resizable").resizable(function(){

    containment:'#container'

 })