前端之家收集整理的这篇文章主要介绍了
Jquery Easyui自定义下拉框组件使用详解(21),
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例为大家分享了Jquery Easyui自定义下拉框组件的实现代码,供大家参考,具体内容如下
加载方式
JS调用加载
自定义下拉框不能通过标签的方式进行创建。
$('#
Box').combo({
width : 300,height : 50,panelWidth : 300,panelHeight : 200,disabled : false,hasDownArrow : false,delay : 50,editable : true,readonly : false,
required : true,});
$('#
Box').combo({
required : true,onShowPanel : function () {
alert('下拉的时候触发!');
},onHidePanel : function () {
alert('下拉面板隐藏的时候触发!');
},onChange : function () {
alert('字段值改变的时候触发!');
},});
属性对象
console.log($('#
Box').combo('options'));
//返回下拉面板对象
console.log($('#
Box').combo('panel'));
//返回文本框对象
console.log($('#
Box').combo('text
Box'));
//销毁组件
$('#
Box').combo('destroy');
//禁用和启用
$('#
Box').combo('disable');
$('#
Box').combo('enable');
//调整到默认宽度
$(document).click(function () {
$('#
Box').combo('resize','width');
});
//
显示下拉面板
$(document).click(function () {
$('#
Box').combo('showPanel');
});
//隐藏下拉面板
$('#
Box').combo('hidePanel');
//启用禁用,true 可不填,false 则为不启用
$('#
Box').combo('readonly',true);
//验证文本框内的值是否合法
$(document).click(function () {
console.log($('#
Box').combo('isValid'));
});
//清空文本框
内容
$(document).dblclick(function () {
$('#
Box').combo('clear');
});
//重置文本框到初始状态
$(document).dblclick(function () {
$('#
Box').combo('reset');
});
//得到文本框字符串
$(document).click(function () {
console.log($('#
Box').combo('getText'));
});
//设置文本框字符串
$(document).click(function () {
console.log($('#
Box').combo('getText'));
});
//
获取组件的 Value 值
$(document).click(function () {
console.log($('#
Box').combo('getValue'));
console.log($('#
Box').combo('getValues'));
});
//可以使用$.fn.combo.defaults 重写默认值对象。