js+csss實(shí)現(xiàn)的一個(gè)帶復(fù)選框的下拉框
更新時(shí)間:2014年09月29日 16:42:38 投稿:whsnow
用js+csss實(shí)現(xiàn)的一個(gè)帶復(fù)選框的下拉框,用到了很基礎(chǔ)的技術(shù),但是比較實(shí)用,喜歡的朋友可以參考下
效果圖:

css:
<style type="text/css">
/* 帶復(fù)選框的下拉框 */
ul li{
list-style: none;
padding:0px;
margin: 0px;
}
.select_checkBox{
border:0px solid red;
position: relative;
display:inline-block;
}
.chartQuota{
height:23px;
float:left;
display:inline-block;
border:0px solid black;
position: relative;
}
.chartOptionsFlowTrend{
z-index:300;
background-color:white;
border:1px solid gray;
display:none;
position: absolute;
left:0px;
top:23px;
width:150px;
}
.chartOptionsFlowTrend ul{
float:left;
padding: 0px;
margin: 5px;
}
.chartOptionsFlowTrend li{
/* float:left; */
display:block;
position: relative;
left:0px;
margin: 0px;
clear:both;
}
.chartOptionsFlowTrend li *{
float:left;
}
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
.chartQuota p a {
float: left;
height: 21px;
outline: 0 none;
border: 1px solid #ccc;
line-height: 22px;
padding: 0 5px;
overflow: hidden;
background: #eaeaea;
color: #313131;
text-decoration: none;
}
.chartQuota p {
margin:0px;
folat:left;
overflow: hidden;
height: 23px;
line-height:24px;
display: inline-block;
}
.chartOptionsFlowTrend p {
height: 23px;
line-height: 23px;
overflow: hidden;
position: relative;
z-index: 2;
background: #fefbf7;
padding-top: 0px;
display: inline-block;
}
.chartOptionsFlowTrend p a {
border: 1px solid #fff;
margin-left: 15px;
color: #2e91da;
}
</style>
html:
<div class="select_checkBox"> <div class="chartQuota"> <p> <a href="javascript:;" hidefocus="true" title="請(qǐng)選擇指標(biāo)"><span>選擇指標(biāo)</span> <b></b> </a> </p> </div><br> <div class="chartOptionsFlowTrend""> <ul> <li class=""><input type="checkbox" value="1"><span>瀏覽次數(shù)(PV)</span> </li> <li class=""><input type="checkbox" value="1"><span>獨(dú)立訪客(UV)</span> </li> <li class=""><input type="checkbox" value="1"><span>IP</span> </li> <li class=""><input type="checkbox" value="1"><span>新獨(dú)立訪客</span> </li> <li class=""><input type="checkbox" value="1"><span>訪問(wèn)次數(shù)</span> </li> </ul> <p> <a href="javascript:;" title="確定" hidefocus="true" class="a_0">確定</a><a href="javascript:;" title="取消" hidefocus="true" class="a_1">取消</a> </p> </div> </div>
js:
<script type="text/javascript">
$(function(){
$(".select_checkBox").hover(function(){
$(".chartOptionsFlowTrend").css("display","inline-block");
},function(){
$(".chartOptionsFlowTrend").css("display","none");
});
});
</script>
您可能感興趣的文章:
- AngularJS使用ng-repeat指令實(shí)現(xiàn)下拉框
- JS仿百度自動(dòng)下拉框模糊匹配提示
- js自定義select下拉框美化特效
- js實(shí)現(xiàn)的下拉框二級(jí)聯(lián)動(dòng)效果
- 原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
- js和jquery分別驗(yàn)證單選框、復(fù)選框、下拉框
- javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例演示
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- jsp從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法
- js實(shí)現(xiàn)Select下拉框具有輸入功能的方法
- JS獲取文本框,下拉框,單選框的值的簡(jiǎn)單實(shí)例
- Js獲取下拉框選定項(xiàng)的值和文本的實(shí)現(xiàn)代碼
- 利用js獲取下拉框中所選的值
相關(guān)文章
JS 參數(shù)傳遞的實(shí)際應(yīng)用代碼分析
在項(xiàng)目中,有一個(gè)Ajax加載的區(qū)域,是一個(gè)Div標(biāo)簽,id為msg_box,這個(gè)控制鏈接包含在一個(gè)左側(cè)的導(dǎo)航中,當(dāng)從其他頁(yè)面鏈接到這個(gè)頁(yè)面時(shí),該JS代碼就失效了。2009-09-09
20行JS代碼實(shí)現(xiàn)網(wǎng)頁(yè)刮刮樂(lè)效果
下面小編就為大家?guī)?lái)一篇20行JS代碼實(shí)現(xiàn)網(wǎng)頁(yè)刮刮樂(lè)效果。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Javascript和HTML5利用canvas構(gòu)建Web五子棋游戲?qū)崿F(xiàn)算法
這只是一個(gè)簡(jiǎn)單的JAVAscript和HTML5小程序,沒(méi)有實(shí)現(xiàn)人機(jī)對(duì)戰(zhàn),五子棋棋盤(pán)落子點(diǎn)對(duì)應(yīng)的二維數(shù)組,具體的實(shí)現(xiàn)算法如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07
javascript+xml技術(shù)實(shí)現(xiàn)分頁(yè)瀏覽
基于web的技術(shù)中,分頁(yè)是一個(gè)老的不能再老的,但大家津津樂(lè)道的問(wèn)題,隨著xml技術(shù)的日漸應(yīng)用,把xml應(yīng)用到分頁(yè)當(dāng)中,也是一種可能,當(dāng)然網(wǎng)上的教程很多,當(dāng)我都是看得稀里糊涂,索性自己寫(xiě)一個(gè),與大家分享、指正。2008-07-07
使用JSX 建立組件 Parser(解析器)開(kāi)發(fā)的示例
這篇文章主要介紹了使用JSX 建立組件 Parser(解析器)開(kāi)發(fā)的示例(前端組件化)本文重點(diǎn)講述我們?nèi)绾螐?開(kāi)始搭建一個(gè)組件系統(tǒng),基于標(biāo)記語(yǔ)言的Parser的一種風(fēng)格2021-04-04
js 打開(kāi)新頁(yè)面在屏幕中間的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 打開(kāi)新頁(yè)面在屏幕中間的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11

