【jQuery】ファイル選択フォームデザインのカスタマイズ方法
基本的に、ファイルのアップロード等で使用するフォーム要素として 『input』要素の『type="file"』がありますが、 ファイル選択ボタンや、ファイル名表示エリアの位置やデザインは 基本的にブラウザ依存で、中々デザインを当て込むのは困難です。 デフォルトで適用されるデザインは、 IEやFirefoxはファイル選択ボタンがファイル名表示エリアに対して右側ですし、 ChromeやSafariはファイル選択ボタンがファイル名表示エリアに対して左側です。 ファイル未選択字のデフォルトメッセージ（『ファイルが選択されていません』等）も 言葉が異なっていたり、そもそも表示が無い等まちまちです。 これだけブラウザによって異なれば、 そのままデフォルトで使用すると 他のデザインとのバランスが悪くなったりして、 どうしてもデザインを入れたいパターンが出てくる場合があります。 また、ブラウザ依存のデザイ
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
jQueryにおけるフォーム値の取得と設定 : JavaScript好き
スポンサードリンク 概要 フォーム(form)の値を取得する場合、jQueryではval()メソッドやprop()メソッドを使う。 ただし、inputの種類によって癖があるので、各typeにおける｢値取得｣｢値設定｣などをメモする。 また、prop()を利用するのでjQueryのバージョンには注意が必要。 このコードを試したときのバージョンは｢1.10.1｣。 テキスト val()メソッドを使だけ。未入力の場合は、｢""｣(空文字)なので安全。 HTML <input type="text" name="animalText"> 値取得 var newText = 'トラ';$(':text[name="animalText"]').val(newText); 値設定 var animal = $(':text[name="animalText"]').val(); ラジオ val()メソ
iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる - jQuery入門 - ポンクソフト
目次 jQuery入門 jQueryのインストール・簡単な使い方 クイズゲームの作り方 秘密の暗号を作ってみよう（たぬき暗号） アクションゲームを作ってみよう（ぬりかべ） 画像を使ったジグソーパズルを作ってみよう もぐらたたきっぽいゲーム ドラッグ可能なポップアップウインドウを作ろう jQuery UI Sortableで１ラインオセロゲーム ブラウザ全体をブロックしてみる Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする 発生したイベントの状態を保持・保存する6つのパターン Ajaxを利用したシンプルなイメージギャラリーを作ってみる テーブルにページ送り（ページング）を実装してみる jQuery UI Draggableを使って付箋(sticky)を作ってみる カラムでソートできるテーブルを自作してみる テーブルを使ったシンプルなドット絵エディ
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA