仿选择版本页

仿选择版本页

描述：
有不同组类型，即类型A和类型B，类型包含具体型号类型如A_a、A_b等等。
具体型号类型有三种状态：可选状态、选中状态、不可选状态，可选状态具有态胎效果。
选中状态时按钮下一步变为可点击状态。

基础知识：
css方面内外边距的使用、二态效果、样式表中的类的使用等
js方面设计点击事件、闭包等。

效果如下图：

js源码及简单介绍：

/*
*  getId函数
*  功能：获取元素ID
*/
function getId(){
    return document.getElementById(arguments[0]);
}

/*
*  getTagNames函数
*  参数kname：元素标签名称
*  参数pid：元素ID（可选）
*  功能：获取指定元素对象的集合
*/
function getTagNames(kname,pid){
    if(arguments.length === 1){
        return document.getElementsByTagName(kname);
    }
    else if(arguments.length === 2){
        return getId(pid).getElementsByTagName(kname);
    }
    else{
        alert("参数错误");
    }
}

/*
*  addEvent函数
*  参数kid：元素ID
*  参数ktype：事件类型
*  参数fn： 回调函数
*  功能：兼容IE6-8浏览器，封装事件绑定
*/
function addEvent(kid,ktype,fn){
    if(kid.addEventListener){
        kid.addEventListener(ktype,fn,false);
    }
    else if(kid.attachEvent){
        kid.attachEvent('on'+ktype,fn);
    }
    else{
        kid['on'+ktype]=fn;
    }
}


var chooseArr = getTagNames("a","choose"),utype = null;

for(var i = 0, l = chooseArr.length; i < l ; i++){
    (function(index){
        addEvent(chooseArr[index],'click',function(){
            if(!(chooseArr[index].className === "saled" || chooseArr[index].className === "selected")){
                for(var j = 0,len = chooseArr.length; j < len; j++){
                    if(!(chooseArr[j].className === "saled")){
                        chooseArr[j].className = "";
                    }
                }
                chooseArr[index].className = "selected";
                utype = chooseArr[index].getAttribute("utype");
                getId("btn").className = "btnnext";
            }
        });
    })(i);
}

addEvent(getId("btn"),"click",function(){
    if(this.className.indexOf("unbtn")===-1){
        alert(utype);
    }
});

css源码及简单介绍：

.kchoose li dd a{ display: inline-block; width: 133px; height: 68px;  text-align: center; background: #ffffff; border: 1px solid #83b3e3; box-shadow: 0 3px 4px #e1e1e1; cursor: pointer; margin-right: 10px; overflow: hidden;  vertical-align: middle;}
.kchoose li dd a:hover{border: 1px solid #FD6639;}
.kchoose li dd a strong{ display: block; font-size: 18px; margin: 25px 0px; }
.kchoose li dd a span{display: none;}
.kchoose li dd a.selected{width: 129px; height: 64px; border: #FD6639 3px solid; cursor: default;}
.kchoose li dd a.selected strong{ display: block; font-size: 18px;  }
.kchoose li dd a.saled{ border: 1px solid #dedede; background: #f1f1f1; cursor: default;}
.kchoose li dd a.saled strong{color: #999999; margin: 15px 0px 3px; }
.kchoose li dd a.saled span{color: #999999; display: block; }

详细源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>选择类型</title>
        <style>
            *{margin:0px; padding:0px; font-size: 12px; line-height: 20px;}
            ol, ul,li {list-style: none;}
            .cfl{*zoom:1;}
            .cfl:after{content:"\0020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
            .kchoose{width: 960px; margin: 10px auto 0px;}
            .kchoose .ktype{margin-bottom: 10px;}
            .kchoose li{width: 670px; padding: 0px 0px 30px 25px; border-bottom: #e1e1e1 1px solid;}
            .kchoose li h2{font-size: 18px; padding: 35px 0px 20px;}
            .kchoose li dl{float: left;width: 50%; }
            .kchoose li dt{}
            .kchoose li dt strong{display: block; padding: 0px 0px 6px; font-size: 14px; color: #666666;}
            .kchoose li dt em{display: block; padding: 0px 0px 20px 0px ;font-style: normal; color: #999999;}
            .kchoose li dd{}
            .kchoose li dd a{ display: inline-block; width: 133px; height: 68px;  text-align: center; background: #ffffff; border: 1px solid #83b3e3; box-shadow: 0 3px 4px #e1e1e1; cursor: pointer; margin-right: 10px; overflow: hidden;  vertical-align: middle;}
            .kchoose li dd a:hover{border: 1px solid #FD6639;}
            .kchoose li dd a strong{ display: block; font-size: 18px; margin: 25px 0px; }
            .kchoose li dd a span{display: none;}
            .kchoose li dd a.selected{width: 129px; height: 64px; border: #FD6639 3px solid; cursor: default;}
            .kchoose li dd a.selected strong{ display: block; font-size: 18px;  }
            .kchoose li dd a.saled{ border: 1px solid #dedede; background: #f1f1f1; cursor: default;}
            .kchoose li dd a.saled strong{color: #999999; margin: 15px 0px 3px; }
            .kchoose li dd a.saled span{color: #999999; display: block; }
            .choosebtm{width: 695px; padding: 10px 0px 0px 0px; text-align: right;}
            .btnnext{width: 170px; height: 50px; line-height: 50px; text-align: center; font-size: 24px; color: #FFF; background: #FE6539; border-radius: 5px; border: none; cursor: pointer;}
            .unbtn{background: #e1e1e1; cursor: default;}
        </style>
    </head>
    <body>
        <form>
            <div class="kchoose">
                <ul id="choose">
                    <li>
                        <span class=""></span>
                        <h2>类型A</h2>
                        <div class="ktype cfl">
                            <dl>
                                <dt>
                                    <strong>A类型</strong>
                                    <em>AAAAAAAA</em>
                                </dt>
                                <dd class="cfl">
                                    <a class="selected" utype="A_a">
                                        <strong>A_a类型</strong>
                                        <span>无</span>
                                    </a>
                                    <a class="saled" utype="A_b">
                                        <strong>A_b类型</strong>
                                        <span>无</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <strong>A类型加强版</strong>
                                    <em>AAAAAAAA</em>
                                </dt>
                                <dd class="cfl">
                                    <a utype="A_c">
                                        <strong>A_c类型</strong>
                                        <span>无</span>
                                    </a>
                                    <a utype="A_d">
                                        <strong>A_d类型</strong>
                                        <span>无</span>
                                    </a>
                                </dd>
                            </dl>
                        </div>
                        <p>
                            选择A类型。。。
                        </p>
                    </li>
                    <li>
                        <span class=""></span>
                        <h2>B类型</h2>
                        <div class="cfl">
                            <dl>
                                <dt>
                                    <strong>B类型</strong>
                                    <em>BBBBBBBB</em>
                                </dt>
                                <dd>
                                    <a utype="B_a">
                                        <strong>B_a类型</strong>
                                        <span>无</span>
                                    </a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                </ul>
                <div class="choosebtm">
                    <input id="btn" class="btnnext unbtn" type="button" value="下一步" />
                </div>
            </div>
        </form>
        <script type="text/javascript">
            /*
            *  getId函数
            *  功能：获取元素ID
            */
            function getId(){
                return document.getElementById(arguments[0]);
            }

            /*
            *  getTagNames函数
            *  参数kname：元素标签名称
            *  参数pid：元素ID（可选）
            *  功能：获取指定元素对象的集合
            */
            function getTagNames(kname,pid){
                if(arguments.length === 1){
                    return document.getElementsByTagName(kname);
                }
                else if(arguments.length === 2){
                    return getId(pid).getElementsByTagName(kname);
                }
                else{
                    alert("参数错误");
                }
            }

            /*
            *  addEvent函数
            *  参数kid：元素ID
            *  参数ktype：事件类型
            *  参数fn： 回调函数
            *  功能：兼容IE6-8浏览器，封装事件绑定
            */
            function addEvent(kid,ktype,fn){
                if(kid.addEventListener){
                    kid.addEventListener(ktype,fn,false);
                }
                else if(kid.attachEvent){
                    kid.attachEvent('on'+ktype,fn);
                }
                else{
                    kid['on'+ktype]=fn;
                }
            }


            var chooseArr = getTagNames("a","choose"),utype = null;

            for(var i = 0, l = chooseArr.length; i < l ; i++){
                (function(index){
                    addEvent(chooseArr[index],'click',function(){
                        if(!(chooseArr[index].className === "saled" || chooseArr[index].className === "selected")){
                            for(var j = 0,len = chooseArr.length; j < len; j++){
                                if(!(chooseArr[j].className === "saled")){
                                    chooseArr[j].className = "";
                                }
                            }
                            chooseArr[index].className = "selected";
                            utype = chooseArr[index].getAttribute("utype");
                            getId("btn").className = "btnnext";
                        }
                    });
                })(i);
            }

            addEvent(getId("btn"),"click",function(){
                if(this.className.indexOf("unbtn")===-1){
                    alert(utype);
                }
            });
            
        </script>
    </body>
</html>

View Code

posted @ 2013-06-02 20:51 前端咖阅读(493) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端咖

仿选择版本页

公告