如何使用CSS和Javascript或DOJO製作定製的單選按鈕？

我的任務目標圖像是：如何使用CSS和Javascript或DOJO製作定製的單選按鈕？

鏈接：http://i46.tinypic.com/w1uqza.png

我需要的onclick添加背景漸變的內圓。我是這個初學者，所以任何形式的幫助或方向都會很有幫助。

2012-08-02 Sac

如何使用JQuery？在stackoverflow快速搜索給了我：http://uniformjs.com/編輯：可能重複http://stackoverflow.com/questions/3114166/replacing-radio-buttons-with-different-images – emu 2012-08-02 09:49:00

我只是做一個網站的一部分。我寧願與DOJO或Plain JavaScript合作，因爲網站的其他部分使用DOJO。 – Sac 2012-08-02 09:52:07

可以使用CSS3嗎？您完全不需要Javascript：http://acidmartin.wordpress.com/2011/02/24/custom-crossbrowser-styling-for-checkboxes-and-radio-buttons/ – emu 2012-08-02 10:16:27

-2

你可以使用jQuery的jqtransform它。

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

來源

2012-08-02 11:22:47 Carlos

-1問題未標記jquery amg，甚至標題要求道場解決方案 – mschr 2012-09-26 17:57:37

您可以使用背景添加一個新元素，然後單擊以更改實際輸入的值。

代碼：

<!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> 
    <title></title> 
    <style type="text/css"> 
     .refRadio 
     { 
      height:30px; 
      width:35px; 
      background-image:url(http://i46.tinypic.com/w1uqza.png); 
      background-position:-8px center; 
      display:inline-block; 
      vertical-align:middle; 
     } 
     .refRadio.checked 
     { 
      background-position:76px center; 
     } 
     input.refRadio 
     { 
      display:none; 
     } 
    </style> 
</head> 
<body> 
    <div style=" line-height:40px; " > 
     <input type="radio" class="refRadio" name="name" value="Yes" /> Yes 
     <input type="radio" class="refRadio" name="name" value="No" /> No 
     <input type="radio" class="refRadio" name="name" value="No" /> No 
    </div> 
    <script type="text/javascript"> 
     function setupRadios() { 
      var inputs = document.getElementsByTagName("input"); 
      for (var i = 0; i < inputs.length; i++) { 
       if (inputs[i].className != "refRadio") 
        continue; 
       var input = inputs[i]; 
       var parent = input.parentNode; 
       var newInput = document.createElement("span"); 
       newInput.setAttribute("class", "refRadio"); 
       newInput.setAttribute("data-value", input.value); 
       newInput.input = input; 
       input.newInput = newInput; 
       input.changed = function() { 
        if(!this.newInput) 
         return; 
        if (this.checked) 
         this.newInput.className = "refRadio checked"; 
        else 
         this.newInput.className = "refRadio"; 
       } 
       parent.insertBefore(newInput, input); 
       function click() { 
        this.input.checked = true; 
        this.className = "refRadio checked"; 

        for (var i = 0; i < inputs.length; i++) { 
         var input = inputs[i]; 
         input.changed.apply(input); 
        } 
       } 
       newInput.onclick = click; 
      } 
     } 
     setupRadios(); 
    </script> 
</body> 
</html>

來源

2012-08-02 11:07:57 Charlie

在此處查看：http：// jsfiddle.net/ptE28/1/ – Charlie 2012-08-02 11:14:49

缺貨的現成從道場探險樣品用於無線電的使用dijit.form.RadioButton：
Live sample

<p> 
    <span>Radio group #1:</span> 
    <input dojoType="dijit.form.RadioButton" type="radio" name="g1" id="g1rb1" value="news"> 
    <label for="g1rb1">news</label> 
    <input dojoType="dijit.form.RadioButton" type="radio" name="g1" id="g1rb2" value="talk" 
     checked="checked"/> 
    <label for="g1rb2">talk</label> 
    <input dojoType="dijit.form.RadioButton" type="radio" name="g1" id="g1rb3" value="weather" 
     disabled="disabled"/> 
    <label for="g1rb3">weather</label> 
</p>

無中生有精靈（imagegry），用於無線電設備的是here
而它使用這些選擇器來做造型：

/* standard */ 
.nihilo .dijitRadio, .nihilo .dijitToggleButton .dijitRadioIcon { 
background-position: -16px; 
} 
/* if checked */ 
.nihilo .dijitRadioChecked, .nihilo .dijitToggleButtonChecked .dijitRadioIcon { 
background-position: 0px; 
} 
/* if disabled */ 
.nihilo .dijitRadioDisabled { 
background-position: -32px; 
} 
.nihilo .dijitRadio, .nihilo .dijitRadioIcon { 
background-image: url(images/spriteRadio.gif); 
background-repeat: no-repeat; 
width: 16px; 
height: 16px; 
margin: 0; 
padding: 0; 
}

來源

2012-08-02 13:31:28 mschr

您的圖像設置在小提琴在這裏：http://jsfiddle.net/seeds/u5dbY/1/ – mschr 2012-08-02 13:43:15

如何使用CSS和Javascript或DOJO製作定製的單選按鈕？

回答

相關問題