カテゴリー別アーカイブ: ｊQuery

通常のファイルインプットタグは

<input type=’file’ id=’file_up’ enctype=’multipart/form-data’>

こんな感じ。

ｊQueryを使って、ファイル選択時にアップロードさせようとすると、

$(“#file_up”).change(function(){
$(this).upload(
‘/upload’,
‘type=image’,
function (res) {
$(“#preview”).html(“<IMG SRC=’kotei.jpg’>”);
},
‘text’
);
});

みたいに、ボタンのチェンジイベント（選択ファイル名が変化）にバインドして、jQueryのUpload機能でアップするようにするんだけど、ファイル選択とファイル名の表示は、即時アップにはあまりイメージが合わない。
なので、このタグを消して、別のボタンでキックしたい。

<input type=’button’ id=’file_up_btn’ onclick=’document.genElementById(‘file_up’).click();’ value=’アップロード’>

みたいなボタンを作って、こっちのボタンが押されたら、ターゲットのInputタグをキックするという動作をさせる。
aタグで

<a href=’javascript:void();’ onclick=’document.genElementById(‘file_up’).click();”><img src=’button.jpg’></a>

イメージをセット
みたいにすると、画像ボタンを利用することも出来る。

で、本体のタグ表示が邪魔なので消したいんだけど、style=’display:none;’にすると、ボタンを押してもファイル選択ウィンドウが表示されなくなってしまう。
で、常套手段のstyle=’text-indent:-9999px;’にして画面外部に飛ばそうとすると、Chromeでファイル選択ボタンだけ飛んでいって、ファイル名欄が残る上に、本来ボタンがある空白をクリックするとファイル選択が開いてしまう。
じゃあ、どうしようと思ったら、divにstyle=’text-indent:-9999px;’をつけてサンドイッチしてやると隠すことが出来た。　でも、微妙なスペースは残るけど、まぁ、このぐらいで妥協しておこう。

(809)

Tweet

$(“.conditions”).children().each(function(){ if(!$(this).is(‘caption’)){
$(this).hide();
}
});

$(“.conditions > caption”).click( function(){
$(this).parent().children().each(function(){
if(!$(this).is(‘caption’)){
$(this).toggle();
}
});
});

　こんなコードを書いて

<table class=’conditions’ border=’3′>
<caption>条件グループ１</caption>
<tr><th>条件１</th><td>hoge</td></tr>
<tr><th>条件２</th><td>piyo</td></tr>
</table>

<table class=’conditions’ border=’3′>
<caption>条件グループ２</caption>
<tr><th>条件A</th><td>hoge</td></tr>
<tr><th>条件B</th><td>piyo</td></tr>
</table>

　みたいなテーブル郡を用意しておくと、初期状態ではキャプションだけ表示されていて、キャプションをクリックする度にテーブル本体が開いたり閉じたりする。
　設定画面が縦に長くなっちゃう時などに、あまり利用しない部分を隠しておくのに便利。
　captionタグにスタイルをつけてcursor:pointer; color:blue;あたりを設定しておくとわかりやすい。

(164)

Tweet

みたいなテーブルで、右欄が空の場合に行を隠すjQuery。

テーブルのコード

jQueryのコード

サンプル

(373)

Tweet