提交 5b06259e 编写于 作者: M Minwe

Menu add target attribute

上级 fd323ca1
......@@ -208,7 +208,9 @@
@grid-columns: 12;
@grid-gutter-width: 1rem; // Columns padding
@grid-gutter: @grid-gutter-width; // Columns padding
@grid-gutter-md-width: 1.5rem; // 15px
@grid-gutter-md: @grid-gutter-md-width; // 15px
@grid-max-width: 1000px;
......@@ -1290,4 +1292,4 @@
// Utility variables
// =============================================================================
@utility-scrollable-height: 240px;
\ No newline at end of file
@utility-scrollable-height: 240px;
......@@ -26,7 +26,7 @@
hbs.registerPartial('mechat', "{{#this}}\n <section data-am-widget=\"mechat\" class=\"am-mechat{{#if theme}} am-mechat-{{theme}}{{else}} am-mechat-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\" {{#if id}} id=\"{{id}}\" {{/if}} {{#if options.unitid}}data-am-mechat-unitid=\"{{options.unitid}}\"{{/if}}>\n <div id=\"mechat\"></div>\n </section>\n{{/this}}");
hbs.registerPartial('menu', "{{#this}}\n <nav data-am-widget=\"menu\" class=\"am-menu {{#if theme}} am-menu-{{theme}}{{else}} am-menu-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\" {{options.dataset}} {{#if id}}id=\"{{id}}\"{{/if}}\n {{#ifCond theme '==' 'dropdown1'}} data-am-menu-collapse{{/ifCond}}\n {{#ifCond theme '==' 'dropdown2'}} data-am-menu-collapse{{/ifCond}}\n {{#ifCond theme '==' 'slide1'}} data-am-menu-collapse{{/ifCond}}\n {{#ifCond theme '==' 'offcanvas1'}} data-am-menu-offcanvas{{/ifCond}}\n {{#ifCond theme '==' 'offcanvas2'}} data-am-menu-offcanvas{{/ifCond}}> {{!-- 与模板深耦合,与 JS 浅耦合 --}}\n <a href=\"javascript: void(0)\" class=\"am-menu-toggle\">\n {{#if options.toggleTitle}}\n <span class=\"am-menu-toggle-title\">{{options.toggleTitle}}</span>\n {{/if}}\n {{#if options.toggleCustomIcon}}\n <img src=\"{{options.toggleCustomIcon}}\" alt=\"Menu Toggle\"/>\n {{else}}\n {{#if options.toggleIcon}}\n <i class=\"am-menu-toggle-icon am-icon-{{options.toggleIcon}}\"></i>\n {{else}}\n <i class=\"am-menu-toggle-icon am-icon-bars\"></i>\n {{/if}}\n {{/if}}\n </a>\n\n {{!-- offCanvas menu Wrap --}}\n {{!-- 问题:方便用户,但是与主题名称(类名)耦合过深 --}}\n {{#ifCond theme '==' 'offcanvas1'}}\n <div class=\"am-offcanvas\" {{#if options.closeOffCanvasOnclick}}data-dismiss-on=\"click\"{{/if}}>\n <div class=\"am-offcanvas-bar{{#if options.offCanvasFlip}} am-offcanvas-bar-flip{{/if}}\">\n {{/ifCond}}\n {{#ifCond theme '==' 'offcanvas2'}}\n <div class=\"am-offcanvas\">\n <div class=\"am-offcanvas-bar{{#if options.offCanvasFlip}} am-offcanvas-bar-flip{{/if}}\">\n {{/ifCond}}\n\n {{#if content}}\n <ul class=\"am-menu-nav {{#if options.cols}}sm-block-grid-{{options\n .cols}}{{else}}sm-block-grid-1{{/if}}{{#ifCond theme '==' 'dropdown1'}} am-collapse{{/ifCond}}{{#ifCond theme\n '==' 'dropdown2'}} am-collapse{{/ifCond}}{{#ifCond theme\n '==' 'slide1'}} am-collapse{{/ifCond}}\">\n {{#each content}}\n <li class=\"{{#if subMenu}}am-parent{{/if}}{{#if className}} {{className}}{{/if}}\">\n <a href=\"{{link}}\">{{{title}}}</a>\n {{#if subMenu}}\n <ul class=\"am-menu-sub am-collapse {{#if subCols}} sm-block-grid-{{subCols}}{{else}}\n sm-block-grid-1{{/if}} {{subMenuClassName}}\">\n {{#each subMenu}}\n <li class=\"{{#if subMenu}} am-parent{{/if}}{{#if className}} {{className}}{{/if}}\">\n <a href=\"{{link}}\">{{{title}}}</a>\n </li>\n {{/each}}\n {{!-- 显示进入栏目链接 --}}\n {{#if channelLink}}\n <li class=\"am-menu-nav-channel\"><a href=\"{{link}}\" title=\"{{title}}\">{{{channelLink}}}</a></li>\n {{/if}}\n </ul>\n {{/if}}\n </li>\n {{/each}}\n </ul>\n {{/if}}\n\n {{#ifCond theme '==' 'offcanvas1'}}\n </div>\n </div>\n {{/ifCond}}\n {{#ifCond theme '==' 'offcanvas2'}}\n </div>\n </div>\n {{/ifCond}}\n {{!-- 不要问我为什么这样写,我也不想这样 --}}\n </nav>\n{{/this}}\n");
hbs.registerPartial('menu', "{{#this}}\n <nav data-am-widget=\"menu\" class=\"am-menu {{#if theme}} am-menu-{{theme}}{{else}} am-menu-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\" {{options.dataset}} {{#if id}}id=\"{{id}}\"{{/if}}\n {{#ifCond theme '==' 'dropdown1'}} data-am-menu-collapse{{/ifCond}}\n {{#ifCond theme '==' 'dropdown2'}} data-am-menu-collapse{{/ifCond}}\n {{#ifCond theme '==' 'slide1'}} data-am-menu-collapse{{/ifCond}}\n {{#ifCond theme '==' 'offcanvas1'}} data-am-menu-offcanvas{{/ifCond}}\n {{#ifCond theme '==' 'offcanvas2'}} data-am-menu-offcanvas{{/ifCond}}> {{!-- 与模板深耦合,与 JS 浅耦合 --}}\n <a href=\"javascript: void(0)\" class=\"am-menu-toggle\">\n {{#if options.toggleTitle}}\n <span class=\"am-menu-toggle-title\">{{options.toggleTitle}}</span>\n {{/if}}\n {{#if options.toggleCustomIcon}}\n <img src=\"{{options.toggleCustomIcon}}\" alt=\"Menu Toggle\"/>\n {{else}}\n {{#if options.toggleIcon}}\n <i class=\"am-menu-toggle-icon am-icon-{{options.toggleIcon}}\"></i>\n {{else}}\n <i class=\"am-menu-toggle-icon am-icon-bars\"></i>\n {{/if}}\n {{/if}}\n </a>\n\n {{!-- offCanvas menu Wrap --}}\n {{!-- 问题:方便用户,但是与主题名称(类名)耦合过深 --}}\n {{#ifCond theme '==' 'offcanvas1'}}\n <div class=\"am-offcanvas\" {{#if options.closeOffCanvasOnclick}}data-dismiss-on=\"click\"{{/if}}>\n <div class=\"am-offcanvas-bar{{#if options.offCanvasFlip}} am-offcanvas-bar-flip{{/if}}\">\n {{/ifCond}}\n {{#ifCond theme '==' 'offcanvas2'}}\n <div class=\"am-offcanvas\">\n <div class=\"am-offcanvas-bar{{#if options.offCanvasFlip}} am-offcanvas-bar-flip{{/if}}\">\n {{/ifCond}}\n\n {{#if content}}\n <ul class=\"am-menu-nav {{#if options.cols}}sm-block-grid-{{options\n .cols}}{{else}}sm-block-grid-1{{/if}}{{#ifCond theme '==' 'dropdown1'}} am-collapse{{/ifCond}}{{#ifCond theme\n '==' 'dropdown2'}} am-collapse{{/ifCond}}{{#ifCond theme\n '==' 'slide1'}} am-collapse{{/ifCond}}\">\n {{#each content}}\n <li class=\"{{#if subMenu}}am-parent{{/if}}{{#if className}} {{className}}{{/if}}\">\n <a href=\"{{link}}\" {{#if target}}target=\"{{target}}\" {{/if}}>{{{title}}}</a>\n {{#if subMenu}}\n <ul class=\"am-menu-sub am-collapse {{#if subCols}} sm-block-grid-{{subCols}}{{else}}\n sm-block-grid-1{{/if}} {{subMenuClassName}}\">\n {{#each subMenu}}\n <li class=\"{{#if subMenu}} am-parent{{/if}}{{#if className}} {{className}}{{/if}}\">\n <a href=\"{{link}}\" {{#if target}}target=\"{{target}}\" {{/if}}>{{{title}}}</a>\n </li>\n {{/each}}\n {{!-- 显示进入栏目链接 --}}\n {{#if channelLink}}\n <li class=\"am-menu-nav-channel\"><a href=\"{{link}}\" title=\"{{title}}\">{{{channelLink}}}</a></li>\n {{/if}}\n </ul>\n {{/if}}\n </li>\n {{/each}}\n </ul>\n {{/if}}\n\n {{#ifCond theme '==' 'offcanvas1'}}\n </div>\n </div>\n {{/ifCond}}\n {{#ifCond theme '==' 'offcanvas2'}}\n </div>\n </div>\n {{/ifCond}}\n {{!-- 不要问我为什么这样写,我也不想这样 --}}\n </nav>\n{{/this}}\n");
hbs.registerPartial('navbar', "{{#this}}\n <div data-am-widget=\"navbar\" class=\"am-navbar am-cf {{#if theme}}am-navbar-{{theme}}{{else}}am-navbar-default{{/if}} {{#if options.iconPosition}}am-navbar-inline{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}\"\n id=\"{{id}}\">\n {{#if content}}\n <ul class=\"am-navbar-nav am-cf {{#if options.cols}}sm-block-grid-{{options.cols}}{{/if}}\">\n {{#each content}}\n <li {{#if dataApi}}{{dataApi}}{{/if}}>\n <a href=\"{{link}}\">\n {{#if customIcon}}\n <img src=\"{{customIcon}}\" alt=\"{{title}}\"/>\n {{else}}\n {{#if icon}}\n <span class=\"am-icon-{{icon}}\"></span>\n {{/if}}\n {{/if}}\n {{#if title}}\n <span class=\"am-navbar-label\">{{title}}</span>\n {{/if}}\n </a>\n </li>\n {{/each}}\n </ul>\n {{/if}}\n </div>\n{{/this}}\n");
......
......@@ -25,8 +25,6 @@ var data = [
"title": "", // 一级菜单标题
"link": "", // 一级菜单链接
"className": "",
"target": "_blank", // 一级菜单打开方式
"subMenu": [
{ // 二级菜单
"title": "", // 二级菜单标题
......@@ -135,4 +133,4 @@ return data;
<button class="uk-button" data-am-offcanvas="{target:'#offcanvasId'}">菜单</button>
```
`data-am-offcanvas` 属性是必须的。`<a>` 作为触发元素时,target 读取 `href` 属性;使用其他元素则需要指明目标菜单。
\ No newline at end of file
`data-am-offcanvas` 属性是必须的。`<a>` 作为触发元素时,target 读取 `href` 属性;使用其他元素则需要指明目标菜单。
......@@ -1212,7 +1212,7 @@
"readme": "http://docs.yunshipei.com/amui/#menu",
"example": "/*\n 此模块的使用方法:通过循环采集数据,通过json数据返回到手机菜单部分。\n\n 常用用途:通常用来采集导航菜单的所有菜单项,有直接呈现的菜单、有下滑菜单以及侧滑菜单。\n\n 了解AMUI菜单的模块详情,请访问http://ide.yunshipei.com/doc/amui/#menu。\n\n 代码示例 —— 默认主题下:\n\n var data = [];\n $(\"#nav\").children(\"li\").each(function(){\n data.push({\n \"title\": $(this).find(\"a\").eq(0).html(),\n \"link\": $(this).find(\"a\").eq(0).attr(\"href\")\n });\n });\n return data;\n\n 代码示例 —— s2(下拉菜单)主题:\n\n var subMenu = [];\n var data = [{\n \"title\": \"\",\n \"link\": \"\",\n \"className\": \"\",\n \"target\": \"_blank\",\n\n \"subMenu\": subMenu,\n \"subCols\": 3\n }];\n $(\"#nav\").children(\"li\").each(function(i,item){\n subMenu.push({\n \"title\": $(this).find(\"a\").eq(0).html(),\n \"link\": $(this).find(\"a\").eq(0).attr(\"href\")\n });\n });\n return data;\n */\n\nvar data = [\n {\n \"title\": \"\", // 一级菜单标题\n \"link\": \"\", // 一级菜单链接\n \"className\": \"\",\n \"target\": \"_blank\", // 一级菜单打开方式\n\n \"subMenu\": [\n { // 二级菜单\n \"title\": \"\", // 二级菜单标题\n \"link\": \"\", // 二级菜单链接\n \"target\": \"\"\n }\n ],\n \"subCols\": 3 // 设置二级菜单列数\n }\n];\n\nreturn data;\n",
"example": "/*\n 此模块的使用方法:通过循环采集数据,通过json数据返回到手机菜单部分。\n\n 常用用途:通常用来采集导航菜单的所有菜单项,有直接呈现的菜单、有下滑菜单以及侧滑菜单。\n\n 了解AMUI菜单的模块详情,请访问http://ide.yunshipei.com/doc/amui/#menu。\n\n 代码示例 —— 默认主题下:\n\n var data = [];\n $(\"#nav\").children(\"li\").each(function(){\n data.push({\n \"title\": $(this).find(\"a\").eq(0).html(),\n \"link\": $(this).find(\"a\").eq(0).attr(\"href\")\n });\n });\n return data;\n\n 代码示例 —— s2(下拉菜单)主题:\n\n var subMenu = [];\n var data = [{\n \"title\": \"\",\n \"link\": \"\",\n \"className\": \"\",\n\n \"subMenu\": subMenu,\n \"subCols\": 3\n }];\n $(\"#nav\").children(\"li\").each(function(i,item){\n subMenu.push({\n \"title\": $(this).find(\"a\").eq(0).html(),\n \"link\": $(this).find(\"a\").eq(0).attr(\"href\")\n });\n });\n return data;\n */\n\nvar data = [\n {\n \"title\": \"\", // 一级菜单标题\n \"link\": \"\", // 一级菜单链接\n \"className\": \"\",\n \"subMenu\": [\n { // 二级菜单\n \"title\": \"\", // 二级菜单标题\n \"link\": \"\", // 二级菜单链接\n \"target\": \"\"\n }\n ],\n \"subCols\": 3 // 设置二级菜单列数\n }\n];\n\nreturn data;\n",
"hidden": false
}
\ No newline at end of file
}
......@@ -38,13 +38,13 @@
'==' 'slide1'}} am-collapse{{/ifCond}}">
{{#each content}}
<li class="{{#if subMenu}}am-parent{{/if}}{{#if className}} {{className}}{{/if}}">
<a href="{{link}}">{{{title}}}</a>
<a href="{{link}}" {{#if target}}target="{{target}}" {{/if}}>{{{title}}}</a>
{{#if subMenu}}
<ul class="am-menu-sub am-collapse {{#if subCols}} sm-block-grid-{{subCols}}{{else}}
sm-block-grid-1{{/if}} {{subMenuClassName}}">
{{#each subMenu}}
<li class="{{#if subMenu}} am-parent{{/if}}{{#if className}} {{className}}{{/if}}">
<a href="{{link}}">{{{title}}}</a>
<a href="{{link}}" {{#if target}}target="{{target}}" {{/if}}>{{{title}}}</a>
</li>
{{/each}}
{{!-- 显示进入栏目链接 --}}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册