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).可是也有例外,比方我.仅仅需负责 ...
随机推荐
- Exception thrown in catch and finally clause
Based on reading your answer and seeing how you likely came up with it, I believe you think an " ...
- linux中grep命令
grep 是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来. grep常用用法 [root@www ~]# grep [-acinv] [--color=auto] '搜寻字 ...
- 转：android实时语音问题分析
转:http://ticktick.blog.51cto.com/823160/1746136 PigeonCall:一款Android VoIP网络电话App架构分析 2016-02-29 20:1 ...
- 如何使用CodeSmith批量生成代码
在上一篇我们已经用PowerDesigner创建好了需要的测试数据库,下面就可以开始用它完成批量代码生成的工作啦. 下面我会一步步的解释如何用CodeSmith实现预期的结果的,事先声明一下,在此只做 ...
- [Other] An Overview of Arrays and Memory
One integer takes 32bit in memory, 1 byte = 8bits, therefore one integer takes 4 bytes. Now let's as ...
- 错误：“The requested resource () is not available.”的处置
做网页过程中,某页需要以新窗方式打开另一个网页,于是url是这样写: pages/test/transw/claimer.html 但是,点链接后网页提示 The requested resource ...
- Windows / Linux 一件编译zlib库
一. 下载zlib库 : http://www.zlib.net 本文以 zlib-.tar.xz 为例 二. 解压文件得到 zlib- 文件夹,修改 zlib-/CMakeLists.txt 文 ...
- Pixhawk---fatal: Not a git repository (or any of the parent directories)
当从github.com上面下载下了Firmware后.无意中删除了Firmware文件夹下的.git文件夹,再去编译就会出现: fatal: Not a git repository (or ...
- python——type()创建类
今天我算是长知识了,我是一个python菜鸟,以前一直认为type(A)可以返回A的类型,但是不知道type还可以用于创建class,这篇经验就是介绍一下如何用type()创建一个类,以及如何设置该类 ...
- linux服务器性能检测工具nmon使用
今天介绍一款linux系统服务器性能检测的工具-nmon及nmon_analyser (生成性能报告的免费工具),亲测可用. 一.介绍 nmon 工具可以帮助在一个屏幕上显示所有重要的性能优化信息,并 ...