jquery に基づいて、美しいドロップダウン ボックスを 2 回変更できます_jquery

Web フロントエンド カスタム コントロール - ComboBox (ドロップダウン ボックス) についての記事を投稿し続けます。以前はドロップダウン ボックス コントロールを使用していましたが、そのスタイルが醜いことにいつも悩まされていました。有用な同僚がそれを収集したり、希望する効果を達成するために再度使用したりできることを願っています。

カスタム ドロップダウン ボックスを分解します。

1. コンストラクターを作成し、割り当てられたコントロール値を初期化します。

2. バインドされたコントロールが前面に表示されます。

3. ドロップダウン ボックス コントロールをクリックしてドロップダウン リストを表示します。

4. クリックしてドロップダウン ボックス コントロールをトリガーし、ドロップダウン リストを折りたたみます。

5. ドロップダウン項目をクリックしてイベントをトリガーします。

コードは次のとおりです:

HTML コード:

コードをコピー コードは次のとおりです:

css スタイル:

コードをコピー コードは次のとおりです:

.dropdown span a{float:left;background:url(/ img/Icon_BG.png);}
/*ドロップダウン ボックス http://power.76741.com*/
.dropdown スパン a{background-position: -213px -75px;}
。ドロップダウン{float:left;width:105px;}
.dropdown span{border:solid 1px #ccc;width:95%;height:28px;background:url(/img/tbline_bg.png);border-radius: 8px;overflow:hidden;}
.ドロップダウン スパン{float:left;padding-left:10px;line-height:28px;cursor:pointer;}
.dropdown scan.active{border-radius:8px 8px 0px 0px;}
.dropdown スパン フォント {width:auto;margin-right: 0px;float:left;}
.dropdown scan 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-インデックス:3;最大高さ:280ピクセル;オーバーフロー-y:自動;オーバーフロー-x:非表示;}
.dropdown p a{float:left;line-height:28px;height:28px;padding-left:10px; color:#666;font-size:14px; カーソル:デフォルト;テキスト配置:左;幅:100%;オーバーフロー:非表示;}
.dropdown pa:hover{background: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('span font').length > 0) _value = _tag.find('span font').attr('_id');
if (_tag == 未定義) { return false;
_this.showEvent();
_this.selectedIndex(_index);
true を返します。
}
//設置下拉列表
this.setDropdown = function (default_data, list) {
var css = _tag.attr('class');
if (default_data == 未定義) {
default_data = { id: 'null', name: '' };
}
var _html = '';
if (_tag.find('p').length > 0 && _tag.find('span').length > 0) {
$.each(list, function (i, value) {
_html = '' value.name ''
});
_tag.find('span font').replaceWith(''default_data.name'');
_tag.find('p').html(_html);
} else {
_html = '

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

';
if (リスト) {
$.each(リスト, function (i, value) {
_html = '' value.name '< ;/a>'
});
}
_html = '

';
_html = '

';
varparent = _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( 'display', 'none');
$(this).removeClass('active');
} else if (p.html().length > 0) {
p.css( '表示', 'ブロック');
$(this).addClass('active');
}
//选中イベント
this.selectedIndex = function (index) {
_tag.find('pa').unbind('click').click(function () {
varparent = $(this).parent().parent();
//给下拉框赋值
if ($(this).text().length > 0) {
var font =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('表示', 'なし');
if (_tag.find('pa').length if (_value && _value != '') {
_index = _tag.find('pa[_id="' _value '"]').index();
}
_tag.find('pa: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、例図：