jquery 插件（七） jquery UI(2)

最新推荐文章于 2025-05-23 07:31:20 发布

brainwkernighan

最新推荐文章于 2025-05-23 07:31:20 发布

阅读量1.1k

点赞数

文章标签： jquery ui function callback actionscript tabs

本文链接：https://blog.youkuaiyun.com/brainwkernighan/article/details/6582970

版权

本文介绍了jQuery中几个常用的插件和API的使用方法，包括addClass、animate、autocomplete、button、draggable等，并展示了它们在实际场景中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'

})