$ui 商业模板UI参数

更新时间：2020-05-26 15:52:28 作者：米拓建站

## 概述：
**商业模板专用**，通过`$ui`数组中的字段，可调用商业模板中当前UI自定义的参数。

【注意】
- 模板中自定义变量名称不能和特殊变量$ui相同，否则会冲突报错；
- 可参考“UI自定义变量”，自定义设置商业模板UI参数（未写）。

## 使用范围：
**商业模板专用**，仅在当前UI文件夹中的`index.php`中调用,部分类型参数如颜色、图片可在当前UI文件夹中的`index.css`或其他css中调用，在当前UI文件夹中的`index.js`中调用，则需采用特殊方法。

## 类型：
变量，用于调用商业模板当前UI参数的变量。
## 语法：

//css文件中调用语法：$参数名称$
    {color:$list_title_color$;}
	
    //模板文件中调用语法：{$ui.参数名称}
    <h2>{$ui.block1_title}</h2>

## $ui数组：
`$ui`是一个数据的集合,是数组的形式。
【注意】$ui中的参数名不能有相同的，否则会冲突报错。
## 示例：
### 商业模板如何调用当前UI参数：
**场景案例：**商业模板首页某个区块的标题可自定义设置，对应的参数名称为`block1_title`。
**模板代码：**
找到该区块对应的UI文件夹下的`index.php`，编写以下代码：

<h2>{$ui.block1_title}</h2> //通过$ui调用对应的参数名

**前台页面输出HTML：**

<h2>区块标题</h2> //当设置的标题为“区块标题”时

### UI所在文件夹下css文件中如何调用颜色类型的UI参数：
**场景案例：**商业模板首页某个区块的标题颜色可自定义设置，区块标题的类名为`index_title`，对应的颜色参数名称为`index_title_color`。

**模板代码：**
找到该区块对应的UI文件夹下的`index.css`或其他css文件，编写以下代码：

.index_title{color:$index_title_color$;}

**前台生成的css代码：**

.index_title{color:#ffffff;}

### UI所在文件夹下css文件中如何调用图片类型的UI参数：
**场景案例：**商业模板首页某个区块的背景图可自定义设置，区块的类名为`block1`，对应的背景图参数名称为`block1_bg`。

**模板代码：**
找到该区块对应的UI文件夹下的`index.css`或其他css文件，编写以下代码：

.block1{bacground:$block1_bg$;}

**前台生成的css代码：**

.block1{bacground:../../../upload/202001/12312312312.jpg;}//当自定义的背景图片路径为../../../upload/202001/12312312312.jpg时

### index.js文件中如何调用商业模板UI参数：
通过js获取首页某个区块的自定义标题值，假设该区块标题的参数名称为`block1_title`，值为“区块标题”，则可把该模板参数写到模板文件某个元素或元素的某个属性中，如“模板代码示例”，再通过js去获取该元素的内容或属性值，如“js代码示例”。

**模板代码：**
找到该区块对应的UI文件夹下的`index.php`，假设调用该UI参数的元素h2的类名为`block1_title`，则代码如下：

<h2 class="block_title">{$ui.block1_title}</h2>

**js代码：**
找到该区块对应的UI文件夹下的`index.js`，编写以下代码：

var title1=$('.block_title').html(); //获取类名为block_title的元素的内容，将其赋值为title1，title1就是UI参数block1_title的值
    console.log(title1); //将title1打印出来，即可查看UI参数block1_title的值

文档中心

米拓学堂

帮助中心

在线交流

{"status":1,"html":"<style type=\"text\/css\">\r\n.onlinebox_three{border:2px solid;}\r\n.onlinebox_three .onlinebox_three_list{width: 160px;padding: 10px 0px;}\r\n.onlinebox_three .online-item{margin-bottom: 5px; padding: 0px 17px; position: relative;display: block;color: #666;}\r\n.onlinebox_three .online-item:last-child{margin-bottom: 0px;}\r\n.onlinebox_three .online-item:hover{background: #f8f8f8;}\r\n.onlinebox_three .online-item i{font-size: 16px;}\r\n.onlinebox_three .onlinebox-open{font-size: 22px;display:none;cursor: pointer;padding: 0 10px; font-size: 18px; line-height: 40px;}\r\n.onlinebox.min .onlinebox-open{display:block;padding:0 10px;background:#444;font-size:18px;line-height:40px;color:#fff}\r\n.onlinebox .onlinebox-min{position: relative;top:-4px;}\r\n@media (max-width: 767px){\r\n.onlinebox_three .online-item{font-size: 12px;padding-top: 6px;}\r\n.onlinebox_three .online-item i{font-size: 14px;}\r\n}\r\n<\/style>\r\n<div id='onlinebox'  class=\"onlinebox onlinebox_three hide\" m-type='online' m-id='online' style=\"border-color:#1baadb;\">\r\n    <div class=\"onlinebox-open\" style=\"background:#1baadb;\"><i class=\"fa fa-comments-o\"><\/i><\/div>\r\n    <div class=\"onlinebox-box\">\r\n        <div class=\"onlinebox-top\" style=\"background:#1baadb;\">\r\n            <div class=\"onlinebox-top-btn font-size-26\">\r\n                <a href=\"javascript:;\" class=\"onlinebox-close\" title=\"\">×<\/a>\r\n                <a href=\"javascript:;\" class=\"onlinebox-min\">-<\/a>\r\n            <\/div>\r\n            <h4>在线交流<\/h4>\r\n        <\/div>\r\n                                    <div class=\"met-editor onlinebox-bottom p-x-10 p-y-5\"><p style=\"text-align: center;\">\r\n    <img src=\"..\/upload\/202001\/1579417409303256.png\" data-width=\"120\" width=\"120\" data-height=\"120\" height=\"120\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n    微信公众号\r\n<\/p>\r\n<p style=\"text-align:center;\">\r\n    <img src=\"..\/upload\/202001\/1579417452544806.png\" data-width=\"150\" width=\"150\" data-height=\"150\" height=\"150\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n    QQ交流群\r\n<\/p><\/div>\r\n    <\/div>\r\n<\/div>","t":"4","x":"10","y":"130"}