平均宽度 equallyWidth
方法描述
根据父节点宽度,平均分配子节点宽度。
应用场景
主要应用于导航、商品分类推荐等模块中。避免因数量较少而容器右边出现空白的情况。
方法参数
名称 | 值 | 类型 | 描述 |
---|---|---|---|
调用语句 | <div class="j-module" module-function="equallyWidth" module-param="{参数一:值,参数二:值,...>模板代码</div> | 方法调用 | 支持传入参数 |
参数 | |||
节点 | equallyNode | string | 需要平均父级宽度的节点,如:{equallyNode:'.jSortTab span'} |
父级节点 | equallyParentNode | string | equallyParentNode为父级节点,如果此参数没传则默认为当前引用此方法的节点。,如:{equallyParentNode:'.jSortTab'} |
可使用模块
- 导航
- 商品分类推荐
- 更多效果等您发挥
导航DEMO
<div class="j-module" module-function="equallyWidth" module-param="{equallyNode:'li'}">
<ul>
#set($index =1)
#foreach($!link in $!linkContent)
#if($index == 1)
<li><a href="$!link.url" target="_blank">$!link.name</a></li>
#else
<li><a href="$!link.url" target="_blank">$!link.name</a></li>
#end
#set($index = $index+1)
#end
</ul>
</div>
.userjNav .mc{height:50px; line-height:50px; background:#f9f4ed url(//img30.360buyimg.com/cms/g5/M00/00/00/rBEIDE-2FD0IAAAAAAAIWvz1wxwAAAARgK8OH8AAAhy074.gif) repeat-x;}
.userjNav .mc ul{overflow:hidden;}
.userjNav .mc li{float:left; display:inline; overflow:hidden; border-left:solid 1px #29a4df; border-right:solid 1px #0783bb;}
.userjNav .mc li a{display:block; padding:0 20px; font-weight:bold; font-size:14px; color:#fff;}
.userjNav .mc li.fore{border-left:0;}
.userjNav .mc li a:hover{color:#fff; background:#f9f4ed url(//img30.360buyimg.com/cms/g5/M00/00/00/rBEDik-2FFIIAAAAAAAIWopixrkAAAARgP_3ucAAAhy572.gif) repeat-x;}
.userjNav li.noBg{border-right:0;}