js+csss實現(xiàn)的一個帶復(fù)選框的下拉框
更新時間:2014年09月29日 16:42:38 投稿:whsnow
用js+csss實現(xiàn)的一個帶復(fù)選框的下拉框,用到了很基礎(chǔ)的技術(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="請選擇指標"><span>選擇指標</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>獨立訪客(UV)</span> </li> <li class=""><input type="checkbox" value="1"><span>IP</span> </li> <li class=""><input type="checkbox" value="1"><span>新獨立訪客</span> </li> <li class=""><input type="checkbox" value="1"><span>訪問次數(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指令實現(xiàn)下拉框
- JS仿百度自動下拉框模糊匹配提示
- js自定義select下拉框美化特效
- js實現(xiàn)的下拉框二級聯(lián)動效果
- 原生JavaScript實現(xiàn)動態(tài)省市縣三級聯(lián)動下拉框菜單實例代碼
- js和jquery分別驗證單選框、復(fù)選框、下拉框
- javascript省市區(qū)三級聯(lián)動下拉框菜單實例演示
- javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
- jsp從數(shù)據(jù)庫獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級聯(lián)動菜單的方法
- js實現(xiàn)Select下拉框具有輸入功能的方法
- JS獲取文本框,下拉框,單選框的值的簡單實例
- Js獲取下拉框選定項的值和文本的實現(xiàn)代碼
- 利用js獲取下拉框中所選的值
相關(guān)文章
Javascript和HTML5利用canvas構(gòu)建Web五子棋游戲?qū)崿F(xiàn)算法
這只是一個簡單的JAVAscript和HTML5小程序,沒有實現(xiàn)人機對戰(zhàn),五子棋棋盤落子點對應(yīng)的二維數(shù)組,具體的實現(xiàn)算法如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07
javascript+xml技術(shù)實現(xiàn)分頁瀏覽
基于web的技術(shù)中,分頁是一個老的不能再老的,但大家津津樂道的問題,隨著xml技術(shù)的日漸應(yīng)用,把xml應(yīng)用到分頁當中,也是一種可能,當然網(wǎng)上的教程很多,當我都是看得稀里糊涂,索性自己寫一個,與大家分享、指正。2008-07-07
使用JSX 建立組件 Parser(解析器)開發(fā)的示例
這篇文章主要介紹了使用JSX 建立組件 Parser(解析器)開發(fā)的示例(前端組件化)本文重點講述我們?nèi)绾螐?開始搭建一個組件系統(tǒng),基于標記語言的Parser的一種風(fēng)格2021-04-04

