jquery를 기반으로 아름다운 드롭다운 상자를 수정할 수 있습니다.

웹 프런트엔드 사용자 정의 컨트롤인 ComboBox(드롭다운 상자)에 대한 기사를 계속 게시합니다. 예전에 드롭다운 상자 컨트롤을 사용할 때 항상 보기 흉한 스타일 때문에 고민이었는데 이제 이 컨트롤을 공유합니다. . 유용한 동료들이 수집하거나 다시 수정하여 원하는 효과를 얻을 수 있기를 바랍니다.

사용자 정의 드롭다운 상자 분해:

1. 생성자를 만들고 할당된 컨트롤 값을 초기화합니다.

2. 바운드 컨트롤이 전경에 표시됩니다.

3. 드롭다운 상자 컨트롤을 클릭하여 드롭다운 목록을 표시합니다.

4. 드롭다운 상자 컨트롤을 트리거하고 드롭다운 목록을 축소하려면 클릭합니다.

5. 드롭다운 항목을 클릭하면 이벤트가 실행됩니다.

코드는 다음과 같습니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

css 스타일:

코드 복사 코드는 다음과 같습니다.

.dropdownspan a{float:left;Background:url(/ img/Icon_BG.png);}
/*드롭다운 상자 http://power.76741.com*/
.dropdown 범위는 {배경 위치: -213px -75px;}
입니다. dropdown{float:left;width:105px;}
.dropdown 범위{border:solid 1px #ccc;width:95%;height:28px;ground:url(/img/tbline_bg.png);border-radius: 8px;overflow:hidden;}
.dropdown 범위{float:left;padding-left:10px;line-height:28px; 커서:포인터;}
.dropdown 범위.active{border-radius:8px 8px 0px 0px;}
.dropdown 범위 글꼴 {width:auto;margin-right: 0px;float:left;}
.dropdown 범위 a{float:right;width:20px;height:20px;margin:4px 0;}
.dropdown p{border:solid 1px #ccc;border-top:0px;width:103px;display:none;position:absolute;margin-top:28px; background-color:#fff;z- index:3;max-height:280px;overflow -y: auto;overflow-x:hidden;}
.dropdown p a{float:left;line-height:28px;height:28px;padding-left:10px; color:#666;font-size:14px; 커서:default;text-align:left;width:100%;overflow:hidden;}
.dropdown p a:hover{배경:url(/img/tbline_bg.png );color:#666;}

Js 코드:

1. 사용자 정의 클래스:

코드 복사 코드는 다음과 같습니다.

//下拉框
var ComboBox = function () {
this.tag;
this.data_default;
this.data_list;
this.index = 0;

var _this = this;
var _index, _tag, _value;
//初始化
this.init = function () {
_tag = _this.tag;
_index = _this.index;
//设置对象
_this.setDropdown(_this.data_default, _this.data_list);
//赋值绑정사件
if (_tag.find('spanfont').length > 0) _value = _tag.find('spanfont').attr('_id');
if (_tag == 정의되지 않음) { return false; }
_this.showEvent();
_this.selectedIndex(_index);
참을 반환합니다.
}
//设置下拉列表
this.setDropdown = function (default_data, list) {
var css = _tag.attr('class');
if (default_data == 정의되지 않음) {
default_data = { id: 'null', 이름: '' };
}
var _html = '';
if (_tag.find('p').length > 0 && _tag.find('span').length > 0) {
$.each(list, function (i, value) {
_html = '' value.name ''
});
_tag.find('spanfont').replaceWith('' default_data.name '');
_tag.find('p').html(_html);
} else {
_html = '

';
_html = '' default_data.name '';
_html = '

';
if (목록) {
$.each(list, function (i, value) {
_html = '' value.name '< ;/a>'
});
}
_html = '

';
_html = '

';
var parent = _tag.parent();
_tag.replaceWith(_html);
_tag = parent.find('.dropdown' (css.length > 0 ? '.' css.replace(' ', '.') : ''));
}
}
//下拉事件
this.showEvent = function () {
_tag.find('span').unbind('click').click(function () {
var p = $(this).parent().find('p')
if (p.css('display') == 'block') {
p.css( '표시', '없음');
$(this).removeClass('active')
} else if (p.html().length > 0) {
p.css( '표시', '차단');
$(this).addClass('활성')
}
});
}
//选中事件
this.selectedIndex = function (index) {
_tag.find('p a').unbind('click').click(function () {
var parent = $(this).parent().parent()
//给下拉框赋值
if ($(this).text().length > 0) {
var 글꼴 = parent.find('font');
font.text($(this).text())
font.attr("_id", $(this).attr('_id' ));
_this.selectedIndexExpand(parent, $(this).index())
parent.find('span').removeClass('active')
}
부모. find('p').css('display', 'none')
});
if (_tag.find('p a').length <= _index) _index = 0;
if (_value && _value != '') {
_index = _tag.find('p a[_id="' _value '"]').index();
}
_tag.find('p a:eq(' _index ')').click();
}
//选中事件扩展
this.selectedIndexExpand = function (tag, index) { }
}

2、示例代码：

复代码 代码如下:

//http://www.naoqiu.com
var array_state = [{ id: -1, name: '状态' }, { id: 1, name: '未成功' }, { id: 2, name: '成功' }, { id: 3, name: '失败'} ];
//状态下拉控件
var select_type = new ComboBox();
select_type.tag = $('.select_type');
select_type.data_default = array_state[0];
select_type.data_list = array_state;
select_type.selectedIndexExpand = 함수(태그, 인덱스) {
//fun_Pager();
}
select_type.init();

3、示例图：