商品颜色尺寸仿淘宝择选功能教程.doc

商品颜色尺寸仿淘宝选择功能教程ECSHOP 商品颜色尺寸仿淘宝选择功能教程ECSHOP 原理:1:css控制本来要显示的radio为一小矩形.2:当点击此小矩形时,js使此radio选中,同时改变此小矩形的外观样式.牵涉到的修改文件(default模板为例)/themes/default/style.css/themes/default/goods.dwt注:此路径待修改模板路径.修改步骤:一:控制样式1.打开/themes/ecshop/images加添图片test.gif.2.打开/themes/ecshop/style.css最下面添加: /*--------------颜色选择器CSS添加-------------*/ .catt{width:100%;height:auto;overflow:hidden;padding-bottom:5px;} .catt a{border: #c8c9cd 1px solid; text-align: center; background-color: #fff; margin-left:5px;margin-top:6px;padding-left: 10px;padding-right: 10px;display: block; white-space: nowrap; color: #000; text-decoration: none;float:left;} .catt a:hover {border:#ff6701 2px solid; margin: -1px; margin-left:4px;margin-top:5px;} .catt a:focus {outline-style:none;} .catt .cattsel {border:#ff6701 2px solid; margin: -1px;background: url(images/test.gif) no-repeat bottom right; margin-left:4px;margin-top:5px;} .catt .cattsel a:hover {border: #ff6701 2px solid;margin:-1px;background: url(images/test.gif) no-repeat bottom right;} 3.打开/themes/ecshop/goods.dwt注:以下修改以原版ecshop2.7.0版本default(模板名称)为基准未修改前第347-351行 !-- {foreach from=$spec.values item=value key=key} -- label for=spec_value_{$value.id} input type=radio name=spec_{$spec_key} value={$value.id} id=spec_value_{$value.id} {if $key eq 0}checked{/if} onclick=changePrice() / {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] /labelbr / !-- {/foreach} -- 修改为： div class=catt !-- {foreach from=$spec.values item=value key=key} -- a {if $key eq 0}class=cattsel{/if} onclick=changeAtt(this) href=javascript:; name={$value.id} title=[{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}]{$value.label}input style=display:none id=spec_value_{$value.id} type=radio name=spec_{$spec_key} value={$value.id} {if $key eq 0}checked{/if} //a !-- {/foreach} -- /div 二:增加js控制样式与选中行为搜索function changePrice()在其上面添加一个js函数 function changeAtt