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

商品颜色尺寸仿淘宝选择功能教程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;}.catta{border:#c8c9cd1pxsolid;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;}.catta:hover{border:#ff67012pxsolid;margin:-1px;margin-left:4px;margin-top:5px;}.catta:focus{outline-style:none;}.catt.cattsel{border:#ff67012pxsolid;margin:-1px;background:url(images/test.gif)no-repeatbottomright;margin-left:4px;margin-top:5px;}.catt.cattsela:hover{border:#ff67012pxsolid;margin:-1px;background:url(images/test.gif)no-repeatbottomright;}3.打开/themes/ecshop/goods.dwt注:以下修改以原版ecshop2.7.0版本default(模板名称)为基准未修改前第347-351行!--{foreachfrom=$spec.valuesitem=valuekey=key}--labelfor=spec_value_{$value.id}inputtype=radioname=spec_{$spec_key}value={$value.id}id=spec_value_{$value.id}{if$keyeq0}checked{/if}onclick=changePrice()/{$value.label}[{if$value.pricegt0}{$lang.plus}{elseif$value.pricelt0}{$lang.minus}{/if}{$value.format_price|abs}]/labelbr/!--{/foreach}--修改为：divclass=catt!--{foreachfrom=$spec.valuesitem=valuekey=key}--a{if$keyeq0}class=cattsel{/if}onclick=changeAtt(this)href=javascript:;name={$value.id}title=[{if$value.pricegt0}{$lang.plus}{elseif$value.pricelt0}{$lang.minus}{/if}{$value.format_price|abs}]{$value.label}inputstyle=display:noneid=spec_value_{$value.id}type=radioname=spec_{$spec_key}value={$value.id}{if$keyeq0}checked{/if}//a!--{/foreach}--/div二:增加js控制样式与选中行为搜索functionchangePrice()在其上面添加一个js函数functionchangeAtt(t){t.lastChild.checked='checked';for(vari=0;it.parentNode.childNodes.length;i++){if(t.parentNode.childNodes[i].className=='cattsel'){t.parentNode.childNodes[i].className='';}}t.className=cattsel;changePrice();}说明:1.以上修改会将商品属性部分所有radio修改.2.由于用户goods.dwt可能都被修改过,用户请根据自己的实际情况修改.代码非原创，不解答……用到一个图片素材，url(images/test.gif)截图，和淘宝一样的……-----------------------------------------------------------------------------------------------------------------------------商品颜色尺寸仿淘宝选择功能教程(2.7.0版本)ECSHOP模板堂/2010-01-23原理: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;}.catta{border:#c8c9cd1pxsolid;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;}.catta:hover{border:#ff67012pxsolid;margin:-1px;margin-left:4px;margin-top:5px;}.catta:focus{outline-style:none;}.catt.cattsel{border:#ff67012pxsolid;margin:-1px;background:url(images/test.gif)no-repeatbottomright;margin-left:4px;margin-top:5px;}.catt.cattsela:hover{border:#ff67012pxsolid;margin:-1px;background:url(images/test.gif)no-repeatbottomright;}3.打开/themes/ecshop/goods.dwt注:以下修改以原版ecshop2.7.0版本default(模板名称)为基准未修改前第347-351行!--{foreachfrom=$spec.valuesitem=valuekey=key}--labelfor=spec_value_{$value.id}inputtype=radioname=spec_{$spec_key}value={$value.id}id=spec_value_{$value.id}{if$keyeq0}checked{/if}onclick=changePrice()/{$value.label}[{if$value.pricegt0}{$lang.plus}{elseif$value.pricelt0}{$lang.minus}{/if}{$value.format_price|abs}]/labelbr/!--{/foreach}--修改为：divclass=catt!--{foreachfrom=$spec.valuesitem=valuekey=key}--a{if$keyeq0}class=cattsel{/if}onclick=changeAtt(this)href=javascript:;name={$value.id}title=[{if$value.pricegt0}{$lang.plus}{elseif$value.pricelt0}{$lang.minus}{/if}{$value.format_price|abs}]{$value.label}inputstyle=display:noneid=spec_value_{$value.id}type=radioname=spec_{$spec_key}value={$value.id}{if$keyeq0}checked{/if}//a!--{/foreach}--/div此处为是了将radio换成淘宝上那种小矩形样式显示在页面.二:增加js控制样式与选中行为在页面内找到script这样的东西,在其后面添加一个js函数functionchangeAtt(t){t.lastChild.checked='checked';for(vari=0;it.parentNode.childNodes.length;i++){if(t.parentNode.childNodes[i].className=='cattsel'){t.parentNode.childNodes[i].className='';}}t.className=cattsel;changePrice();}此处是为了控制选择页面上的颜色同时也选中了对应的隐藏input从而来更改商品属性.如:价钱...等.如果是用户修改过的goods.dwt可搜索:functionchangePrice()在其上面添加.说明:1.以上修改会将商品属性部分所有radio修改.2.由于用户goods.dwt可能都被修改过,用户请根据自己的实际情况修改.3:对于颜色选择功能,这是目前最简单的实现方法.文中所用附件test.gif如下:效果图如下请注明转自：ECshop模板堂（全国最专业的ECSHOP模板制作商）