アクセスカウンタ

zoom RSS テーマ「JavaScript」のブログ記事

みんなの「JavaScript」ブログ


セレクトボックスにデザインをあてる[jQuery]

2010/01/22 20:36
HTMLのセレクトボックスは、CSSではほとんどスタイルがあてられないので
デザイン重視なサイトを作成する際にこちらを使用させていただきました。

jQuery.selectable.js

セレクトボックスを拡張するjQueryベースのライブラリです。

プルダウンの表示形式を「selectable」または「simpleBox」から選択できますが
今回はプルダウンにデザインを当てるだけのsimpleBoxを使いました。


▽画像の用意
select_right.gif
select_right.gif

select_left.gif
select_left.gif

▽CSS調整
セレクトボックスの大きさなど
skin/base.css

プルダウンの背景色やテキスト色など
skin/natural/style.css または skin/selectable/style.css


sample
こんな感じになりました。


・背景を画像に変更
・プルダウン時にアニメーションをつける
・プルダウン部分のカラーを変える
といったことが簡単にできるので便利です。
記事へトラックバック / コメント


if文の条件で困った

2008/06/06 20:14
↓こういうxmlをプログラムで書き出して

<aaa>
<bbb>1</bbb>
</aaa>


xmlの<bbb>タグ中身を test という変数にして

if(test == "0") {
○○○○
} else if(test == "1") {
△△△△
} else {
□□□□
}


っていうif文を書いたときに、xmlタグの中身が1なのに□□□□が実行されるという挙動で悩まされました。

原因はxmlタグの中に改行が入っていたせいで、0でも1でもないよーってことだったようです。
そこで、

indexOf();

という関数を教えていただき、それで回避しました。



使い方
[検索対象の文字].indexOf([検索する文字],[検索開始位置]) ;


検索対象の文字列に検索する文字が含まれてたらその開始位置を、
含まれていなかったら-1を返します。

これで直りました!



if(test.indexOf("0") != -1){
○○○○
} else if(test.indexOf("1") != -1) {
△△△△
}



xmlは侮れない・・
記事へトラックバック / コメント


トップへ | みんなの「JavaScript」ブログ

molog JavaScriptのテーマ/BIGLOBEウェブリブログ
文字サイズ:       閉じる