html左侧js拉出框,html+css+js下拉列表小三角

最新推荐文章于 2023-02-06 18:10:21 发布

weixin_39620278

最新推荐文章于 2023-02-06 18:10:21 发布

阅读量297

点赞数

文章标签： html左侧js拉出框

本文介绍了一个日期选择器的样式设置及交互实现细节，包括选择器的定位、显示与隐藏逻辑等。通过对日期选择器样式的定义和JavaScript交互逻辑的编写，实现了用户在输入框聚焦时弹出日期选择面板的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

gadf

.zijisanjiclass{

width:220px;

border:1pxsolidrgba(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:7pxsolidrgba(0,0,0,.15);

}

.datepicker-select-dropdown:before{

border-left:7pxsolidtransparent;

border-right:7pxsolidtransparent;

border-bottom:7pxsolidrgba(0,0,0,.15);

border-bottom-color:rgba(0,0,0,.2);

}

.datepicker-select-dropdown:after,.datepicker-select-dropdown:before{

content:'';

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:6pxsolid#fff;

}

.datepicker-select-dropdown:after{

border-left:6pxsolidtransparent;

border-right:6pxsolidtransparent;

border-bottom:6pxsolid#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:1pxsolid#efefef;

}

.form.form-bordered.form-group{

margin:0;

border-bottom:1pxsolid#efefef;

}

首页

姓名

年龄

性别

出生日期

民族

身高(cm)

体重(Kg)

学历

操作

姓名

年龄

性别

出生日期

民族

身高(cm)

体重(Kg)

学历

操作

姓名

年龄

性别

出生日期

民族

身高(cm)

体重(Kg)

学历

操作

姓名

年龄

性别

出生日期

民族

身高(cm)

体重(Kg)

学历

操作

姓名

年龄

性别

出生日期

民族

身高(cm)

体重(Kg)

学历

操作

姓名

年龄

性别

出生日期

民族

身高(cm)

体重(Kg)

学历

操作

姓名

年龄

性别

出生日期

民族

身高(cm)

体重(Kg)

学历

操作

男

女

其他

博士

硕士

本科

专科

高中

中专

初中

小学

Reset

年

请选择

月

请选择

日

请选择

确定

jQuery(document).ready(function(){

$("#userBirthdayid").focus(function(){

//varoffset=this.component?this.component.parent().offset():this.element.offset();

varoffset=$(this).offset();

console.info(offset);

varpaddingTop=$("#zijixiede").css('padding-top');

console.info(paddingTop);

varheight=$(this).outerHeight(false);

console.info(height);

varwidth=$(this).outerWidth(false);

console.info(width);

varscrollTop=$(document).scrollTop();

console.info(scrollTop);

varouterHeight=$("#zijixiede").outerHeight();

console.info(outerHeight);

vartop_overflow=-scrollTop+offset.top-outerHeight;

console.info(top_overflow);

varyorient=top_overflow<0?'bottom':'top';

$("#zijixiede").addClass('datepicker-select-orient-'+yorient);

vartop=offset.top;

if(yorient==='top')

top-=outerHeight+parseInt(paddingTop);

else

top+=height;

varleft=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("拉克建档立卡京东方拉克");

//returnfalse;

});