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

随机推荐

WinForm-SQL查询避免UI卡死
使用委托,呵呵. Func<List<VM>> act = () => { SqlDataReader reader = DBHelper.ExecuteReader(s ...
OpenGL投影矩阵【转】
OpenGL投影矩阵概述透视投影正交投影概述计算机显示器是一个2D平面.OpenGL渲染的3D场景必须以2D图像方式投影到计算机屏幕上.GL_PROJECTION矩阵用于该投影变换.首先,它 ...
Uncaught SyntaxError: Invalid Unicode escape sequence异常处理
今天碰到一个问题,页面报错:Uncaught SyntaxError: Invalid Unicode escape sequence ,{index:'operate',name:'operate' ...
[ACM] POJ 1035 Spell checker (单词查找，删除替换添加不论什么一个字母）
Spell checker Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 18693 Accepted: 6844 De ...
.Net程序测试使用阿里云OCS开放缓存服务
首先需要有一个阿里的OCS实例和ECS云服务器请确认这两个是在同一个可用区的,这个很重要! 这两个可以在阿里云官网申请得到拿到OCS之后进入OCS控制台,点击下面的客户端下载选择.Net客 ...
linux下c,c++头文件的路径
一. C语言包含的目录: 二. C++包含的目录
PHP防止sql注入-JS注入
一:为了网站数据安全,所有和数据库操作的相关参数必须做相关过滤,防止注入引起的网站中毒和数据泄漏 1.PHP自带效验函数 mysql_real_escape_string() 函数转义 SQL 语句中 ...
Loadrunner 工作原理图
1.LoadRunner的总体架构图,从图中可以看出组件VUGen, Controller和Analysis之间的关系. 2.LoadRunner的工作原理,从图中可以看出如何利用LoadRunner ...
不是书评：《我是一只IT小小鸟》
本文转自刘未鹏博客,写的非常的好就转回来了设计你自己的进度条进度条的设计是一个很多人都知道的故事:同样的耗时,如果不给任何进度提示,只是在完成之后才弹出一个完成消息,中间没有任何动态变化,那么 ...
TCP/IP 网络编程（五）
优于 select 的 epoll (I/O 复用) select 速度慢的原因调用select后针对全部文件描写叙述符的循环每次调用函数时都须要向该函数传递监视对象信息 select并非把发生变 ...

js自己定义插件-选项卡

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

随机推荐

热门专题