基于jquery的用dl模擬實(shí)現(xiàn)可自定義樣式的SELECT下拉列表(已封裝)
更新時(shí)間:2010年11月05日 14:59:30 作者:
通過dl模擬實(shí)現(xiàn)SELECT下拉列表. 其實(shí)這是項(xiàng)目中要常用到的一個(gè)效果, 于是, 在之前寫的基礎(chǔ)上封裝成了一個(gè)插件. 可自定義樣式, 可防止用戶本意劃過時(shí)觸發(fā)事件.
具體思路就不說了,比較常規(guī), 代碼中也有注釋. 使用方法也不費(fèi)話了, 就是一個(gè)簡單的全局函數(shù)封裝, 不懂的看下源碼中注釋或Google .
另外, 有興趣的朋友,可以嘗試在本插件基礎(chǔ)上改一個(gè)可輸入的下拉列表. 思路差不多,哈.
演示及代碼: 演示代碼 代碼下載
運(yùn)行代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
核心代碼:
;(function($){
$.fn.extend({
iSelect: function(options){
var iset = {
name: $('.selectitem'), //容器
select: $('.selectitem>dl'), //dl列表
dropCss: 'drop', //收藏狀態(tài)dt的樣式
shrinkCss: 'shrink', //展開狀態(tài)dt的樣式
hoverCss: 'hover', //鼠標(biāo)劃過dd時(shí)的樣式
clearTime: 100, //允許用戶快速劃過不觸發(fā)的時(shí)間(ms)
dropTime: 100, //展開時(shí)間(ms)
shrinkTime: 100 //收縮時(shí)間(ms)
}
options = options || {};
$.extend(iset, options);
var mainHeight = iset.name.height();//容器高度
var selectHeight = iset.select.height(); //dl實(shí)際高度
var curTxt = iset.select.find('dt').html(); //dt默認(rèn)html內(nèi)容
var self = null;
var hoverElem = null; //避免用戶快速劃過時(shí)觸發(fā)事件
iset.name.each(function(){
$(this).hover(function(){
self = this;
hoverElem = setTimeout(function(){
$(self).stop(true, false).animate({ //鼠標(biāo)劃過時(shí),展開dl
height: selectHeight
}, iset.dropTime);
if ($(self).find('dt').html() == curTxt) { //判斷是否有選擇下拉列表,若無則改變dt樣式
$(self).find('dt').attr('class', iset.dropCss);
}
//dd的鼠標(biāo)事件
$(self).find('dd').mouseover(function(){
$(this).addClass(iset.hoverCss).siblings().removeClass(iset.hoverCss);
}).mousedown(function(){ //鼠標(biāo)點(diǎn)擊時(shí)取值并賦給dt
$(self).find('dt').html($(this).html()).attr('class', $(this).attr('class'));
$(self).stop(true, false).animate({
height: mainHeight
}, iset.shrinkTime);
}).removeClass(iset.hoverCss);
}, iset.clearTime);
}, function(){
//鼠標(biāo)移出后觸發(fā)的事件
clearTimeout(hoverElem);
$(self).stop(true, false).animate({
height: mainHeight
}, iset.shrinkTime);
if ($(self).find('dt').html() == curTxt) {
$(self).find('dt').attr('class', iset.shrinkCss);
}
});
})
}
})
})(jQuery);
另外, 有興趣的朋友,可以嘗試在本插件基礎(chǔ)上改一個(gè)可輸入的下拉列表. 思路差不多,哈.
演示及代碼: 演示代碼 代碼下載
運(yùn)行代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
核心代碼:
復(fù)制代碼 代碼如下:
;(function($){
$.fn.extend({
iSelect: function(options){
var iset = {
name: $('.selectitem'), //容器
select: $('.selectitem>dl'), //dl列表
dropCss: 'drop', //收藏狀態(tài)dt的樣式
shrinkCss: 'shrink', //展開狀態(tài)dt的樣式
hoverCss: 'hover', //鼠標(biāo)劃過dd時(shí)的樣式
clearTime: 100, //允許用戶快速劃過不觸發(fā)的時(shí)間(ms)
dropTime: 100, //展開時(shí)間(ms)
shrinkTime: 100 //收縮時(shí)間(ms)
}
options = options || {};
$.extend(iset, options);
var mainHeight = iset.name.height();//容器高度
var selectHeight = iset.select.height(); //dl實(shí)際高度
var curTxt = iset.select.find('dt').html(); //dt默認(rèn)html內(nèi)容
var self = null;
var hoverElem = null; //避免用戶快速劃過時(shí)觸發(fā)事件
iset.name.each(function(){
$(this).hover(function(){
self = this;
hoverElem = setTimeout(function(){
$(self).stop(true, false).animate({ //鼠標(biāo)劃過時(shí),展開dl
height: selectHeight
}, iset.dropTime);
if ($(self).find('dt').html() == curTxt) { //判斷是否有選擇下拉列表,若無則改變dt樣式
$(self).find('dt').attr('class', iset.dropCss);
}
//dd的鼠標(biāo)事件
$(self).find('dd').mouseover(function(){
$(this).addClass(iset.hoverCss).siblings().removeClass(iset.hoverCss);
}).mousedown(function(){ //鼠標(biāo)點(diǎn)擊時(shí)取值并賦給dt
$(self).find('dt').html($(this).html()).attr('class', $(this).attr('class'));
$(self).stop(true, false).animate({
height: mainHeight
}, iset.shrinkTime);
}).removeClass(iset.hoverCss);
}, iset.clearTime);
}, function(){
//鼠標(biāo)移出后觸發(fā)的事件
clearTimeout(hoverElem);
$(self).stop(true, false).animate({
height: mainHeight
}, iset.shrinkTime);
if ($(self).find('dt').html() == curTxt) {
$(self).find('dt').attr('class', iset.shrinkCss);
}
});
})
}
})
})(jQuery);
相關(guān)文章
基于JavaScript如何實(shí)現(xiàn)ajax調(diào)用后臺(tái)定義的方法
由于ajax的獨(dú)特優(yōu)勢,使得它在當(dāng)前大量網(wǎng)站得到了廣泛的應(yīng)用,下面就介紹一下ajax如何調(diào)用后臺(tái)定義的函數(shù),對ajax調(diào)用后臺(tái)方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12Jquery實(shí)現(xiàn)上下移動(dòng)和排序代碼
這篇文章主要介紹了Jquery實(shí)現(xiàn)上下移動(dòng)和排序,想要學(xué)習(xí)Jquery的同學(xué)可以來了解一下。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-10-10jQuery熱氣球動(dòng)畫半透明背景的后臺(tái)登錄界面代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)熱氣球動(dòng)畫背景登錄框,適合用于后臺(tái)登陸界面設(shè)計(jì),推薦給大家,有需要的小伙伴可以參考下。2015-08-08JQuery在光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼
IE下可以通過 document.selectIOn.createRange ();來實(shí)現(xiàn),而Firefox(火狐)瀏覽器則 需要首先獲取光標(biāo)位置,然后對value進(jìn)行字符串截取處理2010-06-06JQuery實(shí)現(xiàn)Table的tr上移下移功能
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)Table的tr上移下移功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02