js组件的写法

最新推荐文章于 2018-05-16 17:29:03 发布

weixin_30800807

最新推荐文章于 2018-05-16 17:29:03 发布

阅读量54

点赞数

原文链接：http://www.cnblogs.com/heboliufengjie/p/4317562.html

版权

工作之中的不足，报了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);
    
}

})();

转载于:https://www.cnblogs.com/heboliufengjie/p/4317562.html

weixin_30800807

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js组件的写法

工作之中的不足，报了js培训班，因为工作加班原因缺了几天课（js组件开发），现在拾起来补补<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="智能社 - zhinengshe.com" /><meta ...
复制链接

扫一扫