目录
4.3.1、无数据 4.3.2、table列表 4.3.3、拖动排序 4.3.4、与列表配合的按钮 4.3.5、下载按钮
5.1、form 5.2、验证规则 5.3、普通输入框 5.4、输入框特效 5.5、checkbox，radio
5.6、多选或单选下拉框 5.7、图片上传 5.8、弹出层特效 5.9、树形结构 5.10、富文本编辑器
5.11、文本信息展示 5.12、按钮克隆 5.13、省市级联动 5.14、自定义按钮操作 5.15、返回上一页按钮
6.1、打开标签按钮 6.2、打开标签链接 6.3、表单页面
一、文件夹说明
1、ajax内放置的PHP文件，是用于js的ajax请求返回的json数据。并约定了返回参数的格式：
$result = array( 'msg' => '操作成功！', 'result' => '1', 'data' => array()//额外附加值 ); echo json_encode($result);
result操作码：
1：请求成功
0：请求失败
2：跳转到登录页面
2、font-awwsome中放置的是自定义字体，目前使用的是3.2.1版本。可以在此查看更多的icon。如果这个页面打开慢的话，可以打开这个页面，例如想要使用
字体，直接像下面这样写就可以了。
<i class="icon-user"></i>
3、images文件夹中是一些网站需要的图片，例如logo图片，样式需要的图片等。
4、php文件下面，现在放的是图片上传的php代码，初始化ueditor编辑器的代码，将来可以把一些通用的功能代码放在这里。
顺带便说下，我这边是将图片单独保存在一张image表中，保存到数据库后返回该图片的自增长ID。图片数据表结构如下：
CREATE TABLE `image` ( `image_id` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `image_hash` char(32) DEFAULT NULL COMMENT '图片指纹', `image_type` tinyint(3) unsigned DEFAULT NULL COMMENT '图像类型', `image_size` char(20) DEFAULT NULL COMMENT '图像大小', `image_width` char(20) DEFAULT NULL, `image_height` char(20) DEFAULT NULL COMMENT '图片高度', `image_url` varchar(45) DEFAULT NULL, `image_created` int(10) unsigned DEFAULT '0' COMMENT '图像上传时间', PRIMARY KEY (`image_id`) )
5、resource文件夹，是放置些demo图片、demo文件等信息。例如轮询的图片，到时候是从数据库中读取，我现在这边的话可以直接写死。
6、scripts中放的是脚本文件，到时候html只需要引用app文件夹中的文件。
<script src="scripts/libs/require/require.js" type="text/javascript" data-main="scripts/app/home/main"></script>
每次复制脚本文件有一个地方需要注意下，就是util/const.js文件，里面有几项是需要实际配置的。
define(function() { window.UEDITOR_HOME_URL = '/scripts/libs/ueditor/';//编辑器脚本文件目录 /* * 测试环境使用 */ // window.UEDITOR_HOME_URL = '/huali_admin/scripts/libs/ueditor/'; var constUtil = { domain : 'http://' + window.location.host + '/', domain_admin : 'http://' + window.location.host + '/', domain_scripts : 'http://' + window.location.host + '/scripts/', /* * 测试环境使用 */ // domain : 'http://' + window.location.host + '/huali_admin/', // domain_admin : 'http://' + window.location.host + '/huali_admin/', // domain_scripts : 'http://' + window.location.host + '/huali_admin/scripts/', //web主页面 webHome : '', //ajax操作 ajaxLogin : 'ajax/operate.php',//登录 ueditorUpload: 'php/action_upload.php',//ueditor编辑器上传地址 ajaxHomeOrder: 'ajax/home_order.php',//控制面板ajax获取订单 ajaxHomeUser: 'ajax/home_user.php',//控制面板ajax获取用户 ajaxHomeChart: 'ajax/home_chart.php',//控制面板ajax获取图表 }; return constUtil; });
7、styles中放置的是CSS文件，使用了bootstrip框架，2.3.2版本，matrix开头的三个文件就是自定义的代码，网上有个开源的matrix模版，我拿来做了些修改。
几个通用的地方修改：数字为相应的行数
图片：logo.png
matrix-media.css
1 5 17 26 34
matrix-style.css
57 106 111 127 168
images、styles中以-org结果的文件，以及以-org为结尾的html文件，就是最初的版本样式。如下图所示：
8、test文件夹下面是用jasmine搭的单元测试环境，可以在这里对脚本文件做些简单的单元测试
二、HTML基本结构
写服务器端代码的时候，肯定是需要使用模版的，我以前是做了两套套模版，内部登录后的页面、弹出层与登录通用页面。
1）respond.js文件不能少，这是让IE8等不支持媒体查询的浏览器也能支持@media属性。
2）scripts这个文件夹名字可以做成一个常量，因为在发布的时候会将scripts改成optimize。
3）发布的时候要做脚本压缩，脚本合并等一系列操作。
4）弹出层页面如要要加个关闭按钮，如下代码所示，注意加个name="close"
<button class="btn" name="close" type="button">关闭</button>
通用模版代码如下所示：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf-8"> <title>选择品类</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="styles/bootstrap.css" type="text/css" rel="stylesheet"> <link href="styles/bootstrap-responsive.css" type="text/css" rel="stylesheet"> <link href="styles/matrix-style.css" type="text/css" rel="stylesheet"> <link href="font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet"> <!--树形结构插件样式 可酌情添加--> <link href="scripts/libs/ztree/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="scripts/libs/modernizr/modernizr.js"></script> <!--[if lte IE 8]> <script src="scripts/libs/respond/respond.js" type="text/javascript"></script> <![endif]--> <script type="text/javascript" src="scripts/config.js"></script> </head> <body> <!-- 各自页面的代码可以在这里输出--> <script src="scripts/libs/require/require.js" type="text/javascript" data-main="scripts/app/form_layer/main"></script> </body> </html>
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>用户</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="styles/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="styles/bootstrap-responsive.css" /> <link rel="stylesheet" type="text/css" href="styles/matrix-style.css" /> <link rel="stylesheet" type="text/css" href="styles/matrix-media.css" /> <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css"/> <link rel="stylesheet" type="text/css" href="styles/google-fonts.css"/> <!-- 通知窗提示样式,可酌情引用--> <link rel="stylesheet" type="text/css" href="scripts/libs/gritter/css/jquery.gritter.css"/> <!-- 美化下拉框的样式,可酌情引用--> <link rel="stylesheet" type="text/css" href="scripts/libs/select2/css/select2.css"/> <!-- 美化表单中input checkbox radio等控件样式,可酌情引用--> <link rel="stylesheet" type="text/css" href="scripts/libs/uniform/themes/default/css/uniform.default.css"/> <!-- 上传插件的样式,可酌情引用--> <link rel="stylesheet" type="text/css" href="scripts/libs/uploadify/css/uploadify.css"/> <!--[if lte IE 8]> <script src="scripts/libs/respond/respond.js" type="text/javascript"></script> <![endif]--> <!-- 检测CSS3属性支持的插件，让IE8等浏览器支持HTML5的标签--> <script src="scripts/libs/modernizr/modernizr.js" type="text/javascript"></script> <script src="scripts/config.js" type="text/javascript"></script> <!-- 日历插件,可酌情引用--> <script src="scripts/libs/My97DatePicker/WdatePicker.js" type="text/javascript"></script> </head> <body> <!--Header-part LOGO背景图片--> <div id="header"> <h1><a href="dashboard.html">Huali</a></h1> </div> <!--close-Header-part--> <!--top-Header-menu 顶部菜单--> <div id="user-nav" class="navbar navbar-inverse"> <ul class="nav"> <li class="dropdown" id="profile-messages" ><a title="" href="#" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle"><i class="icon-user"></i> <span class="text">欢迎admin</span><b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-user"></i> 我的信息</a></li> <li class="divider"></li> <li><a href="login.html"><i class="icon-key"></i> 退出登录</a></li> </ul> </li> <li class=""><a title="" href="login.html"><i class="icon-share-alt"></i> <span class="text">退出登录</span></a></li> </ul> </div> <!--close-top-Header-menu--> <!--sidebar-menu，侧边栏菜单--> <div id="sidebar"> <ul> <li><a href="index.html"><i class="icon-home"></i> <span>控制面板</span></a> </li> <li><a href="user_list.html"><i class="icon-signal"></i> <span>用户</span></a> </li> <li class="active"><a href="menu.html"><i class="icon-inbox"></i> <span>菜单管理</span></a> </li> <li><a href="add_user.html"><i class="icon-th"></i> <span>新建用户</span></a></li> <li class="submenu"> <a href="#"><i class="icon-fullscreen"></i> <span>订单打印</span></a> <ul> <li><a href="error403.html">打印组<span class="label label-important">4</span></a></li> <li><a href="error404.html">打印队列</a></li> </ul> </li> </ul> </div> <!--sidebar-menu--> <!--main-container-part--> <div id="content"> <!--breadcrumbs面包屑导航--> <div id="content-header"> <div id="breadcrumb"> <a href="index.html" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 控制面板</a> <a class="current" href="#">用户</a> </div> </div> <!--End-breadcrumbs--> <div class="container-fluid"> <section class="row-fluid"> <!--不同页面的输出在这里--> </section> </div> </div> <!--end-main-container-part--> <!--Footer-part--> <div class="row-fluid"> <div id="footer" class="span12"> 2015 © Huali Admin. Brought to you by</div> </div> <!--end-Footer-part--> <!--提示正在载入中的效果--> <aside class="mask_layer"> <p>正在加载中...</p> <div class="spinner_rect"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </aside> <!--美化select、checkbox、radio等的样式需要引入下面的四个脚本，可酌情添加--> <script src="scripts/libs/jquery/jquery.js" type="text/javascript"></script> <script src="scripts/libs/uniform/jquery.uniform.js" type="text/javascript"></script> <script src="scripts/libs/select2/select2.js" type="text/javascript"></script> <script src="scripts/views/util/formView.js" type="text/javascript"></script> <!--每个页面需要引入的脚本，根据页面不同，设置的data-main也不同--> <script src="scripts/libs/require/require.js" type="text/javascript" data-main="scripts/app/com/main"></script> </body> </html>
data-main有以下几种选择：
| com | 通用，如果这个页面没有特殊的脚本特效就直接引用它 |
| form | 通用表单脚本，在表单页面引用这个文件，可以有验证提示效果，ajax的submit提交 |
| form_layer | 弹出层的通用表单效果 |
| list | 通用列表页面效果，列表页面通常有全选，删除等操作 |
| public | 通用未登录情况下的脚本特效，现在有登录效果 |
| home | 控制面板页面的特效，有图表等，比较特殊，所以单独列出 |
| menu | 菜单页面特效 |
| crop | 图片裁剪效果 |
三、控制面板主页
要约定下数据读取的格式，这里我用的插件是ECharts，国产的插件。洋文不好也不要紧啦。查看下ajax下的home_chart.php文件：
$result = array( 'msg' => '获取成功！', 'result' => '1', 'data' => array( 'user_num' => array(32,45,10,100), 'order_num' => array(56,10,44,65), 'date' => array('2015-1-1','2015-1-2','2015-1-3','2015-1-4') ) );
主要也还是ajax读取后的数据约定，只是多了个分页信息，以后的ajax分页就全部使用这种格式了：
$data = array( 'list' => array( array( 'email'=>'demo2@hua.li1', 'create_time' => '1月26日 10:11', 'log_count' =>'11', ), array( 'email'=>'demo2@hua.li1', 'create_time' => '1月26日 10:11', 'log_count' =>'11', ) ), 'page' => array( 'total' => 12322, 'numbers' => array(2,3,4,5,6,7,8,9), 'last' => 1,//当为0的时候就是不可点击 'next' => 9, 'current' => 6 ) );
四、列表页面
列表页面有三块，第一块是按钮，第二块是过滤，第三块是列表。
1）下面那个蓝色按钮就是这么写出来的，其实还有多种颜色可以选择，点击查看更多。
2）只要修改btn-primary为btn-block或其他就能改变颜色，还能改变大小。
<div> <a href="teacher/add" class="mr5 btn btn-primary" >新建用户</a> </div>
1）用了个form的get提交
2）未完成已完成那个用了btn-group的样式
3）邮箱那个使用了单独的一列，就用来<div class="ovh">包。注意下select控件的外面包了个div并控制了宽度，不这样的话，下拉框会占满整行
4）时间使用了日期插件My97DatePicker，点击查看插件配置。
<form method="get" accept-charset="utf-8"> <article class="widget-box"> <section class="widget-content"> <div class="controls controls-row"> <div class="btn-group mb10" data-toggle="buttons-radio"> <a href="#" class="btn btn-info">未完成(100)</a> <a href="#" class="btn btn-info">已完成(2)</a> <a href="#" class="btn btn-info active">已退货(21)</a> </div> <div class="ovh"> <div class="span1"> <select name="filter"> <option value="0">包含</option> <option value="1">等于</option> <option value="2">开头</option> <option value="3">完与</option> </select> </div> <input type="text" class="span3" placeholder="请输入邮箱" name="email"> </div> <input type="text" class="span2" placeholder="开始注册时间" name="start" onClick="WdatePicker()"> <input type="text" class="span2" placeholder="结束注册时间" name="end" onClick="WdatePicker()"> <button class="btn btn-success span1" type="submit" name="">查询</button> <a href="#" class="btn ml5">清除条件</a> </div> </section> </article> </form>
每个列表外面都是套了个widget-box的。包括分页也是包在里面的
<div class="widget-box"> <div class="widget-content"> <table class="table table-bordered table-striped table-hover"> ..... </table> </div> </div>
列表有两种情况，一种是有数据，一种是没有查到数据。
<div class="alert alert-info alert-nolist"> <h4 class="alert-heading">暂无数据</h4> </div>
1.checkbox可以全选
2.根据顶部栏目排序，排序后将改变icon，从
变为
3.标签颜色，有九种，本来只有有6种，后面我又自己加了三种。除了是有圆角的，还有一种是没有圆角的，点击查看更多元素。
4.th中的width根据实际情况来配置，百分比
5.通用删除按钮，也可以作为一个能弹出提示框的按钮
一定要有data-type=del属性和data-href属性，当把列表的最后一行删除后，将会自动刷新整个页面
data-type：按钮类别，这里必须是del
data-href：删除的地址
data-prompt：点击删除的提示语句
data-reload：是否在操作成功后刷新页面【true或false】
如果在删除的时候还要传其他参数，只有再自定义data-开头的属性即可，如果仅仅作为提示按钮，不需要ajax操作的，就可以不需要输入data-href
<a data-id="554b3891b743424a578b4695" data-name="xx" class="mr5" data-href="ajax/operate.php" data-type="del" href="javascript:void(0)" data-prompt="您确定这个订单吗？">删除</a>
1.data-type：给需要拖动的位置增加这个属性，并且必须是dragsort
2.data-ajax：拖动完成后需要做的ajax请求地址
3.data-sort：排序号
4.data-td：更新排序后可能需要修改某列的排序内容，这里可以设置第几列，从0开始计算
4.tr中还可以有其他自定义的data属性，tbody也可以自定义自己的data属性
5.当拖动完后做请求，对于原先位置的属性会增加"origin_"前缀，例如原先位置会有id和sort属性，请求的时候会变成如下图所示
5.正在拖动的那行，属性会增加"current_"前缀，例如原先位置会有sort属性，请求的时候会变成如下图所示
6.返回中将ids与sort，一并返回，并对应
<tbody data-type="dragsort" data-ajax="ajax/sort.php"> <tr data-sort="1" data-id="1"> <td>iris@hua.li</td> <td>客服</td> <td>2015年1月22日 15:33</td> </tr> <tr data-sort="2" data-id="2"> <td>iris@hua.li</td> <td><span class="badge">客服</span></td> <td>2015年1月22日 15:33</td> </tr> </tbody>
$result = array( 'msg' => '操作成功！', 'result' => '1', 'data' => array( 'sort' => array(1,2,3,4,5,6,7,8,9,10),//重新排序后的数据 'ids' => array(1,2,3,4,5,10,6,7,8,9)//排序对应的ID ) );
列表页面的按钮，可以与表格中的多选框配合使用，例如多选删除等。
1.data-type：必须是listbtn
2.data-ajax：ajax请求的地址
3.data-reload：是否在请求成功后刷新当前页面
4.data-column：ajax中传送多选框value的参数名，默认是“ids[]”
5.data-confirm：确认框中的提示信息，例如多选删除的时候，先弹出警示信息，确认一下
6.id：此按钮必须设置id值，因为要与下面的checkbox中的“data-btn”属性对应起来
<button id="delete" class="btn span2" type="button" data-type="listbtn" data-ajax="ajax/operate.php" data-reload="false" data-column="ids[]" data-confirm="弹出确认框">删除所有</button> <table> <tbody> <tr> <td><input type="checkbox" value="1" data-btn="delete" /></td> <td>iris@hua.li</td> <td>客服</td> <td>2015年1月22日 15:33</td> </tr> </tbody> </table>
1.data-type：必须是download
2.data-url：下载地址
3.data-btn：过滤条件标签ID，多个标签用逗号隔开
五、表单页面
整个自定义的输入代码是被一个form表单包住的，之所以这样是因为有多个块，如下图的矩形图片和弹出层就是两个块。
1）class属性一定要有form-horizontal，而validate是需要验证的表单就加上，不需要的就不要加，但应该大部分都是需要验证的
2）data-type：有选项form，目前仅仅用来控制返回上一页，当在表单页面的时候，，点击返回按钮，如果数据改变将给与提示
3）data-uploadify：file控件的ID值，使用的插件是uploadify，做了些自定义的封装
4）data-ueditor：textarea控件的ID值，使用的插件是ueditor，也做了些自定义封装
5）data-hiddeniframe：button控件的ID，使用的插件是artDialog，也做了些自定义封装
6）data-city：省市级联动的设置，将省下拉框的name放在这里就可形成联动特效，多个用“,”分割
7）data-href：提交成功后将会跳转的页面地址
8）data-ztree-checkbox：树形结构的ID，多个用逗号分割
9）data-layer：是否是弹出层页面，可输入【true，false】，如果是弹出层，脚本就要做关闭层的操作
10）data-prompt-id：提交按钮旁边错误提示标签的ID（保证当前页面唯一），目前一个form里只能有一个错误提示
11）data-prompt-error：在保存按钮旁边是有一个提示块的，这个是控制表单验证的时候是否只显示提示块，可输入【true，false】
在弹出层出看起来比较清晰，下面的两个提示都显示了出来，但其实只要显示一个就可以了，而这个属性就是用来控制只显示下面的。第二张图就是设置了true的情况
12）矩形图片与弹出层是两个块，注意到了哇，每个块就是一个section，class="widget-box"，请看下面的代码示例
<form id="validate" class="form-horizontal validate" method="post" data-uploadify="upload_images,cover" data-ueditor="txtContent" data-hiddeniframe="selectCategory" data-href="home.html"> <section class="widget-box"> <header class="widget-title"> <span class="icon"><i class="icon-align-justify"></i></span> <h5>矩形图片</h5> </header> <div class="widget-content nopadding"> <!--控件内容写在这里--> </div> </section> <section class="widget-box"> <header class="widget-title"> <span class="icon"><i class="icon-align-justify"></i></span> <h5>弹出层</h5> </header> <div class="widget-content nopadding"> <!--控件内容写在这里--> </div> </section> </form>
1）给控件加上某个验证规则属性，这个控件就能被验证了
2）而对应的以-message结尾的属性是设置提示语。例如data-required-message=“请输入XXX”
| 属性名 | 描述 | 输入值 |
| data-value-not-equals | 验证与设置的值不相等 | string |
| data-is-time | 验证时间格式符合（12:00） | boolean |
| data-required | 验证必填 | boolean |
| data-email | 验证是邮箱格式 | boolean |
| data-url | 验证是正确的网址 | boolean |
| data-date-i-s-o |
输入正确格式的日期(ISO) 例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 |
boolean |
| data-number | 输入合法的数字(负数，小数) | boolean |
| data-digits | 输入整数 | boolean |
| data-creditcard | 输入合法的信用卡号 | boolean |
| data-equal-to | 输入值必须和设定的值相同 | string |
| data-maxlength |
当设置为5的时候 输入长度最多是5的字符串(汉字算一个字符) |
int |
| data-minlength |
当设置为10的时候 输入长度最小是10的字符串(汉字算一个字符) |
int |
| data-rangelength |
当设置为[5,10] 输入长度必须介于 5和10 之间的字符串")(汉字算一个字符) |
[int,int] |
| data-range |
当设置为[5,10] 输入值必须介于 5和10 之间 |
[int,int] |
| data-max | 当设置为5的时候，输入值不能大于5 | int |
| data-min | 当设置为10的时候，输入值不能小于10 | int |
| data-regexp-to | 自定义正则表达式，例如“\d+” | string |
| data-confirm-to | 输入需要对比的内容的控件ID，例如密码确认 | string |
1）每个控件都会被fieldset包着，下面的checkbox、radio等也是要包着的
2）然后有个label标题，如是要必填的，就加个*号，并附上样式
3）有些时候会加上些说明，这个时候就可以加上<span class="help-block">，不光是输入控件，select，checkbox等都可以有
4）每个要提交的控件都需要有name属性
5）data-minlength、data-maxlength是要验证的规则，还有其他很多规则，可根据具体情况选用不同规则，而对应的有个-message结尾的就是对应的错误提示。
6）textarea与input差不多
7）控件被class为controls的div包着，而label是控件的标签名
8）checkbox和radio都要被label包起来<label>xxx</label>
<fieldset class="control-group"> <label class="control-label"> <span class="must_label">*</span>英文名 </label> <div class="controls"> <input type="text" class="span4" name="english" data-minlength="1" data-maxlength="10" data-minlength-message="长度不能短于1" data-maxlength-message="长度不能长于10"/> <span class="help-block">请输入1--10个字母</span> </div> </fieldset>
1）有时候需要检查昵称是否存在啊之类的，就需要ajax操作
2）data-ajax-blur：输入框blur事件，需要ajax请求，可输入【true，false】
3）data-ajax：ajax操作的地址
<fieldset class="control-group"> <label class="control-label">昵称</label> <div class="controls"> <input type="text" class="span4" name="nickname" data-ajax="ajax/operate.php" data-ajax-blur="true"/> <span class="help-block">ajax验证是否存在等信息</span> </div> </fieldset>
1）单选框和多选框都有两种展现方式，一种是一起在一行，一种是每个为一行
2）只要在label标签中加入dib即可变成在一行上，默认是各自为一行
<div class="controls"> <label><input type="radio" value="1" name="sex">男</label> <label class="dib"><input type="radio" value="1" name="age">18</label> </div>
1）其实就是个简单的select控件，多选的话，加了个属性multiple="multiple"。
2）这里用到了插件select2，是这个插件在做下图的特效。
3）原先使用的版本是3.5.2，不过在多选框的时候，想默认选中几项，不可以，然后改成了4.0版本，CSS样式比起以前也好看很多了。
4）data-search：单选的时候会有一个搜索框，这里是控制这个搜索框的显示【true、false】
<select name="feature" multiple="multiple" data-required="true" data-required-message="请选择特征"> <optgroup label="收花人性别"> <option value="1">他</option> <option value="2">她</option> </optgroup> <optgroup label="收花人年龄"> <option value="3">18岁以下</option> <option value="4">19-25岁</option> <option value="5">26-40</option> <option value="6">41-60</option> <option value="7">41-61岁以上</option> </optgroup> </select>
1）如果是在表单页面，要先在form中添加data-uploadify属性，内容就是input控件的ID，多个用逗号“,”隔开，例如data-uploadify="upload_images,cover"。而如果是列表页面就不需要前面的操作。
2）使用的插件是uploadify
3）data-ids：图片列表的ID，多个的话以逗号分割，编辑页面赋初始值的时候可以设置
4）data-urls：图片的地址，多个的话以逗号分割，编辑页面赋初始值的时候可以设置
5）data-queuelimit：限制上传的图片数量，可输入【数字】
6）data-crop：显示裁剪按钮，可输入【true、false】
7）data-crop-url：裁剪的URL地址
8）data-filetypes：上传的文件类型限制，默认为“*.gif; *.jpg; *.png; *.bmp; *.jpeg”
9）data-filesize：上传的文件尺寸限制。默认为“2MB”
10）data-upload：控件的上传类别【file、image】，默认为“image”
11）data-ajax：上传路径设置，默认是const文件中的“ueditorUpload”常量
12）对于其他自定义的参数，想要传到上传文件夹中，可以以“data-”开头，例如“data-demo”，那么接收参数就是“demo”，如下代码分别是HTML和PHP部分
<input type="file" id="cover" data-demo="xyz" data-demo-top="123"/>
<?php $demo = $_POST['demo'];//xyz $demo = $_POST['demoTop'];//123
13）uploadify-file hideCSS样式
14）这个插件是用flash做上传的，而在firefox下做上传会把session重新请求下。很多后台都会把用户信息存在session中，然后做权限验证。
如果session变了的话，那权限验证就肯定通不过了，我当时使用了网上的一些解决办法没成功，后面只能简单的将上传图片的路径排除，直接不验证了。
<input type="file" id="upload_images" data-ids="" data-urls="" data-queuelimit="1" class="uploadify-file hide" />
1）注意下php文件，php/action_upload.php，返回的时候有三个值
2）imageid是图片在数据库中自增长的ID
3）state状态主要是用于富文本编辑器上传图片的时候，需要返回这个值。
4）url就是图片地址
function _ueditor($name) { $path = sprintf('%s/%s/%s/', date('Y'), date('m'), date('d')); $upload = new App_Util_Upload($name, 0); //获取上传信息 $info = $upload->getUploadFileInfo(); $fileName = time() . rand(1000, 9999) . '.' . $info['suffix']; $fullName = $path . $fileName; $path = rtrim('upload', DIRECTORY_SEPARATOR) . '/' . $fullName; $success = $upload->save($path); echo json_encode(array('url' => DOMAIN.$path, 'state' => 'SUCCESS', 'imageid'=> rand(1,9999))); }
1）要先在form中添加data-hiddeniframe属性，内容就是button控件的ID，多个用逗号“,”隔开，例如data-hiddeniframe="selectCategory"
2）data-href：需要弹出的页面地址，有时候可能会有缓存，需要加上版本来控制缓存
3）data-title：弹出页面的标题，如下图所示中选择品类的位置。
4）data-width和data-height：分别是设置弹出层的宽度和高度，可输入【数字】
5）data-scrolling：弹出层页面中是否显示滚动条，可输入【true,false】
6）data-value：默认初始值，编辑的时候可以用
7）要给button赋type值，设置为button，这里name可以不设置
<button id="selectCategory" class="btn btn-info" data-href="category.html" data-title="选择品类"
type="button" data-required="true" data-required-message="请选择产品">选择品类</button>
1）要先在form中添加data-ztree-checkbox属性，内容就是ul控件的ID，多个用逗号“,”隔开，例如data-ztree-checkbox="tree"
2）其中"p" 表示操作会影响父级节点；"s" 表示操作会影响子级节点。
3）data-py：点击勾选关联父，可输入【p】
4）data-sy：点击勾选关联子，可输入【s】
5）data-pn：取消勾选关联父，可输入【p】
6）data-sn：取消勾选关联子，可输入【s】
7）data-key-name：节点名称的属性名，默认是name
例如从数据库中读取到的数据如下所示，如果想把“随意勾选”那段显示为节点名称，就设置为“key_name”
{id:1, pId:0, key_name:"随意勾选 1", open:true}
8）data-id-key：节点数据中保存唯一标识的属性名称，用于层级关系，默认是id，注意看上面的那段JSON
9）data-pid-key：节点数据中保存其父节点唯一标识的属性名称，用于层级关系，默认是pId，注意看上面的那段JSON
10）data-ajax：需要ajax读取的地址
11）data-value：从父级页面传过来的value参数值
12）使用的插件是ztree。简单的结构如下：
<ul id="tree" class="ztree" data-py="p" data-sy="s"></ul>
1）要先在form中添加data-ueditor属性，内容就是textarea控件的ID，多个用逗号“,”隔开，例如data-ueditor="txtContent"
2）使用的插件是ueditor。
3）初始化的时候需要设置宽度和高度
4）如果要设置验证属性，可以直接在textarea上设置。
5）在编辑页面，可以直接把值输出在textarea中
<textarea id="txtContent" name="txtContent" style="height:250px;width:100%" data-required="true" data-required-message="请输入介绍">初始化值</textarea>
1）注意下php文件，php/action_upload.php，需要初始化编辑器的参数
2）根据action参数，判断是上传还是返回初始化参数
3）获取到绝对路径，赋值给$path，再file_get_contents一下
$action = isset($_GET['action']) ? $_GET['action'] : ''; $path = ROOT_PATH . '/scripts/libs/ueditor/php/config.json'; $CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents($path)), true); switch ($action) { case 'config': echo json_encode($CONFIG); break; default: //TODO 上传逻辑 _ueditor('upfile'); break; }
很多地方会有查看功能，进入到页面里面就是些展示。如下图所示，只要加个样式controls-info就行，其他的和普通控件都一样。
<fieldset class="control-group"> <label class="control-label">国家</label> <div class="controls controls-info">中国</div> </fieldset> <fieldset class="control-group"> <label class="control-label">性别</label> <div class="controls controls-info">男</div> </fieldset>
1）可克隆多个组件
2）data-type：这里必须为“clone”
3）data-target： 克隆的目标name属性，多个以“,”隔开，例如fieldset中的name属性
4）data-prompt：当删除的时候的提示语
<fieldset class="control-group" name="clone_product_names"> <label class="control-label">产品结构</label> <div class="controls"> <input type="text" name="product_names[]"/> </div> </fieldset> <fieldset class="control-group"> <div class="controls"> <button type="button" class="btn btn-inverse" data-type="clone" data-target="clone_products,clone_product_names" data-prompt="您确定要删除吗？">添加</button> </div> </fieldset>
1）data-target：目标下拉框的name属性，下拉框选中了某项后，对应的下拉框会做修改，例如选择省的某项，市这个下拉框就会改变
2）data-change-url：对应的获取数据的ajax路径
3）data-ajax-change：下拉框事件将绑定change事件【true或false】
4）data-value：初始值
<select name="province" data-target="city" data-change-url="ajax/city.php" data-ajax-change="true" data-value="1"> <option value="0">请选择省市自治区</option> </select> <select name="city" data-target="district" data-change-url="ajax/city.php" data-type="city" data-ajax-change="true" data-value="75"> <option value="0">请选择市</option> </select> <select name="district" data-change-url="ajax/city.php" data-type="district" data-ajax-change="true" data-value="791"> <option value="0">请选择区</option> </select>
很多时候会需要一些按钮做些特定的ajax操作
1）data-type：这里普通功能的填写为“custom”
2）data-ajax：ajax请求url路径
3）data-prompt：一些取消按钮，需要先弹出一个提示框确认，提示中的内容在这里设置
4）data-href：异步请求成功后的跳转URL
<button type="button" data-type="custom" data-ajax="ajax/operate.php" data-prompt="您确定取消吗？" class="btn">取消</button>
在编辑页面经常需要返回上一页，这样一个按钮。
1）href：可以自定义自己的各种链接，不仅仅是下面的history.go
2）data-type：目前是填写edit_go_back，当在编辑页面的时候，如果改变了数据，那么会显示提示语句，但需要form中添加data-type属性，例如data-type="form"
<a href="javascript:history.go(-1)" data-type="edit_go_back" class="btn btn-primary">返回</a>
1）data-img：图片路径
2）data-img-width：图片的宽度
3）data-img-height：图片的高度
4）data-post：裁剪的服务器地址
<div class="crop-boxes" data-img="/resource/crop.jpg" data-img-width="1024" data-img-height="768" data-post="/php/resize_and_crop.php"> <div name="crop_container" class="l"></div> <div class="crop-result"> <div class="txt">裁剪图片在此</div> </div> </div>
六、标签模式
标签模式类似于浏览器的标签，下图中的用户列表与新建用户就是标签。
原理就是将主要内容放到iframe中
上图中的新建用户或修改用户就是打开标签的按钮，与普通的按钮不同，属性data-type="iframe"。
这个按钮打开标签，有时候需要选中列表中的某行，例如修改某条信息，选中那行，获取ID号，然后跳转。
1）data-type：iframe
2）data-href：打开的地址，可以将参数写在url地址中，也可以将参数以“data-”前缀的方式添加在元素中
3）data-title：标签的标题
4）data-check：是否检查列表中的信息已经选中
5）data-message：当没选中的时候，弹出的错误提示
<button class="mr5 btn btn-primary" type="button" data-type="iframe" data-href="iframe_add.html?type=edit" data-title="修改用户" data-check="true" data-message="请选中相应的用户">修改用户</button>
使用的HTML标签与第一个相同，都是用“a”超链接标签，只是这里不需要与列表信息发生关系。
1）data-type：iframe
1）data-close：将当前标签页面关闭【true、false】
2）data-parent-reload：刷新父级页面【true、false】
GitHub地址如下：
https://github.com/pwstrick/grape-skin
posted on
