平均宽度 equallyWidth
JSHOP 2014-01-14 13:40:45
评论:0 浏览:11581
方法描述

根据父节点宽度,平均分配子节点宽度。

应用场景

主要应用于导航、商品分类推荐等模块中。避免因数量较少而容器右边出现空白的情况。

方法参数
名称 类型 描述
调用语句 <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;}
名称 类型 描述