文档章节

带复选框的下拉框

sitaluoduoxi
 sitaluoduoxi
发布于 2016/07/26 22:14
字数 335
阅读 4
收藏 0

效果图:


css:

<style type="text/css">
/* 带复选框的下拉框  */
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>浏览次数(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>访问次数</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>




© 著作权归作者所有

sitaluoduoxi
粉丝 0
博文 33
码字总数 24992
作品 0
广州
后端工程师
私信 提问
word文档输入带勾的复选框

对于一些特殊的业务排版,就会用到这个选择框或者复选框,如业务办理申请表等,可以能让你很清楚的知道需要办理那个项目,那么在word文档我们怎样输入这个带勾的复选框呢 工具/原料 word软件...

任远
2018/03/10
0
0
说说 Vue.js 中的 v-model 指令以及如何绑定表单元素

我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。 1 基础用法 1.1 文本输入框(text) 这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上。 html: js: 效果...

deniro
2018/12/02
0
0
功能表单字段选择数据类型的配置详解——JEPLUS快速开发平台

功能表单字段之下拉框、单选框、多选框、树形选择数据类型的配置详解 JEPLUS平台的表单支持有多种不同的数据类型,这些不同的数据类型在展示不同类型的数据时能有很好的效果,今天这篇笔记就...

JEPLUS
2018/06/12
0
0
百小僧/Monk.UI

Monk.UI 原生Javascript开发,不依赖任何第三方框架,赶快让你的表单亮起来吧! 作者信息 原创作者: 开源协议: 开发时间: 项目版本: 项目名称: 版权所有:百签软件(中山)有限公司 联系...

百小僧
2016/10/13
0
0
当我点击复选框时候出现相对应的下拉框

就是我有很多个复选框,当我点击其中一个复选框的时候,出现该复选框相对应的下拉框。当我点击另一个复选框的时候,又出现相对应的下拉框。并一起获取它们的值。希望大家帮帮忙。项目需要,很...

PHP程序员员
2014/12/04
80
0

没有更多内容

加载失败,请刷新页面

加载更多

告诉大家写简历和面试的技巧(面向高级开发和架构师)

之前我也写过不少介绍面试相关的博文,有些文章的点击量还不低,这些面试相关的经验大多都是从我面试别人的过程中提炼出来了。 在18年底到19年3月,陆续面试了几家公司,有成有不成的,最终进...

java菜分享
13分钟前
0
0
SpringMVC教程3【文件上传下载,静态资源处理及数据校验】

一,文件上传 web.xml配置通用 <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi......

薛小二
20分钟前
3
0
【跟着我们学Golang】基础结构

鉴于上篇文章我们已经讲过Go语言环境的安装,现在我们已经有了一个可以运行Go程序的环境,而且,我们还运行了'Hello World'跑出了我们的第一个Go程序。 这节我们就以'Hello World为例,讲解G...

搜云库技术团队
24分钟前
1
0
谈谈ConcurrentHashMap1.7和1.8的不同实现

ConcurrentHashMap 在多线程环境下,使用HashMap进行put操作时存在丢失数据的情况,为了避免这种bug的隐患,强烈建议使用ConcurrentHashMap代替HashMap,为了对更深入的了解,本文将对JDK1....

群星纪元
25分钟前
0
0
JBDC更新计数行以及调用存储过程返回多个结果集

在学习该知识点之前,需要了解sqlserver的一个存储过程语句:SET NOCOUNT ON; 执行该命令 表示不返回计数行,什么是计数行了,比如我们执行 DELETE ,UPDATE,INSERT的时候,对多少条数据进行了...

小v来上课
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多