应用开发文档 OLD

# 前端控件

利用前端控件可以迅速构建交互体验佳的功能操作页面，大量的节省工作量，仅仅需要一些复制代码的操作。

[点此下载前端控件示例代码大全](http://help.metinfo.cn/upload/file/webui.zip "点此下载前端控件示例代码大全")

## 表单控件

> #### 表单代码结构

<form method="POST" class="ui-from" name="myform" action="" target="_self">
    	<div class="v52fmbx">
    		控件一
    		控件二
    		控件三
    		....
    		<dl class="noborder">
    			<dt> </dt>
    			<dd>
    				<input type="submit" name="submit" value="保存" class="submit">
    			</dd>
    		</dl>
    	</div>
    </form>
	
	
| 序号  | 控件名称  | 说明  |
| ------------ | ------------ | ------------ |
|  1 |[功能分区](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=55 "功能分区")   | 用于在单个页面中选项多的时候划分区域，提升用户体验  |
| 2  |[注意事项](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=54 "注意事项")   | 用户给用户较全面的提示信息  |
| 3  | [简短文本输入框](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=52 "简短文本输入框")  | 用于输入简短文字  |
| 4  | [ 文本输入框](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=51 " 文本输入框") |用于输入较长文字   |
| 5  | [编辑器](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=53 "编辑器")  | 加载ckeditor可见即可得编辑器  |
| 6  | [单选按钮](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=50 "单选按钮")  | 用于让用户选择一项  |
| 7  | [多选按钮](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=49 "多选按钮")  | 用于让用户可选择多个选项  |
|  8 | [下拉菜单](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=48 "下拉菜单")  | 用于让用户可以下拉选择一项  |
| 9  | [上传组件](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=47 "上传组件")  | 便于用户上传图片或文件  |
| 10  | [颜色选择器](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=46 "颜色选择器")  | 便于用户直接选择颜色  |
| 11  | [标签增加器](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=45 "标签增加器")  | 便于用户输入多个文字标签，可用于多个邮箱、关键词等等  |
| 12  | [滑块](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=44 "滑块")  | 可以让用户拖动滑块选择对应的数值  |
| 13  | [日期选择器](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=43 "日期选择器")  |  便于选择具体日期 |
| 14  | [联动菜单](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=42 "联动菜单")  |  可自定义菜单数据的联动菜单，默认包含中国城市数据 |
| 15  |[动态隐藏显示选项](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=38 "动态隐藏显示选项")   |根据单选、多选的操作实现动态显示指定选项   |
| 16  | [模态对话框](http://help.metinfo.cn/qianduan/shownews.php?lang=cn&id=30 "模态对话框")  | 可以替代alert，轻松实现更为丰富的交互体验  |