自定义下拉框ComboBox
现在使用各种系统和浏览器的上网用户都一大堆,为了统一网站样式,也少不了自定义控件。
因考虑到门户站,也特别引入皮肤功能,已使用于任意网站或页面。
此控件从jquery扩展出来,已在我架构的两个行业门户站使用两年,但我觉得它还有需要改进的地方,欢迎各位提出改进意见。
?(function ($) {
/*
callback:{selectedIndex:int, selectedValue:string, selectedText:string}
*/
$.fn.comboBox = function (options, callback) {
var defaultOptions = {
width: 120, //下拉框宽度
type: '', //显示方式 html/input
writeable: true, //表单是否可写
data: null, //数据源 [{"name":"item 1","value":"value1"},{"name":"item 2"}]
selected: null, //当前选择项
value: null //当前选中值
};
var options = $.extend(defaultOptions, options);
var container = this;
this.each(function () {
var html = '';
html += '<div class="combo_title">';
html += '<div class="combo_t_l"></div>';
if (options.type == 'input') {
html += '<div class="combo_t_txt"><input';
if (options.writeable == false) {
html += ' readonly="readonly"';
}
html += ' name="' + (container.attr('name') || '') + '" class="input_txt" type="text" value="' + container.text().replace(/ /g, '') + '"/></div>';
} else {
html += '<div class="combo_t_txt">' + container.text().replace(/ /g, '') + '</div>';
}
html += '<div class="combo_t_r"></div>';
html += '</div>';
var default_title = '', default_value = '';
var selected = 0;
if (options.data != null) {
var items = typeof options.data === 'string' ? eval(options.data) : options.data;
html += '<div class="combo_items">';
html += '<ul>';
for (var i = 0; i < items.length; i++) {
if (options.value == items[i].value && options.value != '') {
html += '<li class="selected" val="' + items[i].value + '">' + items[i].name + '</li>';
default_title = items[i].name;
default_value = items[i].value;
selected++;
} else {
html += '<li val="' + items[i].value + '">' + items[i].name + '</li>';
}
}
html += '</ul>';
html += '</div>';
}
container.html(html).addClass('combo_container');
if (selected == 0) {
var selectedItem = container.find('.combo_items').children().children('li').eq(options.selected);
selectedItem.addClass('selected');
default_title = selectedItem.text();
default_value = selectedItem.attr('val');
}
if (default_title != '') {
setTitle(default_title);
setValue(default_value);
&nbs
补充:web前端 , JavaScript ,