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

随机推荐

/etc/fstab 官方文档
1什么是fstab 2fstab文件示例 3fstab 文件组成 4文件系统标识 4.1Kernel naming 4.2UUID 4.3Label 5建议 5.1atime 参数 5.2tmpfs ...
【Linux】Centos7安装之后，双系统的情况下，怎么能在CentOS7下访问Windows的磁盘
想要在CentOS7下访问Windows的NTFS格式的磁盘,需要在Linux下下载ntfs-3g步骤1: 进入root用户下,使用yum命令下载ntfs-3g.[前提是已经添加了常用源:http:/ ...
log4j教程 5、示例程序
前面我们已经看到了如何创建一个配置文件.本教程将讲解如何生成调试信息和日志在一个简单的文本文件. 下面是我们的例子中创建了一个简单的配置文件.这里再重复一次: 下载最新的Log4j库:http://l ...
[SCSS] Create a gradient with a Sass loop
In this lesson, you will learn how to iteratively generate CSS selectors and attributes using Sass l ...
EffectiveJava（12）考虑实现Comparable接口
考虑实现Comparable接口 compareTo方法 Comparable接口的唯一方法,允许进行简单的等同性比较,允许执行顺序比较 Comparable接口被所有值类实现.所以如果一个值类有非常 ...
left menu
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
一扫天下——ZXing使用全解析
一扫天下--ZXing使用全解析二维码如今已经烂App了,无论什么App.没有二维码就好像低人一等了. 所以,在自己的项目中集成二维码功能还是非常有必要的. 网上非常多都是基于ZXing2.3的.可 ...
Odoo12 重大改变
Table of Contents 重构的功能 ORM 数据导入库存库存规则 MRP 多步路线新功能 IoT Odoo12 预计 2018/10 在 Odoo experience 20 ...
使用Cocos studio创建一个简单的project
前不久我接到了一个项目,项目要求使用Cocos2d-X的最新版本号,Cocos2d-X3.4.对于一直在陶醉在Cocos2d-X2.2.3的世界中的我开说,使用Cocos2d-X3.4忽然认为有点不适 ...
Android 热修复使用Gradle Plugin1.5改造Nuwa插件
随着谷歌的Gradle插件版本号的不断升级,Gradle插件如今最新的已经到了2.1.0-beta1,相应的依赖为com.android.tools.build:gradle:2.0.0-beta6, ...

js自己定义插件-选项卡

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

随机推荐

热门专题