jQuery常用插件

Posted Beyondづ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery常用插件相关的知识,希望对你有一定的参考价值。


jQuery UI插件简介:

  jQuery UI是以 jQuery 为基础的开源 javascript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。

jQuery UI 常用插件:

  1.dialog插件

  2.tabs插件

   3.menu插件

  4.autocomplete插件

  5.lazyload插件:


 基本步骤:

  (1).将需要的jquery插件及样式文件加入工程。

  (2).在页面引入jquery插件及样式文件。

1.dialog插件

  引入jquery插件及样式: 

<script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>

    body代码:

<body>
	<button id="openbut" onclick="$(\'#dlg\').dialog(\'open\')">打开窗口</button>

	<div id="dlg" title="用户登录">
		用户名<br/>
		<input type="text"><br/>
		密码<br/>
		<input type="text"><br/>		
	</div>
  </body>

  js样式操作:

  <script type="text/javascript">	
  	$(function(){
  		$(\'#dlg\').dialog({
  		//设置成false,代表不自动打开
  			autoOpen:false,
  			//按钮的设置
  			buttons:{
  			\'关闭\':function(){
  				$(\'#dlg\').dialog(\'close\');
  			}
  			},
  			modal:true,
  			//出
  			show:{
  			effect:\'blind\', //特效样式
  			duration:2000
  			},
  			//收
  			hide:{
  			effect:\'explode\',
  			duration:2000
  			}
  		});
  	}); 
  </script>

   运行效果:

常用参数:


 2.tabs插件

  body标签里:

<body>
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Tabs1</a>
			</li>
			<li><a href="#tabs-2">Tabs2</a>
			</li>
			<li><a href="#tabs-3">Tabs3</a>
			</li>
		</ul>
		<div id="tabs-1">
			<p>content of tab one</p>
		</div>
		<div id="tabs-2">
			<p>content of tab two</p>
		</div>
		<div id="tabs-3">
			<p>content of tab three</p>
		</div>
	</div>
</body<script type="text/javascript">
	$(function() {
		$(\'#tabs\').tabs({
			//设置该组件的折叠状态。默认值为false,即不可折叠
			collapsible:false,
			//Boolean类型值:设置该参数值为false,所有选项卡将会被折叠。必须设置collapsible 参数为true
    		     //Integer类型值:正整数表示下标从0开始的选项卡位置;负整数表示从最后一个开始倒数的选项卡位置
			active:1,
			//设置切换选项卡的触发事件。默认值为“click”,即点击选项卡时触发切换
			event:\'hover\'
		});
	});
</script>

常用属性:

 常用事件及方法:


 3.menu插件:

<script type="text/javascript">
    	$(function () {  
        	$("#menu").menu({
        	//获得焦点时触发
        	focus:function(){
        	   //背景颜色
        		$(this).css("background","pink");
        	}
        
        	//设置菜单不可用
        	//disabled:true
        	});  
     	});	
    </script>
  	<style>
    	.ui-menu{ width: 150px; }
 	</style>
  
   </head>
  <body>
    <ul id="menu">  
            <li><a href="#">小明一中</a>  
                <ul>  
                    <li><a href="#">高中部</a>  
                        <ul>  
                            <li><a href="#">高一(1)班</a></li>  
                            <li><a href="#">高一(2)班</a></li>  
                            <li><a href="#">高一(3)班</a>  
                                <ul>  
                                    <li><a href="#">小胡</a></li>  
                                    <li><a href="#">小李</a></li>  
                                    <li><a href="#">小陈</a></li>  
                                </ul>  
                            </li>  
                        </ul>  
                    </li>  
                    <li><a href="#">初中部</a>  
                        <ul>  
                            <li><a href="#">初一(1)班</a></li>  
                            <li><a href="#">初一(2)班</a></li>  
                            <li><a href="#">初一(3)班</a></li>  
                        </ul>  
                    </li>  
                    <li><a href="#">教研部</a></li>  
                </ul>  
            </li>  
            <li><a href="#">大明二中</a></li>  
        </ul>  
  </body>

运行效果图: 

 


 autocomplete插件:

<script type="text/javascript">
	//json
	$(function() {
		var source = [ {
			"label" : "aa",
			"value" : "123"
		}, {
			"label" : "aaa",
			"value" : "456"
		}, {
			"label" : "bb",
			"value" : "789"
		}
		];
		//var source=["accp","apple","blue","bus"];
		$("#tags").autocomplete({
			source : source,
			//自动选择第一项
            autoFocus:true,
            
            //列表任意一项获得焦点时触发
            focus:function(){
            	alert("1");
			}
		}); 
	});
</script>
</head>

<body>
	<input id="tags">
</body>
</html>

显示效果,搜索引擎进行自动装配。  


 lazyload插件:

<script type="text/javascript">
		$(function(){
			$(".lazy").lazyload({
			effect:"fadeIn",
			effectspeed:2000,
			//距离下一张图片还有100像素时
			threshold:100
			});
		});
	</script>
	
  </head>
  <body>
  	 <!-- 把 <img> 标签中的 src 属性改为等待图片的URL, data-original 属性填上真正的图片URL. --> 
	 <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
	 <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
	 <img class="lazy" src="../img/white.gif" data-original="../img/viper_1.jpg" width="765" height="574" alt="Viper 1">
	 <img class="lazy" src="../img/white.gif" data-original="../img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
	 <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
	 <img class="lazy" src="../img/white.gif" data-original="../img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">

  </body>

延迟加载减少不必要的资源浪费,提高性能。


 

有所作为是生活的最高境界。 —— 恩格斯

 

以上是关于jQuery常用插件的主要内容,如果未能解决你的问题,请参考以下文章

Visual Studio Code 常用插件整理

常用Javascript代码片段集锦

25个可遇不可求的jQuery插件

几个非常实用的JQuery代码片段

jQuery常用插件

Java技术jQuery自定义插件开发实践