正文
js自己定义插件-选项卡
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
该功能比較简单。巩固一下jquery插件写法，注意引入的jquery.js 、 自己定义插件路径代码例如以下：
页面：
<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<style type="text/css">
*{margin:0;padding:0;border:0;}
.banner{width:600px;height:144px;margin:70px 150px;display:inline-block;}
.banner .b_nav li{list-style:none;height:40px;width:199px;line-height:40px;text-align:center;float:left;background:#ccc;margin:0 1px 2px 0;border-radius:10px;box-shadow:3px 3px 8px #188eee;}
.banner .b_nav .navsel{color:#fff;background:#188eee;}
.banner .b_content{width:600px;height:200px;border:1px solid red;}
.banner .b_content a{
display:none;width:600px;height:200px;
}
.banner .b_content .first{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 20%, transparent 50%, transparent);
box-shadow: 1px 1px 20px green;
background-size: 117px 36px;
}
.banner .b_content .second{
background-color: #159;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 20%, transparent 50%, transparent);
box-shadow: 1px 1px 20px green;
background-size: 117px 36px;
}
.banner .b_content .thrid{
background-color: green;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 20%, transparent 50%, transparent);
box-shadow: 1px 1px 20px green;
background-size: 117px 36px;
}
.banner .b_content .consel{display:block;}
</style> </head>
<body>
<div class="banner">
<ul class="b_nav">
<li class="tiggerClass navsel">选项1</li>
<li class="tiggerClass">选项2</li>
<li class="tiggerClass">选项3</li>
</ul>
<div class="b_content">
<a class="linkClass first consel" href="javascript:void(0);"></a>
<a class="linkClass second" href="javascript:void(0);"></a>
<a class="linkClass thrid" href="javascript:void(0);"></a>
</div>
</div> <div class="banner">
<ul class="b_nav">
<li class="tiggerClass navsel">选项1</li>
<li class="tiggerClass">选项2</li>
<li class="tiggerClass">选项3</li>
</ul>
<div class="b_content">
<a class="linkClass first consel" href="javascript:void(0);"></a>
<a class="linkClass second" href="javascript:void(0);"></a>
<a class="linkClass thrid" href="javascript:void(0);"></a>
</div>
</div> <div class="banner">
<ul class="b_nav">
<li class="tiggerClass navsel">选项1</li>
<li class="tiggerClass">选项2</li>
<li class="tiggerClass">选项3</li>
</ul>
<div class="b_content">
<a class="linkClass first consel" href="javascript:void(0);"></a>
<a class="linkClass second" href="javascript:void(0);"></a>
<a class="linkClass thrid" href="javascript:void(0);"></a>
</div>
</div> </body> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="option_select.js"></script>
<script type="text/javascript">
$(function(){
$('div.banner').optionChange({
event:'mouseover',
triggerSelectCss:'navsel',
linkSelectCss:'consel'
});
});
</script>
</html>
自己定义插件：
该插件遵循固定模板：
如
;(function($){
/**入口函数**/
$.fn.optionChange = function(opts){
};
/**插件内部逻辑函数**/
$.fn.optionChange.methods = {
};
/**默认參数块**/
$.fn.optionChange.defaults = {
};
/**属性參数**/
$.fn.optionChange.parseOptions = function(target){
};
})(jQuery);
;(function($){
/**入口函数**/
$.fn.optionChange = function(opts){
this.each(function(){
opts.currObj = $(this);
opts = $.extend({},$.fn.optionChange.defaults,opts,$.fn.optionChange.parseOptions);
var tobjlen = opts.currObj.find('.'+opts.triggerObjClass).length;
var lobjlen = opts.currObj.find('.'+opts.linkObjClass).length;
if(tobjlen && lobjlen && tobjlen === lobjlen){
$.fn.optionChange.methods.init(opts);
}
});
};
/**插件内部逻辑函数**/
$.fn.optionChange.methods = {
init:function(opts){
var event = opts.event;
var triggerObjClass = opts.triggerObjClass;
var linkObjClass = opts.linkObjClass;
var currObj = opts.currObj;
var linkSelectFn = opts.linkSelectFn;
currObj.find('.'+triggerObjClass).on(event,function(){
$this = $(this);
$this.addClass(opts.triggerSelectCss).siblings().removeClass(opts.triggerSelectCss);
var _linkObj = currObj.find('.'+opts.linkObjClass).eq($this.index());
_linkObj.addClass(opts.linkSelectCss).siblings().removeClass(opts.linkSelectCss);
});
}
};
/**默认參数块**/
$.fn.optionChange.defaults = {
event:'',
triggerObjClass:'tiggerClass',
triggerSelectCss:'',
linkObjClass:'linkClass',
linkSelectCss:'',
currObj:{}
};
/**属性參数 该功能用不到属性參数 故返回空对象**/
$.fn.optionChange.parseOptions = function(target){
return {};
};
})(jQuery);
若须要了解属性參数什么含义请阅读 ：http://blog.csdn.net/pleasurehappy/article/details/46399855
