工作之中的不足,报了js培训班,因为工作加班原因缺了几天课(js组件开发),现在拾起来补补

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<!-- 写组件的步骤:
1 先布局 写css
2 创建元素 插入到指定位置
3 添加事件
4 联动
5 隐藏系统元素
6 封装
    1 js
    2 css  -->
<script src="myRadio.js"></script>
<script>
//var added = true;
window.onload = function(){
    myRadio("sex");
    myRadio("city");
};
</script>
</head>
<body>

<form id="form1" action="http://www.zhinengshe.com/" >

    <input type="radio"  name="sex"  value="male"/><input type="radio" name="sex"  value="female"/><input type="radio" name="sex"  value="unknow" />未知
    <br />
    <input type="radio"  name="city"  value="city1"/>city1
    <input type="radio" name="city"  value="city2"/>city2
    <input type="radio" name="city"  value="city3" />city3
    <input type="submit"/>
</form>


</body>
</html>
//版权 北京智能社©, 保留所有权利
(function(){
var added = false;
console.log('1');
window.myRadio = function (name){
    
    var aRadio = document.getElementsByName(name);

    var aSpan = [];
    //创建span
    for(var i = 0; i < aRadio.length; i++){
        var oSpan = document.createElement("span");
        aSpan.push(oSpan);
        oSpan.className = "my_radio";
        aRadio[i].parentNode.insertBefore(oSpan,aRadio[i]);
        
        (function(index){
            oSpan.onclick = function(){
                for(var i = 0; i < aSpan.length; i++){
                    aSpan[i].className = "my_radio";
                }    
                this.className = "my_radio_active";
                aRadio[index].checked = true;
            };
        })(i);
        
        aRadio[i].style.display = "none";
    }
    console.log('aaaaaa');
    if(added) return;
    console.log('2');
    added = true;
    console.log('3');
    var oLink = document.createElement("link");
    oLink.rel = "stylesheet";
    oLink.href = "myRadio.css";
    var oHead = document.getElementsByTagName("head")[0];
    oHead.appendChild(oLink);
    
}

})();

posted on 2015-03-06 10:51  高尔础础  阅读(256)  评论(0编辑  收藏  举报