js 自定義個性下拉選擇框示例
更新時間:2013年08月20日 15:44:48 作者:
下拉選擇框想必大家并不陌生,一邊情況下都是使用默認的,為了打破傳統(tǒng),下面與大家分享下使用js自定義下拉選擇框示例代碼,感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>statistics test</title>
<link type="text/css" rel="stylesheet" href="../css/statistics.css"/>
<script src="../js/jquery.js"></script>
<style type="text/css">
.dropdiv{
width: 177px;
height: 16px;
overflow: hidden;
float: left;
font-size: 13px;
font-family: "微軟雅黑";
position: relative;
padding: 5px;
}
.drpdown{
width: 214px;
height: 24px;
font-size: 13px;
font-family:"微軟雅黑";
position: relative;
border:none;
padding-top:4px;
background:url(../images/dropdown.png) repeat-x;
}
.drpdown:active{
width: 214px;
height: 24px;
font-size: 13px;
font-family:"微軟雅黑";
position: relative;
border:none;
padding-top:4px;
background:url(../images/dropdown.png) repeat-x;
}
.droparrow{
width:27px;
height:27px;
background:url(../images/droparrow.png) no-repeat;
float:right;
}
.droparrow:hover{
width:25px;
height:25px;
background:url(../images/droparrow.png) no-repeat;
float:right;
border:#F00 1px solid;
}
.dropmiandiv{
margin-left:40px;
width:214px;
border: 2px solid #aaaaaa;
background:url(../images/dropdown.png) repeat-x;
height: 26px;
}
.chooseItems{
border:#666 2px solid;
}
.chooseItems .chooseItem{
font-size: 13px;
font-family: "微軟雅黑";
padding: 5px;
}
.chooseItems .chooseItem:hover{
background:#09F;
}
</style>
</head>
<body>
<div class="dropmiandiv" quest ="select1">
<div id ="select1" displayMember="-1" valueMember ="請選擇" class="dropdiv">請選擇</div>
<div class="droparrow"></div>
</div>
<div class="chooseItems" answer ="select1" style="display:none; position:absolute;">
<div class="chooseItem" displayMember="0" valueMember ="獨立注冊譯員">獨立注冊譯員</div>
<div class="chooseItem" displayMember="1" valueMember ="供應(yīng)商譯員">供應(yīng)商譯員</div>
<div class="chooseItem" displayMember="2" valueMember ="供應(yīng)商">供應(yīng)商</div>
<div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div>
</div>
<div class="dropmiandiv" quest ="select2" style="position:absolute;top:200px;">
<div id ="select2" displayMember="-1" valueMember ="請選擇" class="dropdiv">請選擇</div>
<div class="droparrow"></div>
</div>
<div class="chooseItems" answer ="select2" style="display:none; position:absolute;">
<div class="chooseItem" displayMember="0" valueMember ="獨立注冊譯員">獨立注冊譯員</div>
<div class="chooseItem" displayMember="1" valueMember ="供應(yīng)商譯員">供應(yīng)商譯員</div>
<div class="chooseItem" displayMember="2" valueMember ="供應(yīng)商">供應(yīng)商</div>
<div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div>
</div>
</body>
</html>
<script type="text/javascript">
$(".droparrow").click(function(e){
var quest = $(this).parent();
var questwidth = parseInt(quest.width());
var questheight = quest.height();
var left = quest.offset().left;
var top = parseInt(quest.offset().top)+parseInt(questheight)+4;
var attrs = quest.attr("quest");
var selectsd = $('.chooseItems[answer='+attrs+']');
var selectsdHeight = selectsd.height();
if((top+selectsdHeight)>$(window).height()){
top = top - selectsdHeight - questheight-7;
}
if($(selectsd).is(":visible")){
$(selectsd).hide();
}else{
$(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).show();
}
});
$(".dropdiv").click(function(e){
var quest = $(this).parent();
var questwidth = parseInt(quest.width());
var questheight = quest.height();
var left = quest.offset().left;
var top = parseInt(quest.offset().top)+parseInt(questheight)+4;
var attrs = quest.attr("quest");
var selectsd = $('.chooseItems[answer='+attrs+']');
var selectsdHeight = selectsd.height();
if((top+selectsdHeight)>$(window).height()){
top = top - selectsdHeight - questheight-7;
}
if($(selectsd).is(":visible")){
$(selectsd).hide();
}else{
$(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).show();
}
});
$(".chooseItem").click(function(e){
var divhtml = $(this);
var displayMember,valueMember;
displayMember = divhtml.attr("displayMember");
valueMember = divhtml.attr("valueMember");
var attrs =$(this).parent().attr("answer");
var parent = $("#"+attrs);
var olddisplayMember,oldvalueMember;
olddisplayMember = parent.attr("displayMember");
oldvalueMember = parent.attr("valueMember");
if(olddisplayMember !=displayMember){
parent.attr("displayMember",displayMember);
parent.attr("valueMember",valueMember);
parent.html(valueMember);
parent.change();
}
$(this).parent().hide();
});
$(".dropdiv").change(function(e){
alert($(this).attr("valueMember"));
});
$(".dropmiandiv").mouseleave(function(e){
var quest = $(this).attr("quest");
$('.chooseItems[answer='+quest+']').hide();
});
$(".chooseItems").mouseenter(function(e){
$(this).show();
});
$(".chooseItems").mouseleave(function(e){
$(this).hide();
});
</script>
您可能感興趣的文章:
- JS簡單設(shè)置下拉選擇框默認值的方法
- js實現(xiàn)select選擇框效果及美化
- js表單處理中單選、多選、選擇框值的獲取及表單的序列化
- js下拉選擇框與輸入框聯(lián)動實現(xiàn)添加選中值到輸入框的方法
- js實現(xiàn)仿阿里巴巴城市選擇框效果實例
- JS+CSS實現(xiàn)實用的單擊輸入框彈出選擇框的方法
- 自定義的一個簡單時尚js下拉選擇框
- Js(JavaScript)中,彈出是或否的選擇框示例(confirm用法的實例分析)
- js實現(xiàn)一個省市區(qū)三級聯(lián)動選擇框代碼分享
- js判斷選擇時間不能小于當(dāng)前時間的示例代碼
- JS日期和時間選擇控件升級版(自寫)
- JS時間選擇器 兼容IE6,7,8,9
- JS實現(xiàn)漂亮的時間選擇框效果
相關(guān)文章
javascript實現(xiàn)輸入框內(nèi)容提示及隱藏功能
這篇文章主要介紹了javascript實現(xiàn)輸入框內(nèi)容提示及隱藏功能,實現(xiàn)方法真的超簡單,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2021-09-09精彩的Bootstrap案例分享 重點在注釋!(選項卡、柵格布局)
這篇文章主要為大家分享了一個精彩的Bootstrap案例,涉及到了選項卡、柵格布局,關(guān)鍵重點在注釋,感興趣的小伙伴們可以參考一下2016-07-07moment.js輕松實現(xiàn)獲取當(dāng)前日期是當(dāng)年的第幾周
這篇文章主要介紹了moment.js輕松實現(xiàn)獲取當(dāng)前日期是當(dāng)年的第幾周,需要的朋友可以參考下2015-02-02JS中關(guān)于事件處理函數(shù)名后面是否帶括號的問題
JS中的事件處理(事件綁定)就是讓某種或某些事件觸發(fā)某些活動。有兩種常見的形式,分別是DOM Level 0 和DOM Level 2。今天總結(jié)一個關(guān)于事件處理程序的小細節(jié)。感興趣的朋友一起學(xué)習(xí)吧2016-11-11