一個不錯的仿攜程自定義數(shù)據(jù)下拉選擇select
更新時間:2014年09月01日 09:15:15 投稿:whsnow
這是一個仿攜程自定義的數(shù)據(jù)下拉選擇select,對一些比較重要的參數(shù)進行的描述,方便初學者
這是一個仿攜程自定義的數(shù)據(jù)下拉選擇select,對一些比較重要的參數(shù)進行的描述,方便初學者
/*
*id : id 當前插件的父元素
*data : json 選擇的數(shù)據(jù)(json格式)
*bool : true/false data數(shù)據(jù)如果要分離成兩個 值為true
*config : 配置data的內(nèi)部對象(type在bool為true的時候生效)
{
id : 數(shù)據(jù)字段,
name : 數(shù)據(jù)名稱,
alias : 數(shù)據(jù)名稱首字母,
type : 數(shù)據(jù)類型
}
*fn : function fn(){} 回調(diào)函數(shù),點擊生成標簽的時執(zhí)行的函
*/
function YSelect(id,Ydata,bool,config,fn){
var data = [];
Yselect_close = {};
var name_list = {A:[],B:[],C:[],D:[],E:[],F:[],G:[],H:[],I:[],J:[],K:[],L:[],M:[],N:[],O:[],P:[],Q:[],R:[],S:[],T:[],U:[],V:[],W:[],X:[],Y:[],Z:[],其他:[]} //新建數(shù)組,防止出現(xiàn)undefind
var YDropdowns = document.getElementById(id);
function Pretreatment(){ //處理數(shù)據(jù)
var CatalogData = [];
var BrandData = [];
var china = [];
var foreign = [];
for (var i in Ydata) {
if (Ydata[i][config.type] == null)
CatalogData.push(Ydata[i][config.id]+';'+Ydata[i][config.name]+';'+Ydata[i][config.alias])
else
BrandData.push(Ydata[i][config.id]+';'+Ydata[i][config.name]+';'+Ydata[i][config.alias]+';'+Ydata[i][config.type])
};
if (BrandData != "") {
for (var i = 0 ; i < BrandData.length ; i++) {
var str = BrandData[i].split(';')
if (str[3] == 0) china.push(str[0] + ';' + str[1] + ';' + str[2]);
else foreign.push(str[0] + ';' + str[1] + ';' + str[2]);
}
if (bool) {
data = china;
return data;
}else {
data = foreign;
return data;
}
}else{
data = CatalogData;
return data; //返回出數(shù)據(jù)
}
};
function jsondata(data_name,ida){ //處理Pretreatment返回出的數(shù)據(jù)
var tit = []; //定義首字母
var Ahtml = {A:[],B:[],C:[],D:[],E:[],F:[],G:[],H:[],I:[],J:[],K:[],L:[],M:[],N:[],O:[],P:[],Q:[],R:[],S:[],T:[],U:[],V:[],W:[],X:[],Y:[],Z:[],其他:[]}; //新建數(shù)組,防止出現(xiàn)undefind
var Yselect_box = document.createElement("div"); //新建選擇框父元素
Yselect_box.id = ida+"_Yselect_box";
var Yselect_div = document.createElement("div"); //字母返回值的容器
var Yselect_letter = document.createElement("p"); //26字母容器
Yselect_letter.id = ida+'_Yselect_letter'
var stylelink = document.createElement("style") //創(chuàng)建皮膚,有兩套皮膚可供選擇
//stylelink.innerHTML = '#'+id+'_Yselect_box{width: 100%;position:absolute;top:30px;left:0;z-index:9999;background:#fff}#'+id+'_Yselect_box p{background: #469bde;padding:0 10px;}#'+id+'_Yselect_box p span.close{font: 16px/20px 微軟雅黑;cursor:pointer;position:absolute;top:0;right:0;color:#f00}#'+id+'_Yselect_box .hide_tag{border: 1px solid #469bde;padding:5px;display: none;min-height:100px;max-height:300px;min-width:300px;max-width:800px;overflow:auto}#'+id+'_Yselect_box p a{padding:5px;line-height: 28px;color:#fff}#'+id+'_Yselect_box .hide_tag a{width:80px;display:block;text-decoration:none;padding:5px;line-height: 12px;font-size:12px;float:left;color:#444;overflow: hidden; text-overflow:ellipsis;white-space:nowrap;}#'+id+'_Yselect_box .hide_tag a:hover{background:#469bde;color:#fff;}#'+id+'_Yselect_box .cur{border-bottom: 2px solid #fac51f}';
stylelink.innerHTML = '#'+ida+'_Yselect_box{width: 100%;min-width:500px;max-width:800px;position:absolute;top:30px;left:0;z-index:9999;background:#fff;border:1px solid #ddd;}#'+ida+'_Yselect_box p{padding:0 10px;}#'+ida+'_Yselect_box p span.close{font: 16px/20px 微軟雅黑;cursor:pointer;position:absolute;top:0;right:0;color:#666}#'+ida+'_Yselect_box .hide_tag{padding:5px 10px;display: none;min-height:50px;max-height:200px;overflow:auto}#'+ida+'_Yselect_box p a{padding:5px;line-height: 28px;color:#333;border-bottom:2px solid #bbb;font-weight:bold}#'+ida+'_Yselect_box .hide_tag a{width:80px;display:block;text-decoration:none;padding:5px;line-height: 12px;font-size:12px;float:left;color:#444;overflow: hidden; text-overflow:ellipsis;white-space:nowrap;}#'+ida+'_Yselect_box .hide_tag a:hover{background:#469bde;color:#fff;}#'+ida+'_Yselect_box a.cur{border-bottom: 2px solid #469bde;color:#469bde}';
for (var i = 0 ; i < data_name.length ; i++) {
var str = data_name[i].split(';')
tit.push(str[2].charAt(0).toLocaleUpperCase()) //判斷首字母,賦值給tit
};
for(var j in tit){
if(name_list[tit[j]])
name_list[tit[j]].push(data_name[j]);
else name_list.其他.push(data_name[j])
} //將數(shù)據(jù)插入name_list里
for (var k in name_list){ //處理數(shù)據(jù),以字母分離,為空就隱藏
if (name_list[k].length != 0) {
for (var i = 0 ; i < name_list[k].length ; i++) {
var allhtml = '<a href="javascript:" onclick="'+fn+'(this)" title="'+ name_list[k][i].split(';')[1] + '" name="'+ name_list[k][i].split(';')[0] + '">' + name_list[k][i].split(';')[1] + '</a>';
Ahtml[k] += allhtml ;
};
Yselect_letter.innerHTML += '<a href="javascript:" >'+k+'</a>';
Yselect_div.innerHTML += '<div class="hide_tag">'+Ahtml[k]+'</div>';
};
}
var bool = true
Yselect_box.innerHTML = '<p id="'+ida+'_Yselect_letter'+'">'+Yselect_letter.innerHTML+'<span class="close">x</span></p>'+ Yselect_div.innerHTML;
YDropdowns.appendChild(Yselect_box);
YDropdowns.appendChild(stylelink); //將select插入頁面
Yselect_box.getElementsByTagName('p')[0].getElementsByTagName('span')[0].onclick = function Yselect_close(){
YDropdowns.removeChild(Yselect_box)
YDropdowns.removeChild(stylelink);
bool = false
} //點擊銷毀select
Yselect_close.close = function Yselect_close(obool){
if(obool){
YDropdowns.removeChild(Yselect_box)
YDropdowns.removeChild(stylelink);
bool = false
return
};
if (bool) {
YDropdowns.removeChild(Yselect_box)
YDropdowns.removeChild(stylelink);
}
} //銷毀select函數(shù)
return Yselect_close
}
jsondata(Pretreatment(),id)
navlist(id)
function navlist(ids){ //tab選項卡處理函數(shù)
var a = document.getElementById(ids+'_Yselect_letter').getElementsByTagName('a');
var div = document.getElementById(ids+'_Yselect_box').getElementsByTagName('div');
div[0].style.display = "block" ; a[0].className = "cur";
for (var i = 0 ; i < a.length ; i++) {
a[i].index = i;
a[i].onclick = function(){
for (var j = 0 ; j < a.length ; j++){
div[j].style.display = "none";
a[j].className = "";
};
div[this.index].style.display = "block";
this.className = "cur"
};
};
};
};
相關(guān)文章
Javascript 中 null、NaN和undefined的區(qū)別總結(jié)
js中的數(shù)據(jù)類型有undefined,boolean,number,string,object等5種,前4種為原始類型,第5種為引用類型,接下來與大家分享下它們之間的區(qū)別2013-04-04
JS在Chrome瀏覽器中showModalDialog函數(shù)返回值為undefined的解決方法
這篇文章主要介紹了JS在Chrome瀏覽器中showModalDialog函數(shù)返回值為undefined的解決方法,涉及javascript針對谷歌瀏覽器事件判定相關(guān)操作技巧,需要的朋友可以參考下2016-08-08
探究JavaScript原型數(shù)據(jù)共享與方法共享實現(xiàn)
這篇文章主要介紹了探究JavaScript原型數(shù)據(jù)共享與方法共享實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
JavaScript事件循環(huán)同步任務(wù)與異步任務(wù)
這篇文章主要介紹了JavaScript事件循環(huán)同步任務(wù)與異步任務(wù),文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以參考一下2022-07-07

