jquery 簡單圖片導(dǎo)航插件jquery.imgNav.js
熟悉jquery的家伙大概花個5到10分鐘就可以搞定了吧。由于這種導(dǎo) 航效果比較通用,LEVIN順手寫了個 jquery插件~
如果你的網(wǎng)站也需要類似的效果,大可拿去直接用或者擴(kuò)展下:)
如果你也想嘗試將某些可重用功能封 裝成jquery插件,別忘了看看一般的jquery插件開發(fā)過程,另外還有偶的一個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)淡入淡出二級下拉導(dǎo)航菜單的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)淡入淡出二級下拉導(dǎo)航菜單的方法,涉及jquery簡單操作頁面元素展開與隱藏的實(shí)現(xiàn)技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-08-08jquery,js簡單實(shí)現(xiàn)類似Angular.js雙向綁定
本文主要介紹了jquery,js簡單實(shí)現(xiàn)類似Angular.js雙向綁定的方法。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01jquery ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06基于pthread_create,readlink,getpid等函數(shù)的學(xué)習(xí)與總結(jié)
以下是對pthread_create,readlink,getpid等函數(shù)的用法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以參考下2013-07-07jquery創(chuàng)建并行對象或者合并對象的實(shí)現(xiàn)代碼
如果有對象A ,B 現(xiàn)在我想要合并成對象C 從C里面可以找到A , B 及其子對象 怎么做2012-10-10jQuery插件ContextMenu自定義圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了jQuery插件ContextMenu自定義圖標(biāo)的相關(guān)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03