模擬select的代碼
更新時間:2011年10月19日 19:34:57 作者:
模擬select的代碼,使用jquery的朋友可以參考下。
幾年前不知道在哪下載的源碼上改的,去年開始學(xué)jquery,就改了一下,代碼有點亂。
只是自己用,沒有考慮寫成通用的組件,所以童鞋們?nèi)绻娴囊萌ビ玫脑捰悬c麻煩
幾個狀態(tài),展開收起是jquery的slide

這個模擬select,只是很簡單的實現(xiàn)了單獨一個select的部分功能
沒有實現(xiàn)比如optgroup,文字長度自適應(yīng)(圖片會因此修改麻煩)
再說如果頁面多個select,css處理也麻煩,
數(shù)據(jù)、聯(lián)動都要增加大量代碼
小有小的好處,所以就不考慮進行封裝,
這里有不少童鞋做的比我好很多,功能很強大
再所以,就偷一下懶,在這里送上js注釋給初學(xué)者
$(document).ready(function(){
var newSelect = $("#aa");
newSelect.click(function(e){
//如果沒有class,即關(guān)閉狀態(tài),就展開
//打開狀態(tài)就不需要處理,冒泡執(zhí)行document.click
if(this.className == ""){
this.className = "open";
$(this.nextSibling).slideDown("fast");
e.stopPropagation();//阻止冒泡
}
});
//關(guān)閉收起
function closeSelect(obj){
$(obj.nextSibling).slideUp("fast",function(){
obj.className = "";
});
}
$(document).bind("click", function() {
closeSelect(newSelect[0]);
});
newSelect.next().click(function(e){
var src = e.target;
//如果有選中任何一項,取選中文字執(zhí)行替換操作并改變樣式,相當(dāng)于select.onchange
//冒泡執(zhí)行document.click關(guān)閉收起
if(src.tagName == "A"){
var PObj = src.parentNode;
PObj.previousSibling.innerHTML = src.innerHTML;
$(src).siblings().removeClass();
src.className = "current";
PObj.nextSibling.value = src.getAttribute("value");
}
});
});
演示地址:http://demo.jb51.net/js/2011/jquery_select/
打包下載:http://chabaoo.cn/jiaoben/39490.html
只是自己用,沒有考慮寫成通用的組件,所以童鞋們?nèi)绻娴囊萌ビ玫脑捰悬c麻煩
幾個狀態(tài),展開收起是jquery的slide

這個模擬select,只是很簡單的實現(xiàn)了單獨一個select的部分功能
沒有實現(xiàn)比如optgroup,文字長度自適應(yīng)(圖片會因此修改麻煩)
再說如果頁面多個select,css處理也麻煩,
數(shù)據(jù)、聯(lián)動都要增加大量代碼
小有小的好處,所以就不考慮進行封裝,
這里有不少童鞋做的比我好很多,功能很強大
再所以,就偷一下懶,在這里送上js注釋給初學(xué)者
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var newSelect = $("#aa");
newSelect.click(function(e){
//如果沒有class,即關(guān)閉狀態(tài),就展開
//打開狀態(tài)就不需要處理,冒泡執(zhí)行document.click
if(this.className == ""){
this.className = "open";
$(this.nextSibling).slideDown("fast");
e.stopPropagation();//阻止冒泡
}
});
//關(guān)閉收起
function closeSelect(obj){
$(obj.nextSibling).slideUp("fast",function(){
obj.className = "";
});
}
$(document).bind("click", function() {
closeSelect(newSelect[0]);
});
newSelect.next().click(function(e){
var src = e.target;
//如果有選中任何一項,取選中文字執(zhí)行替換操作并改變樣式,相當(dāng)于select.onchange
//冒泡執(zhí)行document.click關(guān)閉收起
if(src.tagName == "A"){
var PObj = src.parentNode;
PObj.previousSibling.innerHTML = src.innerHTML;
$(src).siblings().removeClass();
src.className = "current";
PObj.nextSibling.value = src.getAttribute("value");
}
});
});
演示地址:http://demo.jb51.net/js/2011/jquery_select/
打包下載:http://chabaoo.cn/jiaoben/39490.html
相關(guān)文章
jquery nth-child()選擇器的簡單應(yīng)用
今天項目中遇到過一個這樣的問題,就是希望讀出來的文章列表能夠每隔五個加一個分割條,而不是每個都加。2010-07-07Jquery實現(xiàn)無縫向上循環(huán)滾動列表的特效
今天小編就為大家分享一篇關(guān)于Jquery實現(xiàn)無縫向上循環(huán)滾動列表的特效,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-02-02防止jQuery ajax Load使用緩存的方法小結(jié)
本篇文章主要是對防止jQuery ajax Load使用緩存的方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02通過jQuery源碼學(xué)習(xí)javascript(一)
最近在做日志統(tǒng)計程序,發(fā)現(xiàn)對方的程序是在Jquery基礎(chǔ)上進行開發(fā)的,而公司的網(wǎng)站的框架是prototype。而且我也早就想了解一下Jquery源碼,故決定研究Jquery源碼,模擬它的方法2012-12-12JQuery省市聯(lián)動效果實現(xiàn)過程詳解
這篇文章主要介紹了JQuery省市聯(lián)動效果實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05jQuery 1.7.2中g(shù)etAll方法的疑惑分析
2012-05-05jQuery解析XML文件同時動態(tài)增加js文件的方法
這篇文章主要介紹了jQuery解析XML文件同時動態(tài)增加js文件的方法,涉及jQuery Ajax調(diào)用及返回函數(shù)中增加js文件的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06