js自己定义插件-选项卡
生活随笔
收集整理的這篇文章主要介紹了
js自己定义插件-选项卡
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
該功能比較簡單。鞏固一下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);轉載于:https://www.cnblogs.com/wzzkaifa/p/6814954.html
總結
以上是生活随笔為你收集整理的js自己定义插件-选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。
