これはホントに使える！「お待ちください（Now Loading..)」画面を半透明レイヤーでいろどるjQuery.BlockUI.jsの使い方いろいろ - TechNote
サマリー １．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
jQuery で Lightbox のようなモーダルウィンドウを表示 | Web Design Leaves
<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;
ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門
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から作れるよう、解説します。
jQueryでチェックされたcheckboxの値を取得して配列に格納する方法、また、配列をcheckboxの値に設定する方法 - knt45の日記
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 の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
40分で覚える！jQuery速習講座 (6/6)
【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で座標取得
【誤りあり】jQueryで追加した要素を操作するにはon()メソッドで - Qiita
Post by @hamalog