雑草SEの備忘録

東大を卒業し、SEとして働くことになった。備忘録的に作業を綴る。

jQueryを利用して良い感じの選択ボタンを作る


何か質問とかを作ったときに、選択ボタンってありますよね。

それで、簡単なものだと、ラジオボタンとかになるんでしょうけど、それだとデザイン的にダサいと思ったので、もっとボタンっぽくして、いかにも選択されたような感じのものを作りたいなと思っていました。

サンプルとしては、こんな感じです。

このサンプルでは、AのボタンをクリックするとBとCのボタンが薄くなり、Bのボタンをクリックすると、AとCのボタンが薄くなり、Cのボタンをクリックすると(以下略。

 

こんな感じのを作りたいなと。

で、作ってみたので、ソースのサンプルを紹介します。

ちなみに、ボタンは画像となっており、パワポで作りました。

今回は、jQueryを使うので、まずはこれを読み込みます。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

jQueryのソースファイルをダウンロードして読みこんでも良いのですが、面倒なのでCDN(コンテンツデリバリーネットワーク)から引っ張ってきます。バージョンは1.11.2を使ってますが、他のバージョンでも良いと思います。たまたま使ったのが1.11.2だっただけです。深い意味はありません。

まずはHTMLから。単純に画像にidをつけ、spanタグでくくっただけですね。spanタグにもidをつけてあります。

<span id="spa"><img src="a.png" id="a"></span>
<span id="spb"><img src="b.png" id="b"></span>
<span id="spc"><img src="c.png" id="c"></span>

次に、Javascriptの部分。

$(document).on('click', 'span#spa', function() {
		choiced('a', 'b', 'c');
})
$(document).on('click', 'span#spb', function() {
		choiced('b', 'a', 'c');
})
$(document).on('click', 'span#spc', function() {
		choiced('c', 'a', 'b');
})

function choiced(choice0, choice1, choice2) {
var mychoice0 = document.getElementById(choice0);
var otherchoice1 = document.getElementById(choice1);
var otherchoice2 = document.getElementById(choice2);
$(mychoice0).animate({
	opacity : "1"
}, {
	duration : 200,
});
$(otherchoice1).animate({
	opacity : "0.3"
}, {
	duration : 200,
});
$(otherchoice2).animate({
	opacity : "0.3"
}, {
	duration : 200,
});
}

大丈夫だと思いますが、これを、

<script type="text/javascript">
</script>

の中に入れてくださいね。

jQueryというか、JavaScript自体初心者なので、ソースが悪いとかいろいろご意見あると思います。ここをこうした方がいいよとか教えてくれる優しい方、教えてくださいm(_ _)m


ちょっとソースの解説しておきましょう。


言うまでもなくポイントは、choiced()メソッドですね。


choiced()メソッドの引数に三つ変数を引き渡しています。


最初の引数は、クリックされた画像のid、二つ目の引数、三つ目の引数はクリックされた以外の画像のidです。


それで、クリックされた画像に関しては、opacityプロパティを1にして透明度を無くし、それ以外に関しては、opacityを0.3にしています。この数値は、透明度なので、適宜お好みの透明度に指定してください。


jQueryのanimateメソッドで、durationに200を指定しています。durationとは、アニメーションの動作時間で、単位はミリ秒です。

このchoiced()メソッドを定義したら、あとは、クリックされた各ボタンに応じてjQueryのメソッドを利用していきます。


それが、$(document)から始まる3つですね。


画像が4つ、5つと増えていってもchoiced()メソッドの引数を増やすことで対応できるソースとなっています。


もっとうまいやりかたがあるかもしれませんが、ひとまずこれで動作したので参考までに。。

補足

これだと、画像の上にカーソルがやってきても指マークにならないですね。ここは、CSSで指定すれば問題ありません。
まずは、imgタグにclass名をつけて、

<span id="spa"><img src="a.png" id="a" class="css20150509"></span>
<span id="spb"><img src="b.png" id="b" class="css20150509"></span>
<span id="spc"><img src="c.png" id="c" class="css20150509"></span>

つけたclass名のオプションにcursor、属性にpointerとすればOK!

.css20150509 {
	cursor: pointer;
}

あとはこの選択された値をどうバックサイドに引き渡すか、ですが、これはまた別の機会に・・・。