easyui源码翻译1.32--Combo(自定义下拉框)
2013-12-28 22:55
309 查看
前言
扩展自$.fn.validatebox.defaults。使用$.fn.combo.defaults重写默认值对象。下载该插件翻译源码自定义下拉框显示一个可编辑的文本框和下拉面板在html页面。这是构建其他复杂的组合部件(如:combobox,combotree,combogrid等)之前需要构建的最基本的组件
依赖关系
[align=left]validatebox[/align][align=left]panel[/align]
源码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Combo - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script> <script src="../../plugins2/jquery.parser.js"></script> <script src="../../plugins2/jquery.validatebox.js"></script> <script src="../../plugins2/jquery.panel.js"></script> <script src="../../plugins2/jquery.combo.js"></script> </head> <body> <h2>Basic Combo</h2> <div class="demo-info" style="margin-bottom:10px"> <div class="demo-tip icon-tip"></div> <div>Click the right arrow button to show drop down panel that can be filled with any content.</div> </div> <select id="cc" style="width:150px"></select> <div id="sp"> <div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div> <input type="radio" name="lang" value="01"><span>Java</span><br/> <input type="radio" name="lang" value="02"><span>C#</span><br/> <input type="radio" name="lang" value="03"><span>Ruby</span><br/> <input type="radio" name="lang" value="04"><span>Basic</span><br/> <input type="radio" name="lang" value="05"><span>Fortran</span> </div> <script type="text/javascript"> $(function(){ $('#cc').combo({ required:true, editable:false }); $('#sp').appendTo($('#cc').combo('panel')); $('#sp input').click(function(){ var v = $(this).val(); var s = $(this).next('span').text(); $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel'); }); }); </script> </body> </html>
View Code
插件效果
![](http://images.cnitblog.com/blog/353349/201312/28225442-aa3bb1c89a0c468daf9a3a94dacf12dc.png)
相关文章推荐
- easyui源码翻译1.32--ComboGrid(数据表格下拉框)
- easyui源码翻译1.32--ComboTree(树形下拉框)
- easyui源码翻译1.32--SearchBox(搜索框)
- easyui源码翻译1.32--panel(面板)
- easyui源码翻译1.32--ComboBox(下拉列表框)
- easyui源码翻译1.32--Draggable(拖动)
- easyui源码翻译1.32--Slider(滑动条)
- easyui源码翻译1.32--Droppable(放置)
- easyui源码翻译1.32--Dialog(对话框窗口)
- easyui源码翻译1.32--EasyLoader(简单加载)
- easyui源码翻译1.32--SplitButton(分割按钮)
- easyui源码翻译1.32--Form(表单)
- Easyui1.32源码+API翻译全篇导航
- easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)
- easyui源码翻译1.32--TimeSpinner(时间微调)
- easyui源码翻译1.32--Window(窗口)
- easyui源码翻译1.32--TreeGrid(树形表格)
- easyui源码翻译1.32--ValidateBox(验证框)
- easyui源码翻译1.32--Layout(布局)
- easyui源码翻译1.32--datagrid(数据表格)