tag 手机菜单

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

## 概述：
当tag标签的action参数值为`menu.list`时，可循环调用自定义的手机菜单在移动端展示。
【说明】
- 手机菜单可才参考“[手机底部菜单](https://doc.metinfo.cn/metinfo/mobile/mobile583.html "手机底部菜单")”设置；
- 手机菜单只能在手机端或可视化界面中显示，此功能请查看下方示例代码。

## 使用范围：
仅用于底部模板文件`foot.php`。

## 类型：
数据标签，用于调用手机端底部菜单数据的标签。
## 语法：

【说明】
- tag标签中仅有一个参数action，参数值为`menu.list`；
- tag标签中的数据内容，可通过指定的$v数组及对应的字段获取，具体可参考下方的`$v数组`。

## 标签原理：
tag标签是数据的集合，数据类型类似js的数组，通过action参数传入值不同来获取不同的数据，当`action`传参为`menu.list`时，便可获得手机端底部菜单数据。
tag标签的语法和js中的for函数类似，在tag标签的内部书写待渲染的html标签，$v为每个循环变量的别名，包含了每条内容的数据。
**tag标签：**

<tag action="menu.list">
        <a href="{$v.url}" title="{$v.name}">{$v.name}</a>//通过$v数组调用内容数据
    </tag>

**for函数：**

for(i=0;i<list.length;i++){
    document.write(
    '<a href="'+list[i]['url]+'" title="'+list[i][name]+'">'+list[i][name]+'</a>'
    );
    }

总结：tag标签是后台返回数据的集合，类似于数组，在传入指定参数后会返回内容数据，在内部编写html代码，并使用$v变量来获取每个内容的数据，这样我们就可以得到一段动态的包含内容信息的html代码了。
## $v数组：
 tag标签是一个数据的集合，当`action="menu.list"`调用手机端底部菜单时，tag标签内部循环需指定$v数组为循环变量的别名，从而调用更多的内容数据。
### 调用语法：`{$v.字段名称}`
例如：

<tag action="menu.list">
    <a href="{$v.url}" title="{$v.name}">{$v.name}</a> //调用手机端菜单按钮文字及对应的链接。
    </tag>

### $v数组中包含的字段：

| 名称  |  含义 |
| ------------ | ------------ |
|name|按钮文字|
|url|按钮链接|
|target|按钮链接打开方式（值为1时表示新窗口打开，值为0时表示当前窗口打开，默认为0）|
|but_color|按钮背景颜色|
|text_color|按钮文字颜色|
|icon|菜单图标的类名|

## 示例：
### 如何调用手机端底部菜单
手机端访问网站时，在网页底部展示手机菜单，需在底部模板文件`foot.php`中编写以下代码：
**模板代码：**

<ul class="hidden-md-up <if value="$_M['form']['pageset']">block</if>" m-id="noset" m-type="menu">//hidden-sm-down：该类名用于手机端才显示手机菜单的功能
    //通过if标签（if标签具体用法参考文档https://doc.metinfo.cn/mb/mbtag/85.html）判断$_M['form']['pageset']（固定变量，用户判断可视化界面的的）是否处于可视化界面，是的话就渲染block类名，实现在可视化界面显示手机端菜单的功能
    //m-id="noset" m-type="menu"：用于手机菜单区块设置按钮的功能，是必须要写的属性
    	<tag action="menu.list">//调用手机端菜单数据
        // $v包含了每条内容的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染内容数据
    	<li style="background-color: {$v.but_color};">//{$v.but_color}：按钮背景颜色
    	    <a href="{$v.url}" title="{$v.name}"<if value="$v['target']">target="_blank"</if> style="color: {$v.text_color};">//{$v.url}：按钮链接；{$v.name}：按钮文字；{$v.text_color}：按钮文字颜色；
    //通过if标签（if标签具体用法参考文档https://doc.metinfo.cn/mb/mbtag/85.html）判断$v['target']是否为1，是的话就渲染属性target="_blank"，实现点击手机菜单新窗口打开的功能	        <i class="{$v.icon}"></i>
    	        <span>{$v.name}</span>
    	    </a>
    	</li>
    	</tag>
    </ul>

【注意】实际编写时请去掉注释文字。

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

<ul class="hidden-md-up block" m-id="noset" m-type="menu">//当页面处于可视化界面时，会出现类名block
    	<li style="background-color: #1baadb;">
    		<a href="https://www.metinfo.cn/" style="color: #ffffff;" title="链接关键词"> <i class="icon fa-home"></i>
    			<span>首页</span>
    		</a>
    	</li>
    	<li style="background-color: #1baadb;">
    		<a href="https://www.metinfo.cn//product/" style="color: #ffffff;" title="链接关键词"> <i class="icon fa-product-hunt"></i>
    			<span>产品</span>
    		</a>
    	</li>
    	<li style="background-color: #1baadb;">
    		<a href="https://www.metinfo.cn/news/" style="color: #ffffff;" title="链接关键词">
    			<i class="icon fa-th-large"></i>
    			<span>新闻</span>
    		</a>
    	</li>
    	<li style="background-color: #1baadb;">
    		<a href="https://www.mituo.cn/about/contact.html" style="color: #ffffff;" title="链接关键词">
    			<i class="icon fa-address-book-o"></i>
    			<span>联系</span>
    		</a>
    	</li>
       //实际情况下菜单个数可能不是四个，此处只列出四个li标签
    </ul>

文档中心

米拓学堂

帮助中心

在线交流

{"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"}