jquery 簡(jiǎn)單圖片導(dǎo)航插件jquery.imgNav.js
熟悉jquery的家伙大概花個(gè)5到10分鐘就可以搞定了吧。由于這種導(dǎo) 航效果比較通用,LEVIN順手寫(xiě)了個(gè) jquery插件~
如果你的網(wǎng)站也需要類(lèi)似的效果,大可拿去直接用或者擴(kuò)展下:)
如果你也想嘗試將某些可重用功能封 裝成jquery插件,別忘了看看一般的jquery插件開(kāi)發(fā)過(guò)程,另外還有偶的一個(gè)jquery插件模板。
;(function($) {
// Private functions.
var p = {};
p.showC = function(opts) {
///<summary>show content of a specified navigation</summary>
p._clist.hide().filter(opts.filter).show();
}; //showNav
p.onNav = function(evt) {
p._i=$(this);
p._alist.removeClass(p._opts.on);
p._i.addClass(p._opts.on);
p.showC({ filter:p._i.attr("href") });
return false;
}; //onClick
//main plugin body
$.fn.imgNav = function(options) {
// Set the options.
options = $.extend({}, $.fn.imgNav.defaults, options);
p._opts = options;
// Go through the matched elements and return the jQuery object.
return this.each(function() {
p._alist = $("a", this);
p._clist = $(p._opts.navc);
p._alist.click(p.onNav);
});
};
// Public defaults.
$.fn.imgNav.defaults = {
on: 'on',
off: 'off',
navc: '.navc'//nav content selector
};
})(jQuery);
相關(guān)文章
jQuery實(shí)現(xiàn)淡入淡出二級(jí)下拉導(dǎo)航菜單的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)淡入淡出二級(jí)下拉導(dǎo)航菜單的方法,涉及jquery簡(jiǎn)單操作頁(yè)面元素展開(kāi)與隱藏的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08jquery屬性選擇器not has怎么寫(xiě) 行懸停高亮顯示
jquery屬性選擇器中的包含 not has怎么寫(xiě),讓一個(gè)table中沒(méi)有 提交 圖片的行懸停時(shí)都高亮,下面有個(gè)不錯(cuò)的示例,喜歡的朋友可以參考下2013-11-11jquery,js簡(jiǎn)單實(shí)現(xiàn)類(lèi)似Angular.js雙向綁定
本文主要介紹了jquery,js簡(jiǎn)單實(shí)現(xiàn)類(lèi)似Angular.js雙向綁定的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jquery ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06基于pthread_create,readlink,getpid等函數(shù)的學(xué)習(xí)與總結(jié)
以下是對(duì)pthread_create,readlink,getpid等函數(shù)的用法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以參考下2013-07-07jquery創(chuàng)建并行對(duì)象或者合并對(duì)象的實(shí)現(xiàn)代碼
如果有對(duì)象A ,B 現(xiàn)在我想要合并成對(duì)象C 從C里面可以找到A , B 及其子對(duì)象 怎么做2012-10-10jQuery插件ContextMenu自定義圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了jQuery插件ContextMenu自定義圖標(biāo)的相關(guān)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03