JS外掛——自定義下拉框
HTML的原生select標籤，很多東西改不了，限制太大，不同的瀏覽器顯示的樣式還不一樣，尤其是當需要相容IE7、IE8時問題更多，想做一個美觀的下拉框，最終還是得自定義來實現。
效果圖：
這裡沒有做過多的美化，需求就是要這麼個簡潔的。當然，大小、顏色、箭頭圖示等等只要能看見的都可以修改，只需要改CSS就OK，這裡就不展示了。
思路：
通過ul、li標籤來仿下拉框，CSS控制樣式，JS封裝外掛。
<span style="margin-left:6px;margin-right:6px;">
<ul class="nav off" CSS控制樣式
.nav{background-color:#fff;display:inline-block; width:50px; height:28px; line-height:28px;border:solid 1px black;*zoom: 1;*display: inline; text-align:left; vertical-align:middle JS封裝外掛
;(function($,window,document,undefined){
/*
*定義Select建構函式
*/
var Select=function(ele,opt){
this.$element=ele,
this.defaults={
Items:undefined,//下拉框繫結的資料來源 Key Value物件
SelectedValue:undefined,
SelectedValueName:undefined,
SelectedLevel:undefined,
SelectChanged:undefined
},
this.options=$.extend({},this.defaults,opt)
}
Select.prototype={
//初始化
init:function(){
var $this=this;
if($this.SelectedValue==null
||$this.SelectedValue==undefined)
$this.SelectedValue="";
$this.$element.attr("data-role","select");
$this.BindHideEvent();
if($this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]').length<1){
$('<ul class="scroll-bar sub" style="display:none;" data-sub-select-for="'+$this.$element.attr("data-id")+'"></ul>').insertAfter($this.$element)
.css({'overflow-y:':'auto'})
.attr('data-id','content'+$this.$element.attr('data-id'));
}else{
$this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]')
.css({'overflow-y:':'auto'})
.attr('data-id','content'+$this.$element.attr('data-id'));
}
return this.$element.each(function(){
var $select=$(this);
$this.BindItems($select);
$this.InitShowEvent($select);
$select=null;
});
},
BindItems:function($select){
var $this=this;
var $ul=$select.find("ul.sub:first");
$select.attr("data-selected-value","");
$ul.empty()
.width($this.$element.width())
.css({'overflow-y:':'auto'})
.attr('data-id','content'+$this.$element.attr('data-id'));
var items=$this.options.Items;
if(items==undefined||items==null||items.length<1)return;
for(var i=0;i<items.length;++i){
var data=items[i];
var $li=$("<li class=\"\"></li>");
$li.attr("data-id",data.Id);
$li.attr("data-level",0);
$li.attr("title",data.Name);
$li.attr("data-children",JSON.stringify(data.Children));
if(data.Children!=null&&data.Children.length>0){
$li.html("<span><span class=\"arraw\"><s> </s> </span><span class=\"text\">"+data.Name+"</span></span>");
}
else{
$li.html("<span><span class=\"text\">"+data.Name+"</span></span>");
}
$ul.append($li);
$li.unbind("mousedown").mousedown(function(){
$this.HideUL();
$this.$element.attr("data-selected-level",$(this).attr("data-level"));
$this.$element.attr("data-selected-value",$(this).attr("data-id")).find("li>span>.text-top").text($(this).find(".text").text());
$this.RaiseSelectChanged($(this).attr("data-level"),$(this).attr("data-id"));
});
if(data.Children!=null&&data.Children.length>0){
$li.unbind("mouseenter").mouseenter(function(){
var offset=$(this).offset();
var $ul2=$this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]:first').empty();
var list=JSON.parse($(this).attr("data-children"));
if(list==null)return;
for(var j=0;j<list.length;++j)
{
var data2=list[j];
var $li2=$("<li class=\"\"></li>");
$li2.attr("data-id",data2.Id);
$li2.attr("data-level",1);
$li2.attr("title",data2.Name);
$li2.html("<span><span class=\"text\">"+data2.Name+"</span></span>");
$ul2.append($li2);
$li2.unbind("mousedown").mousedown(function(){
$this.HideUL();
$this.$element.attr("data-selected-level",$(this).attr("data-level"));
$this.$element.attr("data-selected-value",$(this).attr("data-id")).find("li>span>.text-top").text($(this).find(".text").text());
$this.RaiseSelectChanged($(this).attr("data-level"),$(this).attr("data-id"));
});
$li2=null;
data2=null;
}
list=null;
if($ul2.height()>$(window).height()-20){
$ul2.height($(window).height()-20);
}
if(offset.top+$ul2.height()>$(window).height()){
$ul2.css({left:(offset.left+$ul.width()-25)+'px',top: 20+'px' }).show();
}else{
$ul2.css({left:(offset.left+$ul.width()-25)+'px',top: offset.top+'px' }).show();
}
$ul2=null;
});
}else{
$li.unbind("mouseenter").mouseenter(function(){
$this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]:first').hide();
});
}
data=null;
$li=null;
}
if($this.SelectedValue==undefined||$this.SelectedValue==null||$this.SelectedValue.length<1){
$select.attr("data-selected-level","0");
$select.attr("data-selected-value",items[0].Id).find("li>span>.text-top").text(items[0].Name);
}else{
$select.attr("data-selected-level",$this.SelectedLevel);
$select.attr("data-selected-value",$this.SelectedValue).find("li>span>.text-top").text($this.SelectedValueName);
}
$this.options.Items=null;
},
//初始化顯示事件
InitShowEvent:function($select){
var $this=this;
$select.find("li>span[data-role=\"select-able\"]").unbind("click").click(function(e){
if($select.hasClass("off")){
var offset=$select.offset();
var $ul=$select.find("ul.sub:first");
if(offset.top+$select.height()+$ul.height()>$(document).height()-offset.top-$select.height()-20){
$ul.height($(document).height()-offset.top-$select.height()-20);
}
$ul=null;
$select.find("ul.sub").css({ left: offset.left, top: offset.top+$select.height() });
$select.removeClass("off");
}else{
$this.HideUL();
}
e.stopPropagation();
});
},
//繫結隱藏事件
BindHideEvent:function(){
var $this=this;
if(typeof($this.$element.attr("data-id"))=="undefined"){
$this.$element.attr("data-id",$this.guid());
}
if(typeof($(document).attr('select_'+$this.$element.attr('data-id')))=="undefined"){
$(document).attr('select_'+$this.$element.attr('data-id'),'');
$(document).bind("mousedown",function(event){
var node = event.target;
if(typeof($(node).attr('data-id'))!='undefined'){
if($(node).attr('data-id')=='content'+$this.$element.attr('data-id')){
event.stopPropagation();
return;
}
}
$this.HideUL();
});
}
},
//隱藏
HideUL:function(){
var $this=this;
$this.$element.removeClass("off").addClass("off").parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]').eq(0).empty().hide();
},
//選中的值修改時觸發
RaiseSelectChanged:function(level,selectedValue){
if(this.options.SelectChanged==undefined||this.options.SelectChanged==null)return;
this.options.SelectChanged(level,selectedValue);
return;
}
}
/*
*封裝為Select外掛
*/
$.fn.select=function(options){
//建立Beautifier的實體
var obj = new Select(this, options);
//呼叫其方法
return obj.init();
};
/*
*獲取下拉框選中的值
*/
$.fn.selectedValue=function(){
return this.attr("data-selected-value");
};
})(jQuery,window,document);初始化下拉框：
$(".nav.off").select({
Items:[{"Id":"A","Name":"A","":"Children"},{"Id":"B","Name":"B","":"Children"},{"Id":"C","Name":"C","":"Children"}],
SelectedValue:"B",
SelectedValueName:"B"
SelectChanged:function(level,selectedValue){
//code
}
});相關推薦
JS外掛——自定義下拉框
HTML的原生select標籤，很多東西改不了，限制太大，不同的瀏覽器顯示的樣式還不一樣，尤其是當需要相容IE7、IE8時問題更多，想做一個美觀的下拉框，最終還是得自定義來實現。 效果圖： 這裡沒有做過多的美化，需求就是要這麼個簡潔的。當
移動端自定義下拉框【H5+js+css】
var weekdayArr = ['男', '女'];// var age1 = ['18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '3
【4】自定義下拉框
order viewport down jquer pos bottom last png 下拉框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
自定義下拉框樣式，利用prototype制作
制作 pointer code javascrip .text att .com 自定義 cti <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
SELECT2自定義下拉框
SELECT2自定義下拉框 安裝 參考：Getting Started | Select2 - The jQuery replacement for select boxes 快速使用 html: <select class="js-ex
安卓自定義下拉框---Spinner的實現
最近專案中用到下拉列表，剛開始一頭霧水，後來在網上找了一個Demo,自己修改了一下，現在把它分享出來，給大家參考，寫的不好，多多關照！不過功能還是實現的了······先上圖給大家看看效果！ 效果圖： 實現思路： 1.定義下拉控制元件佈局（ListView及子控
vue自定義下拉框元件
<template> <div class="selection-component"> <div class="selection-show" @click="toggleDrop"> <span :class="{'active': isDr
select+ztree自定義下拉框整合ztree
效果圖： 一、需要引入檔案有：jquery.js、zTree/2.6/zTreeStyle.css、zTree/2.6/jquery.ztree-2.6.min.js 注意引入先後順序要先引入jquery.js； 二、html程式碼： <input
jqGrid之自定義下拉框
目的：使用者表中的負責人，做成下拉框模式，下拉框的選項為負責人中的資料。 1.首先js獲取負責人資料（陣列格式） var g_ary=[]; var g_fpid=null; $(
android中自定義下拉框
android自帶的下拉框好用不？我覺得有時候好用，有時候難有，專案規定這樣的效果，自帶的控制元件實現不了，那麼只有我們自己來老老實實滴寫一個新的了，其實最基本的下拉框就像一些資料填寫時，點選的時候出現在編輯框的下面，然後又很多選項的下拉框，可是我在網上找了一下，沒有這種下
原生js實現一個自定義下拉單選選擇框
瀏覽器自帶的原生下拉框不太美觀，而且各個瀏覽器表現也不一致，UI一般給的下拉框也是和原生的下拉框差別比較大的，這就需要自己寫一個基本功能的下拉選單/下拉選擇框了。最近，把專案中用到的下拉框元件重新封裝了一下，以建構函式的方式進行封裝，主要方法和事件定義在原型上，下面是主要的實現程式碼並添加了比較詳細的註釋
jqGrid 單元格編輯 自定義下拉選擇框 動態資料來源 通用實現
jqGrid編輯型別可分為：單元格編輯(Cell editing)、行內編輯(Inline editing)和表單編輯(Form editing)，本文討論單元格編輯模式下，下拉選擇框的通用實現。jqGrid自帶下拉選擇框編輯型別，只要設定edittype='select’並設定editop
wxpython自定義下拉列表框
自定義wxpython下拉列表框，支援修改邊框顏色，按鈕圖示的動態變換 原理同前兩片文章一樣，使用了兩個wx.staticText做邊框，一個文字框來顯示下拉列表的資料，和一個圖片按鈕，實現下拉的標誌，和一個自帶的列表框， 影藏該列表框，不要原來的樣式，這裡只需要使用它的展示列表的資料功能
js實現點擊下拉框選中對應的div
ted bsp tel 範圍 selected onchange 大學 left nbsp <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&
Android PullToRrefresh 自定義下拉刷新動畫 （listview、scrollview等）
appear ram nal ima cas 創建 protect tom inter PullToRefreshScrollView 自定義下拉刷新動畫，只需改一處。 以下部分轉載自http://blog.csdn.net/superjunjin/article/
使用 CSS overscroll-behavior 控制滾動行為：自定義下拉刷新和溢出效果
pull str 新的 title contain 下拉刷新 介紹 select data CSS 的新屬性 overscroll-behavior 允許開發者覆蓋默認的瀏覽器滾動行為，一般用在滾動到頂部或者底部。 背景 滾動邊界和滾動鏈接（boundary & c
WPF 自定義下拉列表
LV mage png gif ces hid IT orm false XAML代碼： <Popup x:Name="popupStrategy" StaysOpen="False" PopupAnimation="Scroll" Width="190"
ABAP如何自定義下拉列表 .
app class AD 定義 fault pre amp 列表 nbsp 1. 在選擇屏幕上添加下拉列表控件, 代碼如下： PARAMETERS: auart LIKE vapma-auart AS LISTBOX VISIBLE LENGTH 6
jq自定義下拉菜單，當用戶點擊非自身元素（下拉菜單）本身時關閉下拉菜單
info alt one === 下拉 AS 菜單 com code jq自定義下拉菜單，當用戶點擊非自身元素（下拉菜單）本身時關閉下拉菜單 截圖： 代碼如下： //關閉用戶菜單 $(document).mousedown(function(e){
Vue.js模擬百度下拉框
event NPU data resource prevent text eve set bubuko 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c