easyui-layout系列之表单一(2)
表单在我们的开发过程非常的常见,easyUI给我们提供了非常方便快捷的表单开发工具,使用熟练可以大大的提高后台开发速度,非常有必要熟练掌握。
1、Textbox-文本框
扩展自$.fn.validatebox.defaults,使用$.fn.textbox.defaults重写默认值对象。
TextBox(文本框)是一个增强的输入字段组件, 它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件,如:combo,databox、spinner等
通过标签创建文本框。
<input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">
使用Javascript创建文本框。
<input id="tb" type="text" style="width:300px">
$('#tb').textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left'
})
属性
label->string,selector:文本框标签
$('#email').textbox({
label: 'Email:'
labelPosition: 'top',
prompt: 'Ent'
});
icons->array:在文本框删贡献是图标。每一项都有以下属性:
iconCls:类型string,图标的class名称;
disabled:类型boolean,指明是否禁用该图标;
handler:类型function,用于处理点击该图标以后的动作。
$('#tb').textbox({
icons: [{
iconCls:'icon-add',
handler: function(e){
$(e.data.target).textbox('setValue', 'Something added!');
}
},{
iconCls:'icon-remove',
handler: function(e){
$(e.data.target).textbox('clear');
}
}]
})
事件
事件扩展自validatebox,以下是新增的文本框事件。
方法
方法扩展自validatebox,以下是新增的文本框方法。
options->none:返回属性对象
textbox->none:返回文本框对象
var t = $('#tt');
t.textbox('textbox').bind('keydown', function(e){
if (e.keyCode == 13){ // 当按下回车键时接受输入的值。
t.textbox('setValue', $(this).val());
}
});
readonly->mode:启用/禁用只读模式。
$('#tb').textbox('readonly'); // 启用只读模式
$('#tb').textbox('readonly',true); // 启用只读模式
$('#tb').textbox('readonly',false); // 禁用只读模式
2、tagbox-标签框
扩展自$.fn.combobox.defaults,使用$.fn.tagbox.defaults重写默认值对象。(该组件自1.5.1版开始可用)
TagBox(标签框)扩展自combobox, 他包含combobox的所有功能。TagBox允许用户将输入内容显示在标签框中,而不是显示在输入框中。
通过标签创建文本框。
<input class="easyui-tagbox" value="Apple, Orange" label="Add a tag" style="width:100%">
使用Javascript创建文本框。
<input id="tb" type="text" style="width:300px">
$('#tb').tagbox({
label:'Add a tag',
value:['Apple', 'Orange']
})
属性
标签框属性扩展自 combobox (标签框),
hasDownArrow-》boolean:定义是否显示向下的箭头
tagFormatter-》function(value,row):该格式化器用于格式化返回值。
$('#tb').tagbox({
tagFormatter: function(value,row){
var opts = $(this).tagbox('options');
return row ? row[opts.textField] : value;
}
});
tagStyler-》function(value,row):该格式化器用于格式化标签样式,返回自定义标签样式字符串。
$('#tb').tagbox({
tagStyler: function(value){
if (value == 3){
return 'background:#ffd7d7;color:#c65353';
} else if (value == 4){
return 'background:#b8eecf;color:#45872c';
}
}
});
事件
事件扩展自 combobox
3、Calendar-日历
通过 $.fn.calendar.defaults 重写默认的 defaults。
日历(calendar)显示允许用户选择日期的一个月份日历,并允许移动到上一月和下一页。默认情况下,每星期的第一天设置为星期日。这可以通过设置 'firstDay' 属性的值来改变。
从标记创建日历(calendar)。
<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
javascript创建日历
<div id="cc" style="width:180px;height:180px;"></div>
$('#cc').calendar({
current:new Date()
});
属性
事件
onSelect-》date:当用户选择一个日期时触发。
$('#cc').calendar({
onSelect: function(date){
alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
}
});
方法
easyui-layout系列之表单一(2)的更多相关文章
- 解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象
之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的f ...
- atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证
atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...
- easyui layout 收缩的bug
easyui layout提供collapse方法折叠指定的 panel,'region' 参数可能的值是:'north'.'south'.'east'.'west',但是在 IE6的环境下,调用这个 ...
- BootStrap 智能表单系列 九 表单图片上传的支持
本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...
- BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
- BootStrap 智能表单系列 五 表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
- BootStrap 智能表单系列 四 表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...
- MVC下form表单一次上传多种类型的图片(每种类型的图片可以上传多张)
form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( ) { in ...
- 【SqlServer系列】表单查询
1 概述 如下几个问题,如果你能解决,请继续往下看,若不能解决,请先复习SQL基础知识,再来阅读本篇文章.本篇文章深度中等左右. Q1:表StudentScores如下,用一条SQL语句查询出每门 ...
随机推荐
- UVa 12100 Printer Queue(queue或者vector模拟队列)
The only printer in the computer science students' union is experiencing an extremely heavy workload ...
- 带最小值操作的栈 · Min Stack
[抄题]: 实现一个带有取最小值min方法的栈,min方法将返回当前栈中的最小值. 你实现的栈将支持push,pop 和 min 操作,所有操作要求都在O(1)时间内完成. [思维问题]: [一句话思 ...
- js Function 函数
函数 var abs = function (x) { if (x >= 0) { return x; } else { return -x; } }; 函数体内部的语句在执行时,一旦执行到re ...
- mybatis框架的架构(图解)
1. mybatis配置 SqlMapConfig.xml,此文件作为mybatis的全局配置文件,配置了mybatis的运行环境等信息. mapper.xml文件即sql映射文件,文件中配置了操作数 ...
- C#调用默认浏览器打开网页的几种方法
private void button1_Click(object sender, EventArgs e) { //从注册表中读取默认浏览器可执行文件路径 RegistryKey key = Reg ...
- c++ 自动对象
转自: https://www.cnblogs.com/geloutingyu/p/8034904.html 1.自动对象默认情况下,局部变量的生命期局限于所在函数的每次执行期间.只有当定义它的函数被 ...
- url传递数据
一.post传递数据 $ci = curl_init($url); curl_setopt($ci, CURLOPT_HEADER, 0); curl_setopt($ci, CURLOPT_RETU ...
- Java NIO系列教程(十一) Java NIO 与 IO
Java NIO系列教程(十一) Java NIO与IO 当学习了 Java NIO 和 IO 的 API 后,一个问题马上涌入脑海: 我应该何时使用 IO,何时使用 NIO 呢?在本文中,我会尽量清 ...
- 从Adobe调查问卷看原型设计工具大战
近年国内外原型设计工具新品频出,除了拥趸众多的老牌Axure在RP 8之后没有什么大的动作,大家都拼了命地在出新品.今天 inVision 的 Craft 出了 2.0 的预告视频,明天 Adobe ...
- 彻底测试全部拷贝list相关操作的区别python
1.用浅拷贝后修改数字,可以起到与原数据分离的效果 import copy origin = [, , [, ]] #origin 里边有三个元素:, ,[, ] cop1=origin.copy() ...