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).可是也有例外,比方我.仅仅需负责 ...

随机推荐

自己写Tiny6410的Bootloader总结！
1.由于Tiny6410 2G版的Nand flash(K9GAG08U0E)的页大小是8K的,但是s3c6410芯片设置为nand flash启动时先从nand flash复制8K代码到片内内存中去 ...
【SQL】在SQL Server中多表关联查询问题
好久没有写SQL语句的多表连接查询,总在用框架进行持久化操作.今天写了一个多表关联查询,想根据两个字段唯一确定一条数据失败的案例如下: SELECT cyb.id,ad.name FROM [Gen ...
SpringBoot 框架整合webservice
spring boot集成web service框架题记: 本篇博客讲的spring boot如何集成 spring web service,如果您想用Apache CXF集成,那么可能不适合您.为 ...
装饰者模式对HttpServletRequest进行增强
package cn.web.servlet; import java.io.UnsupportedEncodingException; import javax.servlet.http.HttpS ...
[PWA] Show an Error when a POST or DELETE Fails in an Offline PWA
We're storing JSON data in the cache - but that only applies to HTTP GET requests - and not to POST ...
PS如何精确设置参考线，标尺，辅助线
如图所示,我要均分画布的垂直方向为三份.因为要图标的三个位置文件吻合的很精确.我们先拉好头尾两条辅助线在标尺上右击可以切换显示的单位,但是还是不够精确.因为这个画布是64×192的.我要64×64给 ...
python 道生一，一生二，二生三，三生万物
千万不要被所谓“元类是99%的python程序员不会用到的特性”这类的说辞吓住.因为每个中国人,都是天生的元类使用者学懂元类,你只需要知道两句话: 道生一,一生二,二生三,三生万物我是谁?我从哪来 ...
js中数组的合并和对象的合并
1 数组合并 1.1 concat 方法 var a = [1,2,3], b = [4,5,6]; var c = a.concat(b); console.log(c);// 1,2,3,4,5, ...
【VBA】复制单元格数据有效性
单元格内设置了有效性,通过VBA怎么去复制呢?代码如下: Public Sub 复制单元格批注() Dim range1 As range Dim range2 As range '清除G列 Colu ...
session的两个小案例
学完了session,写两个小案例加深一下对session的巩固. 1. 用户登陆案例登陆html页面提交后,将参数带给处理登陆的servlet,该servlet将获得登陆的用户名和密码,并将这些信 ...

js自己定义插件-选项卡

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

随机推荐

热门专题