Пользовательский флажок с несколькими изображениями - PullRequest
0 голосов
/ 03 декабря 2011

Я пытаюсь получить изображение вместо текстового поля.Погуглил я нашел этот сайт: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ и мне очень нравится, как он выглядит.Но так как флажки, которые мне нужны, это «делиться также» в Facebook и twiter, мне нужно два разных изображения на флажках.Я мог бы сделать это, изменив сначала 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 вместо 'fb' будет 'tw', и он называется 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

1 Ответ

1 голос
/ 03 декабря 2011

Оба ваших файла скриптов присваивают значение вашей переменной Custom. Когда второй из двух файлов загружен, он перезаписывает предыдущее назначение на Custom. Даже если у вас есть отдельные функции inita и initb, весь объект Custom перезаписывается при загрузке второго файла JS.

Таким образом, если FBcheckbox.js загружается первым, inita определяется внутри объекта, но когда TWcheckbox.js загружает и переназначает содержимое Custom вместо добавления к нему, inita больше не существует, когда страница событие load запускается, потому что версия TWcheckbox.js Custom не включает inita.

Поскольку кажется, что единственными функциями, которые отличаются в пределах объекта Custom в ваших файлах JS, являются 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 представляет одну и ту же проблему. Файл JS, загруженный последним, перезапишет ранее назначенное значение window.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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...