2

HTMLフォームを実装しています。フィールド (天気) の 1 つで、ユーザーは一連のオプション (晴れ、曇り、雨など) のいずれかを選択する必要があります。

したがって、基本的には、ユーザーが選択できる一連の画像 (私が提供するもの) を提供する<select>orの素敵な代替品を探しています。<radio>選択されていないアイテムを表す各画像の鈍い/灰色のバージョンを作成します。

これを提供するjQuery評価コントロールをたくさん見つけましたが、私が望むものを完全に実行するものは何もありません(おそらく、それが何と呼ばれているのか本当にわからないため、Googleで検索できないためです。)

ああ、ユーザーが JavaScript を有効にしていない場合は、標準<select>または<radio>オプションを提供するために適切に機能を低下させる必要があります。

4

1 に答える 1

3

あなたはかなり簡単に自分自身を転がすことができます。次のようなマークアップから始めます。

<fieldset>
    <input type="radio" name="weather" value="sunny" />
    <input type="radio" name="weather" value="cloudy" />
    <input type="radio" name="weather" value="rainy" />
    <input type="radio" name="weather" value="class-3-kill-storm" />
</fieldset>

JavaScript を有効にしないと、ユーザーは上記のようになります (おそらく、ラベル要素をいくつか追加して、ユーザーが何をクリックしたかがわかるようにする必要があります;)。次に、それらすべてをループして<a>、アイコンに必要な要素を作成します。

$('input[name=weather]').each(function() {
    var radio = $(this);
    radio.css({display: 'none'});

    var icon = $('<a class="icon ' + this.value + '"></a>');
    icon.click(function(e) {
        // stop default link click behaviour
        e.preventDefault();

        // unmark any previously selected image and mark clicked selected
        icon.siblings('.icon').removeClass('selected');
        icon.addClass('selected');

        // set associated radio button's value
        radio.attr('checked', 'true');
    });
    $(this).parent().append(icon);
});

私が を使用している理由は、IE がCSS 疑似クラス<a>を適切に尊重するからです。:hoverまた、CSS スプライトを使用しているため、灰色の画像とフルカラーの画像を 1 つの高さ 40 ピクセルの画像に結合し、上部に灰色のバージョンを配置します。

の css は次の<a>ようになります。

a.icon {
    float: left;

    /* width and height of your weather icons */
    width: 20px;
    height: 20px;

    background-repeat: no-repeat;
    background-position: 0 0;
}

a.selected,
a:hover.icon {
    background-position: 0 -20px;
}

.sunny{
    background-image: url(sunny.png);
}

.rainy {
    background-image: url(rainy.png);
}

/* remaining weather styles */

背景色を使用したバージョンの動作をここで見ることができます。

于 2010-08-23T16:15:02.127 に答える