如何使用CSS和Javascript或DOJO制作自定义单选按钮

How do I make a customized Radio Button using CSS and Javascript or DOJO?

本文关键字：自定义 单选按钮 DOJO 何使用 CSS Javascript      更新时间：2024-06-27

我的分配目标图像位于：

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

我需要添加一个背景渐变一个内圈点击。我是这方面的初学者，所以任何形式的帮助或指导都会非常有帮助。

您可以添加一个带有背景的新元素，然后单击以更改实际输入的值。

代码：

<!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>

使用dijit.form.RadioButton:
从dojo explorer中为radio的开箱即用示例活样品

<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）在这里
它正在使用这些选择器进行造型：

/* 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;
}

您可以使用jqtransform jquery。

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

相关文章：