下拉框封装

最新推荐文章于 2024-02-21 17:01:41 发布

原创最新推荐文章于 2024-02-21 17:01:41 发布 · 914 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

2 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

封装的原因肯定是各种变态需求

上图，左边是下拉框，右边是封装的控件

如何修改黑点背景色，那只能封装一个控件了

分三步解决这个问题，写HTML/CSS/JS
步骤分解：
1、布局好你想呈现的效果，JS控制它什么时候显示隐藏
2、隐藏好下拉框，用布局好的标签显示于当前下拉框的位置上
3、点击选中项则改变下拉框的值

index.html：

<!DOCTYPE html>

< html lang = "en" xmlns = "http://www.w3.org/1999/xhtml" >

< head >

< meta charset = "utf-8" />

< title > 下拉框控件 </ title >

< link href = "Scripts/dropdown/dropdown.css" rel = "stylesheet" />

< script type = "text/javascript" src = "Scripts/jquery-1.8.3.min.js" > </ script >

< script type = "text/javascript" src = "Scripts/dropdown/dropdown.js" > </ script >

</ head >

< body >

< select class = "dropdownlist" id = "DDLCSList" name = "DDLCSList" >

< option value = "0" > 请选择客服 </ option >

< option value = "17" > 哈希小小在厅要 </ option >

< option value = "18" >CC22 工 </ option >

</ select >

</ body >

</ html >

dropdown.css：

.dropdownlist { display: none; }

.combo { position: relative; border: 1 px solid #e66021; display: inline-block; height: 26 px; line-height: 26 px }

.combo-text { line-height: normal; border: 0 px solid #e66021; padding: 3 px 0 3 px 3 px; font-size: 14 px; color: #e66021; cursor: default; }

.combo-icon { background: url( 'images/combo_icon.png' ) no-repeat scroll 0 0; position: absolute; top: 10 px; right: 5 px; width: 9 px; height: 8 px; }

.combo-pl { border: 1 px solid #3399ff; border-radius: 0; margin: 0; overflow: hidden; text-align: left; background-color: #fefffd; }

.combo-item { padding: 3 px 0 3 px 3 px; font-size: 14 px; color: #e66021; background-color: #fefffd; cursor: default; }

.combo-item :hover { background-color: #3399ff; color: #fff; }

.combo-item-selected { background-color: #ffe48d; color: #535353; }

dropdown.js：

$ ( function ( ) {

$ ( ".dropdownlist" ) . each ( function ( ) {

var $currentObj = $ ( this ) ;

$currentObj . hide ( ) ;

var width = $currentObj . width ( ) ;

var height = $currentObj . height ( ) ;

var span_combo = document . createElement ( "span" ) ;

$ ( span_combo ) . addClass ( "combo" ) ;

$ ( span_combo ) . css ({

width : width + 10

}) ;

var input_combo = document . createElement ( "span" ) ;

$ ( input_combo ) . addClass ( "combo-text" ) ;

$ ( input_combo ) . css ({

width : width - 20 ,

height : height - 6

}) ;

var defaultOption = $currentObj . find ( "option:selected" ) . length == 1 ? $currentObj . find ( "option:selected" ) : $currentObj . find ( "option" ) . first ( ) ;