按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。
<a href="#" data-options="iconCls:'icon-add',group:'sex',toggle:true,iconAlign:'right'">增加部门</a><br /> <a href="#" data-options="iconCls:'icon-search',group:'sex',toggle:true"">查找部门</a><br /> <a href="#" data-options="iconCls:'icon-edit',group:'sex',toggle:true"">修改部门</a><br /> <a href="#" data-options="iconCls:'icon-remove',group:'sex',toggle:true"">删除部门</a><br /> <script> $("a").click(function(){ //获取单击的按钮的标题 var title=$(this).text(); //去空格 title=$.trim(title); alert(title); }); </script>
六、Form组件的使用
6.1 ValidateBox（验证框）
使用$.fn.validatebox.defaults重写默认值对象。
validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。
姓名:<input /><br /> 邮箱:<input /><br /> 密码:<input /> <script> $("#nameID").validatebox({ required:true, //validType:'length[1,6]' validType:['length[1,6]','chinese'], delay:200, tipPosition:'left' }); //自定义规则，验证是否为汉字 $.extend($.fn.validatebox.defaults.rules,{ chinese:{ //validator表示用户在文本框中输入的内容 validator:function(value){ var reg=https://www.jb51.net/^[\u4e00-\u9fa5]/; if(reg.test(value)){ return true; } }, //如果不符合中文规则， message:'姓名必须是中文' } }); $("#emailID").validatebox({ required:true, validType: ['length[1,30]','email'] }); $("#pwdID").validatebox({ required:true, validType: ['length[6,6]','pwdnum'] }); //自定义规则，验证是否为密码 $.extend($.fn.validatebox.defaults.rules,{ pwdnum:{ //validator表示用户在文本框中输入的内容 validator:function(value){ var reg=https://www.jb51.net/^[0-9]/; if(reg.test(value)){ return true; } }, //如果不符合中文规则， message:'密码必须为数字' } }); </script>
对于表单验证，我们可以对其进行自定义规则。这个时候如果加上正则验证，就完全可以写出一个非常好的验证功能的了。在上面的这个属性中，还可以对提示框的位置进行改变，可以使用的属性是left和right。下面图片中显示的就是一个提示框在left的情况，一般情况下使用默认的right就可以了。
6.2 ComboBox（下拉列表框）
扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。
下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。
静态方法创建：
<select> <option value="aa">aitem1</option> <option>bitem2</option> <option>bitem3</option> <option>ditem4</option> <option>eitem5</option> </select>
动态方法创建：
<input value="1"/> <script> $("#cityID").combobox({ url:"json/city.json", valueField:"id", textField:"name" }); $(function(){ $("#cityID").comcobox("setValue","长沙"); }); </script>
6.3 DateBox（日期输入框）
扩展自$.fn.combo.defaults。使用$.fn.datebox.defaults重写默认值对象。
日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。
日期：
<input type="text"></input> <script> $('#dd').datebox({ required:true }); $("#dd").datebox({ onSelect:function(mydate){ var year=mydate.getFullYear(); var month=mydate.getMonth()+1; var date=mydate.getDate(); alert(year+"年"+month+"月"+date+"日"); } }); </script>
6.4 Slider（滑动条）
使用$.fn.slider.defaults重写默认值对象。