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

js自己定义插件-选项卡的更多相关文章

jQuery上定义插件并重设插件构造函数
插件alert的全部代码,每个插件都定义在如下类似的作用域中: +function ($) { 'use strict'; // ALERT CLASS DEFINITION // ========= ...
Js与flash交互：在html页面中用js与MyReport插件交互
Html页面与flash的加载如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...
原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
vue.js国际化vue-i18n插件的使用问题，在模版文本、组件方法、jsf方法里的使用
vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...
JS鼠标滚动插件scrollpath使用介绍
JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...
phonegap(cordova) 自己定义插件代码篇（五）----android ,iOS 集成微信登陆
统一登陆还是非常有必要的,安全,放心.代码 /*cordov 微信自己定义插件*/ (function (cordova) { var define = cordova.define; define( ...
一步一步实现JS拖拽插件
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...
openstack页面自己定义插件使用具体解释（django、ajax、post）（zTree为例）
感谢朋友支持本博客,欢迎共同探讨交流.因为能力和时间有限,错误之处在所难免,欢迎指正! 如有转载.请保留源作者博客信息. Better Me的博客:blog.csdn.net/tantexian 如需 ...
Android Cordova 插件开发之编写自己定义插件
前言本文适合Android+web的复合型人才,由于cordova本身就是混合开发,所以在Android开发的基础上,还要懂web相关技术(HTML+CSS+JS).可是也有例外,比方我.仅仅需负责 ...

随机推荐

前端JavaScript实现跨域的方式（转）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
LRC CRC 纵向冗余码校验
LRC CRC 纵向冗余码校验 2010-01-26 11:00:15| 分类: 电气 | 标签: |字号大中小订阅 1.LRC校验 LRC域是一个包含一个8位二进制值的字节.LRC值由 ...
idea设置断点，对于for循环，到指定次数时停止
断点处右键参考:https://www.w3cschool.cn/intellij_idea_doc/intellij_idea_doc-hn272f6k.html https://www.w3cs ...
iOS:UICollectionView纯自定义的布局:瀑布流布局
创建瀑布流有三种方式: 第一种方式:在一个ScrollView里面放入三个单元格高度一样的tableView,禁止tableView滚动,只需让tableView随着ScrollView滚动即可. ...
Java反射学习总结五（Annotation(注解)-基础篇）
Annotation(注解)简单介绍: 注解大家印象最深刻的可能就是JUnit做单元測试,和各种框架里的使用了. 本文主要简介一下注解的用法,下篇文章再深入的研究. annotation并不直接影响代 ...
Elasticsearch 的 Update更新
Update更新操作允许ES获得某个指定的文档,可以通过脚本等操作对该文档进行更新.可以把它看成是先删除再索引的原子操作,只是省略了返回的过程,这样即节省了来回传输的网络流量,也避免了中间时间造成的文 ...
倍福TwinCAT(贝福Beckhoff)基础教程2.2 TwinCAT常见类型使用和转换_字符串
一般声明字符串都会加一个长度的限制,比如A:STRING(80);至于真实的字符串长度不要超过这个限制即可在测试中,我演示了两个字符串的方法,CONCAT字符串拼接和REPLACE字符串替换.拼 ...
微信公众号 - js传入时间戳换算（以前几天、几小时...）
// 获取当前时间戳 function timestamps() { return Math.round(new Date().getTime() / 1000).toString() } // 距离 ...
Laravel一些功能的简单总结
一.事件/广播 1.命令(事件在目录Events中, 监听器在Listeners中)artisan make:event 或 artisan event:generate前者创建一个事件,后者根据pr ...
[转]php-fpm配置具体解释
[转]php-fpm配置具体解释 php-fpm具体解释原文链接:http://php-fpm.anight.org/wiki:http://www.php-fpm.com/翻译:http://sy ...

js自己定义插件-选项卡

js自己定义插件-选项卡的更多相关文章

随机推荐

热门专题