サマリー １．jQuery.BlockUIとは ２．使い方 ３．画面がready状態になる前に表示させたい場合 ４．使用してみた感想 photo credit: Arttu Ekholm via photopin cc １．jQuery.BlockUIとは Webアプリにおいて、時間のかかる処理中や重い画面を開くときなどに「お待ちください」「Please Wait...」「Now Loading...」などと表示させ、ユーザーが画面を触われない）状態にすることは、大切なUI設計の一つである。 これを簡単に実装する方法の一つにjQuery.BlockUI.jsというjQueryプラグインがある。 これを使うと簡単に画面全体を半透明のレイヤーでブロックすることができる。 ２．使い方 （１）ダウンロード http://malsup.com/jquery/block/ （２）headでjQuery
<div id="bg_layer"> <!--半透明の領域--> <!--/#bg_layer--></div> <div id="over_layer"> <!--拡大画像と「閉じる」ボタンを表示する領域--> <img class="lightboxlike" src="#" alt="" /><!--拡大画像--> <p class="close_button"><img src="images/close-trans.png"/></p> <!--/#over_layer--></div> CSS #bg_layer（半透明の領域）をブラウザいっぱいに表示するため、親要素の body 要素と html 要素を height: 100% にする。 #bg_layer（半透明の領域）に、height: 100%; width: 100%; を指定し、position: fixed;
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
2013-04-15 jQueryでチェックされたcheckboxの値を取得して配列に格納する方法、また、配列をcheckboxの値に設定する方法 jQuery よくやるのでメモ。こんなcheckboxがあるとする。 <input type="checkbox" name="days" value="1"> 月曜 <input type="checkbox" name="days" value="2"> 火曜 <input type="checkbox" name="days" value="3"> 水曜 <input type="checkbox" name="days" value="4"> 木曜 <input type="checkbox" name="days" value="5"> 金曜 <input type="checkbox" name="days" value="6">
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ このブログの内容は弊社が運営する有料サービス、CodeGridにてより詳しい内容をご参照いただけます（宣伝） jQuery deferredの使い方 - deferredの基本 | CodeGrid === jQuery1.5から追加された機能。でも全然使ってないので調べた。 jQuery1.5からはdeferredオブジェクトっていうものが登場。 これは、「イケてるキュー（待ち行列）の仕組み～遅延もあるよ～」みたいなものです・・・ 説明がムズイけれどもなんかそんな感じなのです。今までは function fetch(callback){ doAjaxThings('somefile.js
【25分目：実践編】 jQueryを使って15分でUIを作ろう!! 今回のレッスンの締めくくりとして、jQueryを使った簡単なUI（ユーザーインターフェイス）を作ってみましょう。作成するのは「アコーディオンパネル」と呼ばれる、ラベルをクリックするとパネルがスライドして表示されるUIです。 アコーディオンの元となるHTMLは次のとおり、ラベル部分をdt要素、パネル部分をdd要素で記述する定義型リストで設定します。 ▼サンプル5（HTML部分） <dl> <dt>テキスト1</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> <dt>テキスト2</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> <dt>テキスト3</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> </dl> デザインはCSSで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで座標取得