5.前端控件V2-MetInfo帮助中心

[TOC]
##页面模板
[应用示例文件下载](../upload/file/app_ui.zip "应用示例文件下载")
`简单的页面效果建议自己写，少引入插件，尽量避免和网站已加载的js冲突。`
###加载页面模板文件
![加载页面模板文件](http://help.metinfo.cn/upload/201808/153310451386939.jpg "加载页面模板文件")
![加载页面模板文件](http://help.metinfo.cn/upload/201804/152344293342237.png "加载页面模板文件")
###模板页面引入头部、底部文件
![页面引入头部文件](http://help.metinfo.cn/upload/201804/152344314224169.jpg "页面引入头部文件")
![页面引入底部文件](http://help.metinfo.cn/upload/201804/152344318080953.jpg "页面引入底部文件")
###php书写方式
模板页面支持php原生书写格式
![编写方式](http://help.metinfo.cn/upload/201804/152344333520883.jpg)
###数据调用
模板页面已默认加载了`$_M`,直接调用即可
![数据调用](http://help.metinfo.cn/upload/201804/152344333520883.jpg)，
其他数据，请在调用页面文件之前赋值到`$data`中，并传到`$this->show`中
![数据调用](http://help.metinfo.cn/upload/201808/153310867452214.jpg "数据调用")
![数据调用](http://help.metinfo.cn/upload/201804/152344378792853.jpg "数据调用")
##表单控件v2
###表单代码结构
```html
<form method="POST" action="">
	<div class="metadmin-fmbx">
		控件一
		控件二
		控件三
		....
		<dl>
			<dt><label class='form-control-label'>名称</label></dt>
			<dd>
				// 控件代码
                <span class="text-help">描述文字，用于说明该设置的作用。</span>
			</dd>
		</dl>
		<dl>
			<dt></dt>
			<dd>
				<button type="submit" class='btn btn-primary'>保存</button>
			</dd>
		</dl>
	</div>
</form>
```
| 控件名称  | 说明  |
| ------------ | ------------ |
|[功能分区](../form_widget_v2/shownews.php?lang=cn&id=283 "功能分区")   | 用于在单个页面中选项多的时候划分区域，提升用户体验  |
|[注意事项](../form_widget_v2/shownews.php?lang=cn&id=284 "注意事项")   | 用户给用户较全面的提示信息  |
| [简短文本输入框](../form_widget_v2/shownews.php?lang=cn&id=285 "简短文本输入框")  | 用于输入简短文字  |
| [ 文本输入框](../form_widget_v2/shownews.php?lang=cn&id=286 " 文本输入框") |用于输入较长文字   |
| [编辑器](../form_widget_v2/shownews.php?lang=cn&id=287 "编辑器")  | 加载	`ueditor`百度编辑器`前台不可用`  |
| [单选按钮](../form_widget_v2/shownews.php?lang=cn&id=288 "单选按钮")  | 用于让用户选择一项  |
| [多选按钮](../form_widget_v2/shownews.php?lang=cn&id=289 "多选按钮")  | 用于让用户可选择多个选项  |
| [下拉菜单](../form_widget_v2/shownews.php?lang=cn&id=290 "下拉菜单")  | 用于让用户可以下拉选择一项  |
| [上传组件](../form_widget_v2/shownews.php?lang=cn&id=291 "上传组件")  | 便于用户上传图片或文件  |
| [颜色选择器](../form_widget_v2/shownews.php?lang=cn&id=292 "颜色选择器")  | 便于用户直接选择颜色  |
| [标签增加器](../form_widget_v2/shownews.php?lang=cn&id=293 "标签增加器")  | 便于用户输入多个文字标签，可用于多个邮箱、关键词等等  |
| [滑块](../form_widget_v2/shownews.php?lang=cn&id=294 "滑块")  | 可以让用户拖动滑块选择对应的数值  |
| [日期选择器](../form_widget_v2/shownews.php?lang=cn&id=295 "日期选择器")  |  便于选择具体日期 |
| [联动菜单](../form_widget_v2/shownews.php?lang=cn&id=296 "联动菜单")  |  可自定义菜单数据的联动菜单，默认包含中国城市数据 |
|[动态隐藏显示选项](../form_widget_v2/shownews.php?lang=cn&id=297 "动态隐藏显示选项")   |根据单选、多选的操作实现动态显示指定选项   |
| [模态对话框](../form_widget_v2/shownews.php?lang=cn&id=298 "模态对话框")  | 可以替代alert，轻松实现更为丰富的交互体验  |
---
##表单验证v2
通过HTML标签属性的方式进行表单验证，因此使用方式就是给HTML标签加上对应的属性。
**需要添加验证的元素，需用`<div class="form-group clearfix"></div>`包起来，或者其父元素都需要添加类名`form-group`。**

###表单验证回调
```js
$(function(){
	var form_index=$('.test-form').index('form');
	setTimeout(function(){
		// 以下两个回调只能执行一个
		// ajax提交表单后的回调
		// validate[form_index].success(function(result,form){
		// 	// result：表单提交返回的结果
		// 	// form：表单对象
		// 	// ...自定义处理部分
		// });
		// 提交表单前的回调
		validate[form_index].success(function(e,form){
			// form：表单对象

// ...自定义处理部分

// 如果需要ajax提交表单
			// validate[form_index].formDataAjax(e,function(result,form){
			// 	// result：表单提交返回的结果
			// 	// form：表单对象
			// })
			// return false;
			// 如果需要跳转提交表单，则不用再写了
		},false);
	},1000)
})
```
---
##表格控件v2
表格控件通过特有的方式获取数据，获取的数据支持无刷新分页，可以对表格数据进行相应的筛选、搜索，甚至是动态编辑、增加表格内容。
###获取表格数据
说明：基本的表格数据展示功能，自动实现无刷新分页。
> **HTML代码结构**

`class类要一样，尤其是dataTable，是激活控件的class类`
```html
<table class="dataTable table table-bordered table-hover table-striped w-full" id='test-table' data-table-ajaxurl="{$_M['url']['own_form']}a=dotable_list_json" data-table-pagelength='20'>
	<thead>
		<tr>
			<th width="200" data-table-columnclass="text-xs-center">预览图</th>
			<th width="80" data-table-columnclass="text-xs-center">编号</th>
			<th>操作</th>
		</tr>
	</thead>
</table>
```
> **PHP代码实例**

```php
function dotable_list_json(){
    global $_M;
    $table = load::sys_class('tabledata', 'new'); //加载表格数据获取类
    $where = "lang='{$_M[form][lang]}'"; //查询条件
    $order = "no_order"; //排序方式
    $array = $table->getdata($_M[table][news], '*', $where, $order);//获取数据
    foreach($array as $key => $val){
        $list = array();
        $list[] = $val[no_order];//当前行的第一列
        $list[] = $val[title]; //当前行的第二列
        $list[] = $val[displaytype]?'显示':'不显示';
        $list[] = $val[com_ok]?'是':'否';
        $list[] = $val[top_ok]?'是':'否';
        $list[] = date('Y-m-d',strtotime($val[updatetime]));
        $rarray[] = $list;
    }
    $table->rdata($rarray);//返回数据
}
```
[查看表格数据类的使用方法](../gnclass/shownews.php?lang=cn&id=219 "查看表格数据类的使用方法")
###控件参数
参数请写在table标签上。
####data-table-ajaxurl
表格数据来源，URL。
####data-table-pagelength
表格每页显示条数，默认30。
####data-table-type
表格请求地址请求方式，可选值get、post，默认值post。
####toclass
能够自定义表格每行class类，需要在表格数据来源中JSON的回传数据处理中增加，请求到的表格数据的单元行若`toclass`字段有值，则该行对应的`tbody>tr`的会加上class为`toclass`的值。
> **PHP示例代码**

```php
...
$list[]=1;
$list['toclass']='class-test';
...
```
表格会自动加上class，效果如下：
> **HTML示例代码**

```html
<tbody>
	...
	<tr class='class-test'>
		<td>1</td>
	</tr>
	...
</tbody>
```
####data-table-columnclass
能够给指定一列设置class类，在`table > thead > th`标签上定义。
> **HTML示例代码**

```html
<tbody>
	...
	<tr>
		<td class='class1'>1</td>
	</tr>
	...
</tbody>
```
添加了此参数后会给tfoot对应列的class也会加上`data-table-columnclass`的值，如果不想tfoot的列加上class，则在tfoot对应列加上参数`data-no_column_defs`。
例如：
```html
<tfoot>
	<tr>
		<th colspan="3" data-no_column_defs>
			<button type="submit" class='btn btn-primary'>保存</button>
		</th>
	</tr>
</tfoot>
```
> **带效果的class类**

```html
text-xs-left：内容左浮动
text-xs-right：内容右浮动
text-xs-center：内容居中
hide：隐藏
```
####selectable
全选、全不选功能
> **HTML示例代码**

```html
<table class="dataTable table table-bordered table-hover table-striped w-full" id='test-table' data-table-ajaxurl="{$_M['url']['own_form']}a=dotable_list_json" data-table-pagelength='20' data-plugin="selectable">
	<thead>
		<tr>
			<th class="w-50">
				<span class="checkbox-custom checkbox-primary">
					<input class="selectable-all" type="checkbox">
					<label></label>
				</span>
			</th>
			<th width="200" data-table-columnclass="text-xs-center">预览图</th>
			<th width="80" data-table-columnclass="text-xs-center">编号</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<span class="checkbox-custom checkbox-primary">
					<input class="selectable-item" type="checkbox" value="1">
					<label></label>
				</span>
			</td>
			<td>619</td>
			<td>619</td>
			<td>619</td>
		</tr>
		<tr>
			<td>
				<span class="checkbox-custom checkbox-primary">
					<input class="selectable-item" type="checkbox" value="2">
					<label></label>
				</span>
			</td>
			<td>619</td>
			<td>619</td>
			<td>619</td>
		</tr>
	</tbody>
</table>
```
`data-plugin="selectable"`是启用全选功能的开关。
###表格方法
####表格数据筛选、搜索
能够实现让指定的`input、select`改变值后无刷新检索。
> **参数**

```
- data-table-search    // 有该参数即启用搜索
```
启用搜索后，该搜索框或下拉菜单的`name、value`会被传递到表格数据源`URL`，只需要在那里获取到值并进行数据库查询即可。
> **HTML示例代码**

```html
<div class="clearfix">
	
	<div class="input-search pull-xs-right">
		<button type="submit" class="input-search-btn"><i class="icon wb-search" aria-hidden="true"></i></button>
		<input type="text" class="form-control" name="keyword" data-table-search placeholder="请输入关键字">
	</div>
	
	<select name="search_fod" data-table-search class='pull-xs-right'>
	<option value="">导航栏显示</option>
	<option value="0">不显示</option>
	<option value="1">头部主导航条</option>
	<option value="2">尾部导航条</option>
	<option value="3">都显示</option>
	</select>
</div>
<table class="dataTable table table-bordered table-hover table-striped m-t-10" id='test-table' data-table-ajaxurl="{$_M['url']['own_form']}a=dotable_list_json" data-table-pagelength='20' data-plugin="selectable">
	<input type="hidden" name="test" class="form-control" data-table-search>// 表格请求时提交字段
	...
```
> **PHP示例代码**

```php
function table_edit_json(){ //表格数据获取
    global $_M;
    /*获取表格ajax传递的参数*/
    $term1   = $_M[form]['search_title'];   //获取搜索关键词 
    $term2  = $_M[form]['search_displaytype'];   //获取搜索关键词 
    $term3 = $_M[form]['search_com_ok'];   //获取搜索关键词 
    //在还可以获取多个搜索关键词
    /*查询表*/
    $search = $term1    ?"and title       like '%{$term1}%' ":'';                        //增加查询条件
    $search.= $term2!=''?"and displaytype =     '{$term2}'  ":'';                 //获取查询条件
    $search.= $term3!=''?"and com_ok      =     '{$term3}'  ":'';                    //获取查询条件
    //如果有更多查询条件，还可以继续增加
    $table = load::sys_class('tabledata', 'new');
    $where = "lang='{$_M[form][lang]}' {$search}"; //在条件语句中加入查询条件 $search
    $order = "no_order";
    $array = $table->getdata($_M[table][news], '*', $where, $order);
    foreach($array as $key => $val){
        $list = array();
        $list[] = "<div class=\"custom-control custom-checkbox\"><input class=\"checkall-item custom-control-input\" type=\"checkbox\" name=\"id\" value=\"{$val['id']}\"><label class=\"custom-control-label\"></label></div>";
        $list[] = "<input type=\"text\" name=\"no_order-{$val[id]}\" class=\"ui-input met-center\" style=\"width:20px;\" value=\"{$val[no_order]}\">";
        $list[] = "<a href="" title=\"链接关键词\">{$val[title]}</a>";
        $list[] = $val[displaytype]?'显示':'不显示';
        $list[] = $val[com_ok]?'是':'否';
        $list[] = $val[top_ok]?'是':'否';
        $list[] = date('Y-m-d',strtotime($val[updatetime]));
        $list[] = "<a href=\"\" class=\"edit\" title=\"链接关键词\">编辑</a><span class=\"line\">|</span><a href=\"\" class=\"delet\" data-confirm=\"{$_M[word][js7]}\" title="链接关键词">删除</a>";
        $rarray[] = $list;
    }
    $table->rdata($rarray);
}
```
####表格内容编辑、保存、删除
表格需要嵌套`form`表单并设置数据保存的`URL`：
```html
<form method="POST" action="数据提交处理的URL">
	....
	<table class="dataTable table table-bordered table-hover table-striped" id="test-table" data-table-ajaxurl="表格数据源URL">
		...
	</table>
</form>
```
#####表格内容编辑
表格数据支持返回html格式代码，部分代码示例：
```php
$list[]="<input type='text' name='no_order-{$val['id']}' value='{$val['no_order']}' class='form-control'>";
```
这样，就可以在显示的页面对输入框进行编辑。
**并不建议php直接返回html代码，规范写法需要将数据和样式分离，后台只传数据，前台js渲染样式，请参考 [重新渲染单元格数据样式](#重新渲染单元格数据样式 "重新渲染单元格数据样式")。**
#####表格内容保存
表格每行内容需要一个`id`选择项来标记每行的内容。
> **选择项**

在表格中可以通过js给每行渲染一个选择项，建议放在第一列，`name`名称必须为`id`。
> **JS示例代码**

```js
if(typeof datatable_option =='undefined') datatable_option=[];
// datatable表格返回数据的处理
var datatable_index=$('#test-table').index('.dataTable');
datatable_option[datatable_index]=[];
datatable_option[datatable_index]['dataSrc']=function(result){
	var data=[];
	//重新处理result.data，result.data为表格数据
	$.each(result.data, function(i, val) {
		data[i]=[];
		data[i].push('<span class="checkbox-custom checkbox-primary">'
	                    +'<input type="checkbox" name="id" value="'+val.id+'" class="selectable-item">'
	                    +'<label></label>'
	                +'</span>');
		// ...
    });
    return data;
}
```
然后，我们需要有个全选的选择项，请放在`table > thead > th`里面。
```html
<span class="checkbox-custom checkbox-primary">
	<input class="selectable-all" type="checkbox">
	<label></label>
</span>
```
table标签上`data-plugin="selectable"`是启用全选功能的开关。
> **保存按钮**

`button[type="submit"]`的提交方式。
```html
<tfoot>
     <tr>
         <th>
		 	<span class="checkbox-custom checkbox-primary">
				<input class="selectable-all" type="checkbox">
				<label></label>
			</span>
		 </th>
		<th colspan="7" data-no_column_defs>
			<button type="submit" class='btn btn-primary'>保存</button>
		</th>
     </tr>
 </tfoot>
```
`保存的时候默认是提交全部的选项，不勾选也没问题。`
- **data-no_column_defs**：参见表格控件参数 [data-table-columnclass](#data-table-columnclass "data-table-columnclass")。

#####表格内容删除
> **删除按钮**

```html
<tfoot>
     <tr>
         <th>
		 	<span class="checkbox-custom checkbox-primary">
				<input class="selectable-all" type="checkbox">
				<label></label>
			</span>
		 </th>
		<th colspan="7" data-no_column_defs>
			<button type="submit" class='btn btn-primary'>保存</button>
			<button type="button" class="btn btn-default" table-delet data-plugin="alertify" data-type='confirm' data-label-ok='确定' data-label-cancel='取消' data-confirm-title='是还是否？'>删除</button>
		</th>
     </tr>
 </tfoot>
```
`删除的时候是提交勾选的选项。`
> **参数**

- **table-delet**：删除按钮必须加的参数
- **data-plugin="alertify"**：点击删除按钮弹出按提示框，具体参考表单控件 [模态对话框](../form_widget_v2/shownews.php?lang=cn&id=298 "模态对话框")。

> **如何获取提交的信息ID？**

保存或删除信息时提交的行的选择项`ID`会以逗号`,`隔开，储存在`name`名称为`all_id`的input中（该input隐藏不可见），因此可以在表单处理页面中通过`$_M['form']['all_id']`获取到选择项，拆分后就可以使用。
> **有多个提交按钮，比如一个保存一个删除，提交后如何区分？**

`button[type="submit"]`提交的时候，`input[submit_type]`的值为`save`；`button[table-delet]`提交的时候，`input[submit_type]`的为`delet`，因此可以在表单处理页面中通过 `$_M['form']['submit_type']` 来获取提交的类型。
> **PHP处理表格数据示例**

```php
function dosave(){
    global $_M;
    $list = explode(",",$_M['form']['all_id']) ;   //将选择项列表ID拆分为数组
    $type = $_M['form']['submit_type'];           //表格提交类型
    foreach($list as $id){
        if($id){//不能为空
            if($type=='save'){//用户点击了保存按钮
                $oldwords = $_M['form']['oldwords-'.$id];
                $newwords = $_M['form']['newwords-'.$id];
                $newtitle = $_M['form']['newtitle-'.$id];
                $url    = $_M['form']['url-'.$id];
                $num    = $_M['form']['num-'.$id];
                if(is_number($id)){//修改
                    $query = "UPDATE {$_M['table']['label']} SET 
                    oldwords = '{$oldwords}',
                    newwords = '{$newwords}',
                    newtitle = '{$newtitle}',
                    url      = '{$url}',
                    num      = '{$num}'
                    WHERE id = '{$id}' and lang = '{$_M[lang]}'
                    ";
                }else{//新增
                    $query = "INSERT INTO {$_M['table']['label']} SET 
                    oldwords = '{$oldwords}',
                    newwords = '{$newwords}',
                    newtitle = '{$newtitle}',
                    url      = '{$url}',
                    num      = '{$num}',
                    lang  = '{$_M[lang]}'
                    ";
                }
            }elseif($type=='delet'){//删除
                if(is_number($id)){
                    $query = "DELETE FROM {$_M['table']['label']} WHERE id='{$id}' and lang='{$_M[lang]}' ";
                }
            }
            DB::query($query);
        }
    }
    turnover("{$_M['url']['own_form']}a=doindex");
}
```
####动态新增行
设置一个链接或按钮，点击后可以动态增加一行，并且点击保存后可以将此行数据增加到数据库中。
首先，需要设置一个按钮，一般放在表格左上角，以及表格底部。
> **HTML示例代码**

```html
<tfoot>
	<tr>
		<th>
			<button type="button" class="btn btn-success" table-addlist data-url='{$url.own_form}a=do_table_add_list'>添加</button>
		</th>
	</tr>
</tfoot>
```
如果按钮放在表格外面，则需要在表格上添加参数`data-table-id`，参数值为表格table的id，例如：
> **HTML示例代码**

```html
<button type="button" class="btn btn-success btn-add-pdiscount" table-addlist data-table-id='#test-table' data-url='{$url.own_form}a=do_table_add_list'>添加</button>
<table class="dataTable table table-bordered table-hover table-striped m-t-10" id="test-table" data-table-ajaxurl="表格数据源URL">
...
```
> **数据源PHP代码示例**

```php
function do_table_add_list(){
    global $_M;
    $id = 'new-'.$_M['form']['new_id'];
    $metinfo ="<tr>
                    <td class='text-xs-center'>
                        <span class='checkbox-custom checkbox-primary'>
                            <input type='checkbox' name='id' value='{$id}' class='selectable-item'>
                            <label></label>
                        </span>
                    </td>
                    <td class='text-xs-center'>
                        <div class='form-group'>
                            <input type='text' name='name-{$id}' value='' required class='form-control'>
                        </div>
                    </td>
                    <td class='text-xs-center'>
                        <div class='form-group'>
                            <input type='text' name='num-{$id}' value='' required class='form-control'>
                        </div>
                    </td>
                    <td>
                        <div class='form-group'>
                            <input type='text' name='state-{$id}' value='' required class='form-control'>
                        </div>
                    </td>
                </tr>"; //HTML代码请看下面的示例
    echo $metinfo;
}
```
> **返回的HTML代码示例**

```html
<tr>
    <td class="text-xs-center">
        <span class="checkbox-custom checkbox-primary">
            <input type="checkbox" name="id" value="" class="selectable-item">
            <label></label>
        </span>
    </td>
    <td class="text-xs-center">
        <div class="form-group">
            <input type="text" name="name" value="" required class="form-control">
        </div>
    </td>
    <td class="text-xs-center">
        <div class="form-group">
            <input type="text" name="num" value="" required class="form-control">
        </div>
    </td>
    <td>
        <div class="form-group">
            <input type="text" name="state" value="" required class="form-control">
        </div>
    </td>
</tr>
```
这样点击按钮或链接，页面表格底部就能自动增加一行。
在执行保存的时候，为了区分每行的数据，可以设定新增行的选择项值为`new-$_M['form']['new_id']` ，这样在保存的时候可以用PHP分析带`new-`的就是要新增的数据，上面PHP代码示例就很好的利用了这个方法。
#####参数
- table-addlist
动态新增行开关。
- data-url
新增行的数据源URL，给链接或按钮设置此属性后，点击该按钮将会执行动态增加行，同时会给数据源传递一个不断增量的变量`$_M['form']['new_id']`，用于累计增加的数量和区分每个新增的行。
- data-nocancel
是否取消【撤销】按钮。如果没有该参数则会在新增行的后一个单元格末尾添加一个【撤销】按钮，点击【撤销】可以删除该新增行；

####删除新增行
说明：动态增加的行需要删除的时候可以采用这个方式。
用法：新增行的后一个单元格末尾会默认添加一个包含参数`table-cancel`的按钮，点击该按钮即可删除该行。
> **【撤销】按钮HTML代码示例**

```php
$list[]='name';
$list[]=1;
...
```
> **JS示例代码**

```php
$list['id']=0;
$list['name']='name';
...
```
> **JS示例代码**

```js
if(typeof datatable_option =='undefined') datatable_option=[];
// datatable表格返回数据的处理
var datatable_index=$('#test-table').index('.dataTable');
datatable_option[datatable_index]=[];
datatable_option[datatable_index]['dataSrc']=function(result){
	var data=[];
	//重新处理result.data，result.data为表格数据
	$.each(result.data, function(i, val) {
		data[i]=[];
		data[i].push('<span class="checkbox-custom checkbox-primary">'
	                    +'<input type="checkbox" name="id" value="'+val.id+'" class="selectable-item">'
	                    +'<label></label>'
	                +'</span>');
		data[i].push('<div class="form-group"><input type="text" name="name-'+val.id+'" value="'+val.name+'" required class="form-control" /></div>');
		// ...
    });
    return data;
}
```
####表格初始化后回调
> **JS示例代码**

```js
$('#test-table').on( 'init.dt', function ( e, settings,json) {
	...
})
```
> **参数**

**e：**当前表格对象
**settings：**表格设置的参数
**json：**表格请求到的数据
####表格重绘后回调
表格翻页或者筛选、搜索后的回调
> **JS示例代码**

```js
$('#test-table').on( 'draw.dt', function ( e,settings ) {
	...
})
```
> **参数**

**e：**当前表格对象
**settings：**表格设置的参数
####表格重绘前回调
表格刷新数据前的回调
> **JS示例代码**

```js
$('#test-table').on( 'preDraw.dt', function ( e,settings ) {
	...
})
```
> **参数**

**e：**当前表格对象
**settings：**表格设置的参数

---
##自定义文件v2
和老版本一样，页面会自动加载应用模板下的`css/metinfo.css`和`js/own.js`，只不过own.js有点不一样，直接写js代码即可。
```js
/*!
 * M['weburl']           网站网址
 * M['lang']             网站语言
 * M['tem']              模板目录路径
 * M['user_name']        页面登录用户名
 * met_prevarrow,
   met_nextarrow         slick插件翻页按钮自定义html
 * M['device_type']      客户端判断（d：PC端，t：平板端，m：手机端）
 * M['n']                当前模块名称
 * M['c']                当前类
 * M['a']                当前方法
 * M['langtxt']          当前语言文字
 * M['langset']          当前后台语言
 * M['anyid']            当前模块id
 * M['met_editor']       当前系统编辑器名称
 * M['met_keywords']     页面关键词
 * M['url']['admin']     后台文件夹路径
 * M['url']['static']
 * M['url']['static_vendor']
 * M['url']['static2']
 * M['url']['static2_vendor']
 * M['url']['static2_plugin']
 * M['url']['uiv2']      模板框架v2路径
 * M['url']['uiv2_css']
 * M['url']['uiv2_js']
 * M['url']['app']       应用文件夹路径
 * M['url']['pub']       后台模块公用文件夹路径
 * M['url']['epl']       后台模块公用示例文件夹路径
 * M['url']['ui']        应用前后台公用UI文件app/system/include/piblic/ui/里面
 * M['url']['own_form']  当前页面程序地址
 * M['url']['own_name']  当前模块地址
 * M['url']['own']       当前模块后台路径
 * M['url']['own_tem']   当前页面模板路径
 * M['url']['api']       app站点地址
 * M['url']['editor']     当前编辑器应用文件夹路径
 */
$(function(){
	//...
});
```
###文件引入依赖`$.include`
使用函数`$.include`即可引入css、js文件并回调。
`简单的页面效果建议自己写，少引入插件，尽量避免和网站已加载的js冲突。`
####示例代码
```js
$.include(M['url']['uiv2']+'static/plugin/jquery.lazyload.min.js?2018080101',function(){
	$original.lazyload({placeholder:met_lazyloadbg});
})
```
还有一些文件的路径可以用变量代替（更多设置参考`public/ui/v2/static/js/app.js`中的`M['plugin']`数组），UI框架已经设置好，例如：
```js
$.include(M['plugin']['lazyload'],function(){
	$original.lazyload({placeholder:met_lazyloadbg});
})
```
####函数参数
##### $.include(url,fun);
- **url**：文件路径，可以是数组，如`[文件路径1，文件路径2]`,`文件路径要带版本号或时间戳以清除缓存，每次调用文件后都要修改此参数`
- **fun**：function，回调函数

如果插件通过`$.include`引入的插件没有生效，可以在此函数的第三个参数改为`siterun`,例如：
```js
$.include(M['plugin']['tokenfield'],'','siterun');
```
##注意事项
`简单的页面效果建议自己写，少引入插件，尽量避免和网站已加载的js冲突。`

应用开发文档

轻松开发企业应用