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

随机推荐

Markdown中超链接增加_blank的方法
很遗憾,无法在语法上实现,只能通过额外的的JS代码实现,比如: var links = document.links; for (var i = 0; i < links.length; i++ ...
Ubuntu 16.04/CentOS 6.9安装Apache压力（并发）测试工具ab
说明: ab工具已经在Apache中包含,如果不想安装Apache,那么可以使用下面方法单独安装. 安装: Ubuntu: sudo apt-get install apache2-utils Cen ...
SONY的几款秋季新品都还是很不错的
年末的最后几个月,貌似SONY一口气发布你好几款新品,感觉都非常不错,貌似好久没有见到SONY这样的大批这么对胃口的产品了,这里简单的列举一下: 混合单元动铁动圈耳机XBA-H3 虽然动铁动圈混合式设 ...
内存或磁盘空间不足，Microsoft Office Excel 无法再次打开或保存任何文档。 [问题点数：20分，结帖人wenyang2004]
在环境里是没有问题的就是发布网站后,会出现“/”应用程序中的服务器错误.--------------------------------------------------------------- ...
App Distribution Guide (二)
Configuring Your Xcode Project for Distribution You can edit your project settings anytime, but som ...
JAVA常见算法题(十八)
package com.xiaowu.demo; /** * 两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人,以抽签决定比赛名单. 有人向队员打听比赛的名单:a说他不和x比 ...
DELLR720服务器更换硬盘，启动系统报错：there are offline or missing virtual drivers with preserved cache
linux系统启动过程中给出错误: There are offline or missing virtual drives with preserved cache. Please check the ...
DirectX 11游戏编程学习笔记之6: 第5章The Rendering Pipeline(渲染管线)
本文由哈利_蜘蛛侠原创,转载请注明出处.有问题欢迎联系2024958085@qq.com 注:我给的电子版是700多页,而实体书是800多页,所以我在提到相关概念的时候 ...
npm -D -S -g -i 以及安装技巧
繁杂:npm install webpack 简洁:npm i webpack 重复性操作: npm i webpack npm i babel-core .... 简洁性操作: npm i webp ...
Oracle基础存储过程和事务
一.事务和存储过程在存储过程中如何使用事务.当需要在存储过程中同时执行多条添加.修改.删除SQL语句时,为了保证数据完整性,我们需要使用事务.使用方式和在PL-SQL中非常相似,但也有一些区别. - ...

js自己定义插件-选项卡

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

随机推荐

热门专题