人気ブログランキング |
タグ:Uniform ( 2 ) タグの人気記事
(JavaScript)IE環境でUniform Selectボックスを表示するときの注意
IEで Uniform の Select Option を使う時に、Optionに表示する文字列が短いと、下図のようにドロップダウンしない領域が出てきます。(IE7,8で確認)
(Firefox,Chromeはそのようなことは有りません)
e0091163_13532061.jpg


その場合、以下のように、select のスタイルシートで、widthを指定すると回避できるようです。
(165ピクセルくらいがちょうど良いです。)
<select  style="width:165px">
<option value="1">abc</option>
<option value="2">hgc</option>
<option value="4">rebc</option>
</select>


widthを指定すると、以下のようにドロップダウンメニューの幅が広がります。
e0091163_13532677.jpg

by Jehoshaphat | 2012-11-24 23:52 | Webがらみ
(JavaScript)Uniformを使うとselect要素の値がjQueryから操作できない
(Ajax,PHP)Ajaxを使って入力フォームに戻ったときに値を再セットするで入力フォームに戻ったときに値を再設定する方法を書きました。
しかし、フォームのデザインを良くするために、Uniformを使うと、select タグの表記が変わりません。
(Uniformについては、(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS 参照)

Firebugで見ると、実際のselectタグは変わってるようなんですが、Uniformでタップして表示している部分が変更されないようです。
(Uniformはselectタグの実体は非表示にし、selectedが付いているテキストを span タグ内で表示するような仕様になっています。)

ということで、値をフォームに再セットするときに、Uniform側のテキストも変更するようにするため、下記のようにコードを直してみました。
(uniformのid名は,既存のid名の前に、"uniform-" という文字列をつけるだけという仕様を使ってます。また、各タグのid名とnameの値は同じにしています。)
function SetValue(){
$.getJSON(
"GetInputData", //アクセス先
function(data,status){
if ( data ){
for (var key in data) {
$("*[name=" + key + "]").val(data[key]) ;
//selectタグなら
if ( $("*[name=" + key + "]")[0].nodeName == "SELECT" ){
//uniform
$("#uniform-" + key).children("span").html( $("*[name=" + key + "]").children(':selected').text() );
}
}
}
}
);
}

by Jehoshaphat | 2012-11-18 21:36 | Webがらみ