使用原生JS 定义一个控件

为了更新使新人学习js的封装，下在写了一个简单的控件~ 

先看控件的效果


我们在做控件前一般肯定要先把样式定义好了！先贴样式了。

View Code 
.Ashu-OrderState {
    background: url(../images/time.png) no-repeat center center;
    height: 80px;
    width: 780px;
    margin: auto;
    text-align: center;
}

.Ashu-OrderState ul{
    height: 28px;
    width: 100%;
    text-align:center ;
    margin:0;
    padding-top: 25px;
}
.Ashu-OrderState ul li{
    list-style-type: none;
    float: left;
    height: 28px;
    width: 25%;
    background: url(../images/time_y.png) no-repeat center center;
    font-family: "宋体";
    line-height: 28px;
    color: #919191;
    text-align:center ;
}

.Ashu-OrderState ul li span{
    display: block;
    position: relative;
    top: 0px;
    font-family: "宋体";
    font-size: 13px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
}
.Ashu-OrderState ul .curr {
    color: #ffffff;
    background-image: url(../images/y_blue.png);
}
.Ashu-OrderState ul .curr span{
    color: #990000;
}

下面直接贴我们实现的js部份了，这里我全是用的原生js

View Code 
//调用数据
oProgress = [{ value: 1, text: "创建订单" }, { value: 2, text: "付款订单" }, { value: 3, text: "发货订单" }, { value: 4, text: "完成订单" }];

//定义一个控件并初始化
var ashuControl = {
    //初始化函数，进行各种属性设置，代替了构造函数的作用
    defalutOrderStateWidth: 780,
    setOrderstate: function () {
        //控件宽度
        var defalutOrderStateWidth = this.defalutOrderStateWidth;
        //取到页面对像  //设置状态控件  使用样式Ashu-OrderState
        var obj = document.getElementsByClassName("Ashu-OrderState");
        for (var i = 0; i < obj.length; i++) {
            obj[i].width = ashuControl.defalutOrderStateWidth;
            //获取对像节点数据
            var data = eval(obj[i].getAttribute("data"));
            if (data != null && data != "undefined") {
                //设置单个点的平均宽度
                var liwidth = ashuControl.defalutOrderStateWidth / data.length;
                var html = "<ul>";
                //循环附值
                for (var order = 0; order < data.length; order++) {
                    if (obj[i].getAttribute("value") == data[order].value) {
                        html += "<li class=\"curr\" style=\"width:" + liwidth + "px\">" + data[order].value + "<span>" + data[order].text + "</span></li>";
                    } else {
                        html += "<li style=\"width:" + liwidth + "px\">" + data[order].value + "<span>" + data[order].text + "</span></li>";
                    }
                }
                html += "</ul>";
                obj[i].innerHTML = html;
            } else {
                //检测是否填写数据
                if (obj[i].getAttribute("data") != "")
                    alert("加载数据失败!");
            }
        };
    }
};



//定义自动加载事件，类似于body的load里的事件
window.onload = function () {
    var obj = document.getElementsByClassName("Ashu-OrderState");
    for (var i = 0; i < obj.length; i++) {
        if (obj[i].getAttribute("onload").toLowerCase() == "true") {
            obj[i].width = ashuControl.defalutOrderStateWidth;
            //获取对像节点数据
            var data = eval(obj[i].getAttribute("data"));
            if (data != null && data != "undefined") {
                //设置单个点的平均宽度
                var liwidth = ashuControl.defalutOrderStateWidth / data.length;
                var html = "<ul>";
                //循环附值
                for (var order = 0; order < data.length; order++) {
                    if (obj[i].getAttribute("value") == data[order].value) {
                        html += "<li class=\"curr\" style=\"width:" + liwidth + "px\">" + data[order].value + "<span>" + data[order].text + "</span></li>";
                    } else {
                        html += "<li style=\"width:" + liwidth + "px\">" + data[order].value + "<span>" + data[order].text + "</span></li>";
                    }
                }
                html += "</ul>";
                obj[i].innerHTML = html;
            } else {
                //检测是否填写数据
                if (obj[i].getAttribute("data") != "")
                    alert("加载数据失败!");
            }
        }
    }
};


在Html调用数据是原此的简单

View Code 
<!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>
    <link rel="stylesheet" href="style/css/site.css" />
    <script src="style/js/Common.js" type="text/javascript"></script>
</head>
    <body>
        <div onload="true" class="Ashu-OrderState" data="oProgress"  value="2"></div>
    </body>
</html>

 没看到上传附件哦，Demo没法传~

 

posted @ 2013-05-09 16:01  □『孤獨~寂  阅读(263)  评论(0)    收藏  举报