带有多个图像的自定义复选框

Custom Checkbox with multiple images

本文关键字：自定义 复选框 图像      更新时间：2023-09-26

我试图有一个图像，而不是一个文本框。我在谷歌上找到了这个网站:http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/，我真的很喜欢它的样子。但由于我需要的复选框是"分享也"在facebook和twitter我需要两个不同的图像上的复选框。我可以先修改css:

.checkboxfb {
width: 23px; height: 23px; padding: 0 5px 0 0;
background: url(images/files/ico_facebook_mult_sml2.png) no-repeat;
display: block; clear: left; float: left;}
.checkboxtw {
width: 23px; height: 22px; padding: 0 5px 0 0;
background: url(images/files/twitter_logo_mult_sml.png) no-repeat;
display: block; clear: left; float: left;}

我在html:

中区分了不同的类
<form method="post" action=".">
<input type="checkbox" name="fb" class="styledfb" />FB <br /><br />
<input type="checkbox" name="tw" class="styledtw" />TW </form>

复制脚本，FBcheckbox.js:

document.write('<style type="text/css">input.styled**fb** { display: none; } select.styled**fb** { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
inita: function() {
    var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
    for(a = 0; a < inputs.length; a++) {
        if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styledfb") {
            span[a] = document.createElement("span");
            span[a].className = inputs[a].type + "**fb**";
当然，另一个js文件将有'tw'而不是'fb'，它被称为TWcheckbox.js。(你可以在这里看到整个js: http://pasionesargentas.webatu.com/js/checkbox/FBcheckbox.js和http://pasionesargentas.webatu.com/js/checkbox/TWcheckbox.js)。

在头文件中，我调用了两个文件:

<script type="text/javascript" src="js/checkbox/FBcheckbox.js"></script>
<script type="text/javascript" src="js/checkbox/TWcheckbox.js"></script>

现在有趣的是，一次只有一个有效。在头文件中调用它们时，以第二个为准。测试文件是http://pasionesargentas.webatu.com/test1.php

您的两个脚本文件都分配您的Custom变量的值。当加载第二个文件时，它会覆盖之前对Custom的赋值。即使你有单独的inita和initb函数，当第二个JS文件被加载时，整个Custom对象被覆盖。

所以，如果FBcheckbox.js首先加载，inita在对象中定义，但是当TWcheckbox.js加载并重新分配Custom的内容而不是添加到它时，inita在页面加载事件触发时不再存在，因为TWcheckbox.js版本的Custom不包括inita。

因为在你的JS文件中Custom对象中唯一不同的函数是inita和initb，我建议将它们一起分配到一个文件中。比如:

var Custom = {
  inita: function() {
    // ...your code here...
  },
  initb: function() {
    // ...your code here...
  },
  pushed: function() {
    // ...your code here...
  },
  // etc...
};

如果你想把它们分开，你可以添加代码在对象赋值之前检查对象是否存在，如果对象存在，添加到对象中，而不是重新赋值整个对象。但是，我认为将上述两者结合起来将减少代码中的重复。

if (typeof(Custom)!="undefined" && !Custom.inita) {
  Custom.inita = function() { /* ...your code here... */ }
} else if (typeof(Custom)=="undefined") {
  var Custom = {
    // ...your code here...
  };
};

使用window.onload分配两个init函数会出现同样的问题。最近加载的JS文件将覆盖先前分配的窗口。Onload值而不是添加值。要分配多个函数来触发页面的onload，应该使用如下语法:

在FBcheckbox.js: 

if (window.addEventListener) {
    window.addEventListener("load",Customa.inita,false);
} else if (window.attachEvent) {
    window.attachEvent("onload",Customa.inita);
}
在TWcheckbox.js: 

if (window.addEventListener) {
    window.addEventListener("load",Customb.initb,false);
} else if (window.attachEvent) {
    window.attachEvent("onload",Customb.initb);
}
相关文章：