您的位置：首页 > Web前端 > JQuery

jQuery对象级别的插件编写

2014-04-24 14:57 411 查看

在jQuery官网中提供了如下的插件编写标准：

;(function($){

$.fn.plugin(插件名，被调用时使用) = function(options){

var defaults = {

//各种属性、各种方法

}

var options = $.extend(defaults , options);

this.each(function(){

//要实现的功能或方法

});

      return this ;

}

})(jQuery);

案例一：隔行变色

要求：编写一个插件使得表格的偶数行显示红色，奇数行显示黄色，另外当鼠标移进去的时候当前行显示绿色，移出的时候又显示回原来的颜色。

1）首先创建一个jquery-changeColor.js文件用于编写改变表格奇偶数行的颜色，及其他功能的插件，具体实现代码如下：

// JavaScript Document

;(function($){

$.fn.changeColor = function(options){

var defaults = {

//各种属性

eventRowClass:'eventRow',

oddRowClass:'oddRow',

currentClass:'currentRow'

}

var options = $.extend(defaults,options);

this.each(function(){

//偶数行

$(this).find('tr:even').addClass(options.eventRowClass);

//奇数行

$(this).find('tr:odd').addClass(options.oddRowClass);

//当前行

$(this).find("tr").mouseover(function(){

$(this).addClass(options.currentClass);

})

$(this).find('tr').mouseout(function(){

$(this).removeClass(options.currentClass);

});

});

return this ;

}

})(jQuery);

2）创建一个用于显示表格的table.html文件，代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery插件编写</title>

<style>

table{ width:100%;border:1px solid black;}

th,tr,td{ text-align:center;}

.eventRow{ background-color:red;}

.oddRow{ background-color:yellow;}

.currentRow{ background-color:green;}

</style>

<script src="jquery1.8.2.js"></script>

<script src="jquery-changeColor.js"></script>

<script language="javascript">

$(function(){

$("#table1").changeColor();

})

</script>

</head>

<body>

<table id="table1">

      //此外省略表格行代码

    </table>

</body>

</html>

 

但是在实际开发中如果要绑定事件的话，一般都不会直接使用类似“mouseover()”或者“mouseout()”等函数，而是采用更加灵活的“bind()”函数进行绑定。

将上例中的jquery-changeColor.js中的绑定事件的代码修改为如下：

// JavaScript Document

;(function($){

$.fn.changeColor = function(options){//changeColor为被调用的函数名，

var defaults = {

//各种属性

eventRowClass:'eventRow',

oddRowClass:'oddRow',

currentClass:'currentRow',

encType1:'mouseover',

encType2:'mouseout'

}

var options = $.extend(defaults,options); //此语句是将defaults封装进options里

this.each(function(){

//偶数行

$(this).find('tr:even').addClass(options.eventRowClass);

//奇数行

$(this).find('tr:odd').addClass(options.oddRowClass);

//当前行

$(this).find('tr').bind(options.encType1,function(){

$(this).addClass(options.currentClass);

});

$(this).find('tr').bind(options.encType2,function(){

$(this).removeClass(options.currentClass);

});

});

      return this;

}

})(jQuery);

这样的话，如果当下次想要点击的时候，将当前行的颜色变为绿色的话，只需要在table.html中修改如下代码即可：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery插件编写</title>

<style>

table{ width:100%;border:1px solid black;}

th,tr,td{ text-align:center;}

.eventRow{ background-color:red;}

.oddRow{ background-color:yellow;}

.currentRow{ background-color:green;}

</style>

<script src="jquery1.8.2.js"></script>

<script src="jquery-changeColor.js"></script>

<script language="javascript">

$(function(){

$("#table1").changeColor({

encType1:'click'

});

})

</script>

</head>

<body>

<table id="table1"> 

       //此外省略表格行代码

    </table>

</body>

</html>

 

案例二：tab标签

1)首先创建一个用于显示tab标签功能的jquery-tab.js页面，具体代码如下：

// JavaScript Document

;(function($){

$.fn.tab = function(options){

var defaults = {

currentClass:'current',

tabLi:'.tab>li',

divContent:'#divContent>div',

eventType:'click'

}

var options = $.extend(defaults,options);

this.each(function(){

var _this = $(this);

_this.find(options.tabLi).bind(options.eventType,function(){ $(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);

var index = $(this).index();

_this.find(options.divContent).eq(index).show().siblings().hide();

});

});

return this;

}

})(jQuery);

2)创建一个用于显示tab标签的tab.html页面，具体实现代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{margin:0; padding:0;}

body{ margin:50px;}

.tab{ list-style:none;}

.tab li{ float:left; width:150px; height:26px; line-height:26px; text-align:center; margin-left:3px; border-bottom:none; border:1px solid blue;}

.tab li.current{ background-color:blue; font-weight:bold; cursor:pointer;}

#divContent{ clear:both;}

#divContent div{ width:500px; display:none; height:200px; border:1px solid blue;}

</style>

<script src="jquery1.8.2.js"></script>

<script src="jquery-tab.js"></script>

<script>

$(function(){

$('#div').tab();

});

</script>

</head>

<body>

<div id="div">

<ul class="tab">

     <li class="current">html</li>

        <li>css</li>

        <li>javascript</li>

    </ul>

    <div id="divContent">

        <div style="display:block">html</div>

        <div>css</div>

        <div>javascript</div>

    </div>

</div>

</body>

</html>

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航