jquery tab插件制作實(shí)現(xiàn)代碼
(function($){
$.fn.tab = function(options){//$.fn后面的tab是這個(gè)插件的函數(shù)名稱??梢愿咦约合埠眠M(jìn)行修改
var defaults = {
//相關(guān)屬性設(shè)置
}
var options = $.extend(defaults, options);
this.each(function(){
//實(shí)現(xiàn)的功能設(shè)置 });
};
})(jQuery);
我這里是做一個(gè)tab的插件,我來(lái)完善以上代碼
(function($){
$.fn.tab = function(options){
var defaults = {
eventname:"click",//觸發(fā)事件,click為點(diǎn)擊,mousemove為鼠標(biāo)移動(dòng)
titlekeyid:"tabtitle",//切換的ID
sedcss:"sed",//選中時(shí)的CSS
nosedcss:"nosed" //未選中時(shí)的CSS
}
var options = $.extend(defaults, options);
this.each(function(){
var tab=$(this);
//綁定事件
$(tab).find("li").bind(options.eventname,function(){
$("#"+options.titlekeyid).find("li").attr("class", options.nosedcss);
$(this).attr("class", options.sedcss);
$("#"+options.titlekeyid+"info").find("div").css("display", "none");
$("#"+$(this).attr("id")+"info").css("display", "block");
//個(gè)人JS能力還是有限,感覺(jué)代碼寫的不好
});
});
};
})(jQuery);
我想大家都用過(guò)一些jquery插件,我這里看下插件使用時(shí)的代碼:
(代碼二)
<script type="text/javascript">
$().ready(function(){
$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"});
})
</script>
結(jié)合以上兩段代碼進(jìn)行說(shuō)明
$("#tabtitle")表示你要使用在哪個(gè)地方,稍微了解jquery的童鞋都知道是什么意思了,不多介紹了,
.tab 就是這個(gè)插件我們定義的函數(shù)名了,對(duì)照(代碼一)中的$.fn.tab中的tab。
.tab({eventname:"mousemove",sedcss:"sed"}); 中eventname和sedcss就是(代碼一)var defaults ={};中定義的屬性值了。如果我們不需要改變屬性值,那么我們就使用默認(rèn)的屬性值,那么插件就應(yīng)該這樣使用
<script type="text/javascript">
$().ready(function(){
$("#tabtitle").tab();
})
</script>
最后附上全部的頁(yè)面代碼:
<html>
<head>
<title>tab test</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="jquery.joyleetab.js">
</script>
<script type="text/javascript">
$().ready(function(){
$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"});
})
</script>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="tabtitle">//這里的ID對(duì)應(yīng)$("#tabtitle")中的ID,LI的ID分別是尾部添加數(shù)字
<li id="tabtitle1" class="sed">asdfasfd</li>
<li id="tabtitle2">asdfasfd</li>
<li id="tabtitle3">asdfasfd</li>
<li id="tabtitle4">asdfasfd</li>
<li id="tabtitle5">asdfasfd</li>
</ul>
<div id="tabtitleinfo">//這里的ID對(duì)ul中的ID,ID分別是尾部添加數(shù)字和"info"
<div id="tabtitle1info" >000000</div>
<div id="tabtitle2info" style=" display:none">111111</div>
<div id="tabtitle3info" style=" display:none">22222</div>
<div id="tabtitle4info" style=" display:none">33333</div>
<div id="tabtitle5info" style=" display:none">44444</div>
</div>
</body>
</html>
此文重點(diǎn)在說(shuō)明jquery插件的制作方法,示例中代碼還有要優(yōu)化的地方,請(qǐng)見(jiàn)諒
源碼打包下載
- 強(qiáng)烈推薦240多個(gè)jQuery插件提供下載
- 跟我一起學(xué)寫jQuery插件開(kāi)發(fā)方法(附完整實(shí)例及下載)
- 分享20多個(gè)很棒的jQuery 文件上傳插件或教程
- jquery插件制作 手風(fēng)琴Panel效果實(shí)現(xiàn)
- jquery插件制作 圖片走廊 gallery
- jquery插件制作 表單驗(yàn)證實(shí)現(xiàn)代碼
- 一個(gè)簡(jiǎn)單的jQuery插件制作 學(xué)習(xí)過(guò)程及實(shí)例
- 一步一步制作jquery插件Tabs實(shí)現(xiàn)過(guò)程
- jquery插件制作 提示框插件實(shí)現(xiàn)代碼
- jQuery焦點(diǎn)圖切換簡(jiǎn)易插件制作過(guò)程全紀(jì)錄
- 基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
- jquery插件制作 自增長(zhǎng)輸入框?qū)崿F(xiàn)代碼
- jquery插件格式實(shí)例分析
相關(guān)文章
一個(gè)小例子解釋如何來(lái)阻止Jquery事件冒泡
事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播,從里到外,直至它被處理(父級(jí)對(duì)象所有同類事件都將被激活),或者它到達(dá)了對(duì)象層次的最頂層2014-07-07jQuery ui實(shí)現(xiàn)動(dòng)感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery ui實(shí)現(xiàn)動(dòng)感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼,涉及jquery插件構(gòu)造圓角圖形及頁(yè)面過(guò)度效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08關(guān)于echarts在節(jié)點(diǎn)顯示動(dòng)態(tài)數(shù)據(jù)及添加提示文本所遇到的問(wèn)題
這篇文章主要介紹了關(guān)于echarts在節(jié)點(diǎn)顯示動(dòng)態(tài)數(shù)據(jù)及添加提示文本所遇到的問(wèn)題,需要的朋友可以參考下2018-04-04跟著JQuery API學(xué)Jquery 之二 屬性
在選擇器的API學(xué)習(xí)中,走馬觀花的把選擇器過(guò)了一遍,但是選擇歸選擇,選擇出來(lái)了沒(méi)干什么事,也沒(méi)有什么用嘛2010-04-04jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開(kāi)隱藏效果
本文為大家介紹下使用jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示,離開(kāi)就隱藏的效果,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07jquery+ajax+text文本框?qū)崿F(xiàn)智能提示完整實(shí)例
這篇文章主要介紹了jquery+ajax+text文本框?qū)崿F(xiàn)智能提示的方法,涉及jQuery基于ajax交互實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的動(dòng)態(tài)查詢與文本提示信息的顯示功能,需要的朋友可以參考下2016-07-07jQuery中checkbox反復(fù)調(diào)用attr(''checked'', true/false)只有第一次生效的解決方法
這篇文章主要介紹了jQuery中checkbox反復(fù)調(diào)用attr('checked', true/false)只有第一次生效的解決方法,通過(guò)使用prop方法代替attr方法來(lái)解決此問(wèn)題,需要的朋友可以參考下2016-11-11基于jquery css3實(shí)現(xiàn)點(diǎn)擊動(dòng)畫彈出表單源碼特效
這篇文章主要介紹了基于jquery css3實(shí)現(xiàn)點(diǎn)擊動(dòng)畫彈出表單,彈出的表單沒(méi)有任何遮蓋層,在web前端程序開(kāi)發(fā)中經(jīng)常會(huì)用到,需要的朋友可以參考下2015-08-08