注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幽狼De博客

记录成长中的点点滴滴

 
 
 

日志

 
 

网店常用的商品属性选择功能  

2011-03-25 09:35:20|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>中国站长天空-网页特效-综合特效-网店常用的商品属性选择功能</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{margin:0;padding:0;}
body{background-color:#FFF;color:#000;text-align:center;font:normal 12px Arial,Helvetica,sans-serif;}    
ul,li{list-style-type:none;}
img{border:0;}
h1,h2,h3,h4,h5,h6,div,p,li,td,th{text-align:left;}
a:link,a:visited,a:hover{text-decoration:none;color:#000;padding:3px;}
a:hover{text-decoration:underline;background-color:#F1F1F1;color:#C80000;}
.md{margin:10px auto;width:96%;padding:5px;border:1px solid #c1c1c1;overflow:hidden;}
.hd,.bd{margin:0 auto;width:100%;overflow:hidden;}
.hd{height:30px;line-height:30px;background-color:#F1F1F1;overflow:hidden;}
.hd h2{float:left;font-size:14px;text-indent:10px;}
.hd span{float:left;margin-right:5px;margin-top:3px;display:inline;height:16px;line-height:16px;padding:3px;border:1px solid #ccc;}
.bd h3{float:left;width:60px;font-size:12px;text-align:right;padding:5px 0;height:24px;line-height:24px;overflow:hidden;}
.bd ul{float:left;width:530px;overflow:hidden;padding:5px 0;}
.bd li{float:left;height:24px;line-height:24px;padding-right:10px;overflow:hidden;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="md" id="select">
<div class="hd" id="selected"><h2>您选择的东西:</h2></div>    
<div class="bd">
    <h3 id="size">尺寸:</h3>
    <ul>
        <li><a href="http://frieboy168.blog.163.com/blog/#S">S(小号)</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#M">M(中号)</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#L">L(大号)</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#XL">XL(加大号)</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#XXL">XXL(加加大号)</a></li>
    </ul>
</div>    
<div class="bd">
    <h3 id="color">颜色:</h3>
    <ul>
        <li><a href="http://frieboy168.blog.163.com/blog/#white">白色</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#black">黑色</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#red">红色</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#yellow">黄色</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#orange">橙色</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#blue">蓝色</a></li>
    </ul>
</div>    
<div class="bd">
    <h3 id="prize">价格:</h3>
    <ul>
        <li><a href="http://frieboy168.blog.163.com/blog/#50">50</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#50-100">51-100</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#101-200">101-200</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#201-300">201-300</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#301-400">301-400</a></li>
        <li><a href="http://frieboy168.blog.163.com/blog/#401">400以上</a></li>
    </ul>
</div>
</div>    
<script type="text/javascript">
(function(){
    var doc = document,
    byId = function(el){
        if (el.tagName && el.nodeType === 1) {
            return el;
        }
        else {
            if (doc.getElementById) {
                return doc.getElementById(el);
            }
            else {
                return false;
            }
        }
    },
    stopEvent = function(ev){
        stopPropagation(ev);
        preventDefault(ev);
    },
    stopPropagation = function(ev){
        if (ev.stopPropagation) {
            ev.stopPropagation();
        }
        else {
            ev.cancelBubble = true;
        }
    },
    preventDefault = function(ev){
        if (ev.preventDefault) {
            ev.preventDefault();
        }
        else {
            ev.returnValue = false;
        }
    },
    regexCache = {},
    getRegExp = function(str, flags) {
        flags = flags || '';
        regexCache = regexCache || {};
        if (!regexCache[str + flags]) {
            regexCache[str + flags] = new RegExp(str, flags);
        }
        return regexCache[str + flags];
    },
    hasClass = function(node, className){
        var re = getRegExp('(?:^|\\s+)' + className + '(?:\\s+|$)');
        return re.test(node.className);
    },
    byClass = function(className, tag, root){
        var elems = [],
            i,
            tempCnt = byId(root || doc).getElementsByTagName(tag),
            len = tempCnt.length;
        for (i = 0; i < len; ++i) {
            if (hasClass(tempCnt[i], className)) {
                elems.push(tempCnt[i]);
            }
        }
        if (elems.length < 1) {
            return false;
        }
        else {
            return elems;
        }
    };
    function selectedItem(){
        var root = byId('select'),
            container = null,
            header = null,
            titles = null,
            lists = null,
            items = null,
            li = null,
            i =0,
            len = 0;
        if (!root) {
            return false;
        }
        header = byId('selected');
        containers = byClass('bd', 'div', root);
        lists = root.getElementsByTagName('ul');
        titles = root.getElementsByTagName('h3');
        for (len = lists.length; i < len; i += 1) {
            (function(idx){
               var list = lists[idx], items = list.getElementsByTagName('li'), j = 0, leng = 0;
               for (leng = items.length; j < leng; j += 1) {
                   items[j].onclick = function(index){
                          return function(event){
                              var evt = event || window.event,
                           ul = lists[idx],
                           lis = ul.getElementsByTagName('li'),
                           el = lis[index],
                           len = lis.length,
                           container = containers[idx],
                           title = titles[idx].innerHTML,
                           info = title + (el.textContent || el.innerText),
                           addInfo = doc.createElement('span');
                           if(len>0){
                                  addInfo.innerHTML = info;
                               header.appendChild(addInfo);
                                  ul.removeChild(el);
                           }
                               selectedItem();
                           stopEvent(evt);
                       };
                   }(j);
               }
            })(i);
        }
    }
    selectedItem();
})();    
</script>
</body>
</html>
  评论这张
 
阅读(513)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017