0

私の割り当て対象の画像は次の場所にあります。

リンク: http://i46.tinypic.com/w1uqza.png

onclick の内側の円に背景グラデーションを追加する必要があります。私はこれの初心者なので、これに関するあらゆる種類のヘルプまたは方向性が非常に役立ちます.

4

3 に答える 3

0

背景に新しい要素を追加し、クリックして実際の入力の値を変更できます。

コード：

<!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-02T11:07:57.123 に答える
0

dijit.form.RadioButton を使用した、ラジオ用の Dojo Explorer からのすぐに使えるサンプル:
ライブ サンプル

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

ラジオ用の Nihilo スプライト (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;
}
于 2012-08-02T13:31:28.747 に答える
-2

jqtransform jquery を使用できます。

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

于 2012-08-02T11:22:47.110 に答える