Home > Web Front-end > HTML Tutorial > html+css+js drop-down list triangle

html+css+js drop-down list triangle

墨辰丷
Release: 2018-05-16 09:59:43
Original
5056 people have browsed it

This article mainly introduces the html css js drop-down list triangle. Interested friends can refer to it. I hope it will be helpful to everyone.

<!DOCTYPE html>
<html>
<head>
	<title>gadf</title>
	<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">
	<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
	<script src="dist/js/bootstrap.min.js" type="text/javascript"></script>

<style type="text/css">
	
	.zijisanjiclass{ 
		width: 220px;
		border: 1px solid rgba(0,0,0,.15);
		background-color: #fff;
		padding: 10px;
		top :0px;
		position: absolute;
	}
	.datepicker-select-dropdown.datepicker-select-orient-top:before {
	    bottom: -7px;
	    left: 6px;
	    border-bottom: 0;
	    border-top: 7px solid rgba(0,0,0,.15);
	}
	.datepicker-select-dropdown:before {
	    border-left: 7px solid transparent;
	    border-right: 7px solid transparent;
	    border-bottom: 7px solid rgba(0,0,0,.15);
	    border-bottom-color: rgba(0,0,0,.2);
	}
	.datepicker-select-dropdown:after, .datepicker-select-dropdown:before {
	    content: &#39;&#39;;
	    display: inline-block;
	    border-top: 0;
	    position: absolute;
	}
	.datepicker-select-dropdown.datepicker-select-orient-top:after {
	    bottom: -6px;
	    left: 7px;
	    border-bottom: 0;
	    border-top: 6px solid #fff;
	}	
	.datepicker-select-dropdown:after {
	    border-left: 6px solid transparent;
	    border-right: 6px solid transparent;
	    border-bottom: 6px solid #fff;
	}
	.datepicker-select-dropdown.datepicker-select-orient-bottom:after {
	    top: -6px;
	}
	.datepicker-select-dropdown.datepicker-select-orient-bottom:before {
	    top: -7px;
	}
	.form .form-bordered .form-group>p {
	    border-left: 1px solid #efefef;
	}
	.form .form-bordered .form-group {
	    margin: 0;
	    border-bottom: 1px solid #efefef;
	}
</style>

</head>
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
        <p class="page-wrapper">
            <c:import url="../header.jsp"></c:import> 
            <p class="clearfix"> </p>
            <p class="page-container">
                <p class="page-sidebar-wrapper">
                    <p class="page-sidebar navbar-collapse collapse">
                        <c:import url="../menu.jsp"></c:import>
                    </p>
                </p>
                <p class="page-content-wrapper" >
                    <!-- BEGIN CONTENT BODY -->
                    <p class="page-content" id="mainBodyId">
                        <p class="page-bar">
                            <ul class="page-breadcrumb">
                                <li>
                                    <a href="index.html">首页</a>
                                    <i class="fa fa-circle"></i>
                                </li>
                            </ul>
                        </p>
                        <p class="row">
                        	<p class="col-md-12">
                        		<p class="portlet light portlet-fit portlet-datatable bordered">
                                    <p class="portlet-body">
                                        <p class="table-container">
                                            <table class="table table-striped table-bordered table-hover table-checkable" id="datatable_ajax_user_info">
                                                <thead>
                                                    <tr role="row" class="heading">
                                                        <th style="width:5%;"> ID </th>
                                                        <th style="width:5%;"> 姓名 </th>
                                                        <th style="width:5%;"> 年龄 </th>
                                                        <th style="width:5%;"> 性别 </th>
                                                        <th style="width:5%;"> 出生日期 </th>
                                                        <th style="width:5%;"> 民族 </th>
                                                        <th style="width:5%;"> 身高(cm) </th>
                                                        <th style="width:5%;"> 体重(Kg) </th>
                                                        <th style="width:5%;"> 学历 </th>
                                                        <th style="width:15%;"> 操作 </th>
                                                    </tr>
                                                    <tr role="row" class="heading">
                                                        <th style="width:5%;"> ID </th>
                                                        <th style="width:5%;"> 姓名 </th>
                                                        <th style="width:5%;"> 年龄 </th>
                                                        <th style="width:5%;"> 性别 </th>
                                                        <th style="width:5%;"> 出生日期 </th>
                                                        <th style="width:5%;"> 民族 </th>
                                                        <th style="width:5%;"> 身高(cm) </th>
                                                        <th style="width:5%;"> 体重(Kg) </th>
                                                        <th style="width:5%;"> 学历 </th>
                                                        <th style="width:15%;"> 操作 </th>
                                                    </tr>
                                                    <tr role="row" class="heading">
                                                        <th style="width:5%;"> ID </th>
                                                        <th style="width:5%;"> 姓名 </th>
                                                        <th style="width:5%;"> 年龄 </th>
                                                        <th style="width:5%;"> 性别 </th>
                                                        <th style="width:5%;"> 出生日期 </th>
                                                        <th style="width:5%;"> 民族 </th>
                                                        <th style="width:5%;"> 身高(cm) </th>
                                                        <th style="width:5%;"> 体重(Kg) </th>
                                                        <th style="width:5%;"> 学历 </th>
                                                        <th style="width:15%;"> 操作 </th>
                                                    </tr>
                                                    <tr role="row" class="heading">
                                                        <th style="width:5%;"> ID </th>
                                                        <th style="width:5%;"> 姓名 </th>
                                                        <th style="width:5%;"> 年龄 </th>
                                                        <th style="width:5%;"> 性别 </th>
                                                        <th style="width:5%;"> 出生日期 </th>
                                                        <th style="width:5%;"> 民族 </th>
                                                        <th style="width:5%;"> 身高(cm) </th>
                                                        <th style="width:5%;"> 体重(Kg) </th>
                                                        <th style="width:5%;"> 学历 </th>
                                                        <th style="width:15%;"> 操作 </th>
                                                    </tr>
                                                    <tr role="row" class="heading">
                                                        <th style="width:5%;"> ID </th>
                                                        <th style="width:5%;"> 姓名 </th>
                                                        <th style="width:5%;"> 年龄 </th>
                                                        <th style="width:5%;"> 性别 </th>
                                                        <th style="width:5%;"> 出生日期 </th>
                                                        <th style="width:5%;"> 民族 </th>
                                                        <th style="width:5%;"> 身高(cm) </th>
                                                        <th style="width:5%;"> 体重(Kg) </th>
                                                        <th style="width:5%;"> 学历 </th>
                                                        <th style="width:15%;"> 操作 </th>
                                                    </tr>
                                                    <tr role="row" class="heading">
                                                        <th style="width:5%;"> ID </th>
                                                        <th style="width:5%;"> 姓名 </th>
                                                        <th style="width:5%;"> 年龄 </th>
                                                        <th style="width:5%;"> 性别 </th>
                                                        <th style="width:5%;"> 出生日期 </th>
                                                        <th style="width:5%;"> 民族 </th>
                                                        <th style="width:5%;"> 身高(cm) </th>
                                                        <th style="width:5%;"> 体重(Kg) </th>
                                                        <th style="width:5%;"> 学历 </th>
                                                        <th style="width:15%;"> 操作 </th>
                                                    </tr>
                                                    <tr role="row" class="heading">
                                                        <th style="width:5%;"> ID </th>
                                                        <th style="width:5%;"> 姓名 </th>
                                                        <th style="width:5%;"> 年龄 </th>
                                                        <th style="width:5%;"> 性别 </th>
                                                        <th style="width:5%;"> 出生日期 </th>
                                                        <th style="width:5%;"> 民族 </th>
                                                        <th style="width:5%;"> 身高(cm) </th>
                                                        <th style="width:5%;"> 体重(Kg) </th>
                                                        <th style="width:5%;"> 学历 </th>
                                                        <th style="width:15%;"> 操作 </th>
                                                    </tr>
                                                    <tr role="row" class="filter">
                                                        <td>
                                                        	<input type="text" class="form-control form-filter input-sm" name="userInfoId">
                                                        </td>
                                                        <td>
                                                        	<input type="text" class="form-control form-filter input-sm" name="userName">
                                                        </td>
                                                        <td>
                                                        	<input type="text" class="form-control form-filter input-sm" name="userAge">
                                                        </td>
                                                        <td>
                                                        	<select class="form-control form-filter" style="height: 30px;padding: 4px 12px;">
                                                        		<option value="男">男</option>
                                                        		<option value="女">女</option>
                                                        		<option value="其他">其他</option>
                                                        	</select>
                                                        </td>
                                                        <td>
                                                        	<input type="text" class="form-control form-filter input-sm" name="userBirthday" id="userBirthdayid">
                                                        </td>
                                                        <td>
															<input type="text" class="form-control form-filter input-sm" name="userNations">
														</td>
                                                        <td> 
                                                        	<input type="text" class="form-control form-filter input-sm" name="userHight">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control form-filter input-sm" name="userWeight">
                                                        </td>
                                                        <td>
                                                            <select class="form-control form-filter" style="height: 30px;padding: 4px 12px;">
                                                        		<option value="博士">博士</option>
                                                        		<option value="硕士">硕士</option>
                                                        		<option value="本科">本科</option>
                                                        		<option value="专科">专科</option>
                                                        		<option value="高中">高中</option>
                                                        		<option value="中专">中专</option>
                                                        		<option value="初中">初中</option>
                                                        		<option value="小学">小学</option>
                                                        	</select>
                                                        </td>
                                                        <td>
                                                            <p class="margin-bottom-5">
                                                                <button class="btn btn-sm green btn-outline filter-submit margin-bottom">
                                                                    <i class="fa fa-search"></i> Search</button> <button class="btn btn-sm red btn-outline filter-cancel">
                                                                <i class="fa fa-times"></i> Reset</button>
                                                            </p>
                                                        </td>
                                                    </tr>
                                                </thead>
                                                <tbody> </tbody>
                                            </table>
                                        </p>
                                    </p>
                                </p>
                        	</p>
                        </p>
                    </p>
                </p>
            </p>
            <c:import url="../bottom.jsp"></c:import>
        </p>
        <p id="zijixiede" class="zijisanjiclass datepicker-select-dropdown datepicker-select-orient-left">
        	<p class="form" style="border: 1px solid #e7ecf1!important;">
        	<form class="form-horizontal form-bordered">
        	<p class="form-group">
        		<label class="control-label col-md-3">年</label>
        		<p class="col-md-9">
        			<select class="form-control form-filter">
	        			<option value="">请选择</option>
	        			<option value="">请选择</option>
	        			<option value="">请选择</option>
	        			<option value="">请选择</option>
	        			<option value="">请选择</option>
	        			<option value="">请选择</option>
	        			<option value="">请选择</option>
	        			<option value="">请选择</option>
	        			<option value="">请选择</option>
	        			<option value="">请选择</option>
	        		</select>
        		</p>
        	</p>
        	<p class="form-group">
        	<label class="control-label col-md-3">月</label>
        		<p class="col-md-9">
        		<select class="form-control form-filter">
        			<option value="">请选择</option>
        			<option value="">请选择</option>
        			<option value="">请选择</option>
        			<option value="">请选择</option>
        			<option value="">请选择</option>
        			<option value="">请选择</option>
        		</select>
        		</p>
        	</p>
        	<p class="form-group">
        	<label class="control-label col-md-3">日</label>
        	<p class="col-md-9">
        		<select class="form-control form-filter">
        			<option value="">请选择</option>
        			<option value="">请选择</option>
        			<option value="">请选择</option>
        			<option value="">请选择</option>
        			<option value="">请选择</option>
        		</select>
        		</p>
        	</p>
        	<p class="form-group">
        		<p class="col-md-11">
        		<p class="btn btn-default quedingbtn" >确定</p>
        		</p>
        	</p>
        	</form>
        	</p>
        </p>
        <p class="quick-nav-overlay"></p>
        <script>
		jQuery(document).ready(function(){
			$("#userBirthdayid").focus(function(){ 
				//var offset = this.component ? this.component.parent().offset() : this.element.offset();
				var offset = $(this).offset();
				console.info(offset);

				var paddingTop = $("#zijixiede").css(&#39;padding-top&#39;);
				console.info(paddingTop);

				var height =  $(this).outerHeight(false);
				console.info(height);
				var width =  $(this).outerWidth(false);
				console.info(width);

				var scrollTop = $(document).scrollTop();
				console.info(scrollTop);

				var outerHeight = $("#zijixiede").outerHeight();
				console.info(outerHeight);
				var top_overflow = -scrollTop + offset.top - outerHeight;
				console.info(top_overflow);
				var yorient = top_overflow < 0 ? &#39;bottom&#39; : &#39;top&#39;;
				$("#zijixiede").addClass(&#39;datepicker-select-orient-&#39; + yorient);
				var top = offset.top;
				if (yorient === &#39;top&#39;)
					top -= outerHeight + parseInt(paddingTop);
				else
					top += height;
				var left = offset.left;
				console.info(left);
				$("#zijixiede").css({ 
					top: top,
					left: left
				});
				$("#zijixiede").show();
			});
			$(document).mousedown(function(e){
				if(!($("#zijixiede").find(e.target).length)&&!($("#userBirthdayid").is(e.target)))
					$("#zijixiede").hide();

			});
			$(".quedingbtn").click(function(){ 
				console.info("拉克建档立卡京东方拉克");
				//return false;
			});
		});
		</script>
</body>
</html>
Copy after login

Related recommendations:

About a bug fix for the optGroup tag in the html drop-down box

html drop-down box problem_html/css_WEB -ITnose

Multiple ways to change the SELECT option of the HTML drop-down box_HTML/Xhtml_Web page production

The above is the detailed content of html+css+js drop-down list triangle. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template