您的位置：首页 > 其它

插件

2015-11-28 16:50 148 查看

引入插件几个步骤：

必须先引入jquery.js文件，而且在所有插件之前引入

引入插件

引入插件的周边，例如皮肤、中文包等

一、验证插件

Validate.js是验证插件，这个插件有两个js文件，一个是主文件，一个是中文包文件，使用时可以使用min版本

只要通过form元素的jquery对象调用
validate()方法，就可以实现一些简单的校验功能：

$('form').validate();

必填项：在表单设计class=”required”

不得小于两位：在表单设置minlength=”2”

电子邮件：在表单设置class=”email”

网址：在表单设置class=”url”

二、自动完成插件：当用户输入部分字符时，智能的搜索

jquery-migrate-1.2.1.js
三、自定义插

   基本要点：

插件名推荐使用jquery.[插件名].js,以避免和其他库相冲突

局部对象附加jquery.fn对象上，全局对象附加在jquery上

插件内部，this指向是当前的局部对象

可以通过this.each来遍历所有元素

所有的方法或插件，必须用分号结尾，避免出现问题。

插件返回的应该是jquery对象，以保证可链式连缀

避免插件内部使用$,如果要使用，请传递jquery进去

Index.html

<!DOCTYPE
html>

<html>

<head>

   <title>导航</title>

   <meta
http-equiv="keywords"
content="keyword1,keyword2,keyword3">

   <meta
http-equiv="description"
content="this is my page">

   <meta
http-equiv="content-type"
content="text/html; charset=UTF-8">

<link
rel="stylesheet"type="text/css"
href="js/style.css">

<script
type="text/javascript"src="js/jquery-1.11.3.js"></script>

<script
type="text/javascript"src="js/demo.js"></script>

<script
type="text/javascript"src="js/jquery.nav.js"></script>

</head>

<body>

<ul
class="list">

<li>导航列表

<ul
class="nav">

<li>导航列表1</li>

<li>导航列表1</li>

<li>导航列表1</li>

<li>导航列表1</li>

<li>导航列表1</li>

<li>导航列表1</li>

</ul>

</li>

<li>导航列表

<ul
class="nav">

<li>导航列表2</li>

<li>导航列表2</li>

<li>导航列表2</li>

<li>导航列表2</li>

<li>导航列表2</li>

<li>导航列表2</li>

</ul>

</li>

</ul>

   </body>

</html>

Demo.js

$(function(){


$.nav('red');

});

Jquery.nav.js:

;(function($){


//全局


$.extend({


'nav':function(color){


$('.nav').css({


'list-style':'none',


'margin':0,


'padding':0,


'display':'none',


    'color':color


});


$('.nav').parent().hover(function(){


$(this).find('.nav').slideDown('normal');


},function(){


   $(this).find('.nav').stop().slideUp('normal');


});


}


});

})(jQuery);

Style.css

.list{


list-style:none;


margin:
:0;


padding:0;


font-size:
13px;


color:
#fff;


width:500px;


margin:
50px
auto;

}

.list
li{


float:left;


width:
100px;


height:30px;


background:
#333;


line-height:
30px;


text-align:
center;


cursor:
pointer;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航