[JS]機能も充実、設置も簡単、デザインも素敵！モーダルウインドウを実装する超軽量のスクリプト -Pop Easy
Google Maps Pop Easyの使い方 使い方は非常にシンプルです。 Step 1: 外部ファイル スクリプトを</body>の上あたりに、外部ファイルとして記述します。 <script type='text/javascript' src='js/jquery.modal.js'></script> <script type='text/javascript' src='js/site.js'></script> Step 2: HTML 最低限必要なHTMLの構造は、こんな感じです。 L.1がトリガー、L.2がオーバーレイ用の空div、L3-6がモーダル内のコンテンツです。 <a class="modalLink" href="#">Click Me</a> <div class="overlay"></div> <div class="modal"> <a href="#"
ThickBox 3.1
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Features: ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k. The ThickBox JavaScript code and C
jQuery UI モーダルダイアログの仕組み - てっく煮ブログ
JavaScriptjQuery UI の Dialog 機能はダイアログをモーダル表示することができる。サンプルを見ると、背景がグレーアウトされて、手前のダイアログしか操作できないTab キーを動かしてもダイアログからフォーカスを移せないといった動作になっている。いままでいろんなライブラリの擬似モーダル実装を見てきたが、Tab キーを押したらこっそり裏側の部分にフォーカスを移せるものばかりだったので、Tab キーにちゃんと対処していたところに驚いた。どうやって実装してるんだろうと思って jquery.ui.dialog.js を見てみたら、次のように泥臭く実装していた。 // prevent tabbing out of modal dialogs if (options.modal) { uiDialog.bind('keypress.ui-dialog', function(even
第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します（
【ハウツー】Web開発者必見! jQuery UI ウィジェット3選 (1) シンプルでかつ強力なウィジェット群 | エンタープライズ | マイコミジャーナル
7月3日に掲載した記事「jQueryを使ってるならコレ! ウィジェットライブラリの決定版 - jQuery UI」ではjQuery UIの簡単な概要と、jQuery UI/SliderとjQuery API/CSSを組み合わせたサンプルコードをいくつか紹介した。簡単なコードを追加するだけで、工夫次第でさまざまな使い方ができるUIを作成可能ことがおわかりいただけたと思うが、jQuery UIには他にも汎用性の高いコア機能とウィジェットが用意されている。本稿ではその中でもとくに興味深いウィジェット「Datepicker」「Dialog」「Tabs」を紹介する。 なおWebブラウザ実行環境と使用したJavaScriptファイルは次のとおり。 Microsoft Windows XP SP3 / Microsoft Internet Explorer 7 FreeBSD 8-current / M
jQuery UI Dialogの使い方の基本-初期化とメソッド呼び出し(jQuery UI 1.5.2) - monjudoh’s diary
jQuery UI Dialogの導入法と使い方のさわり(jQuery UI 1.5.2) - 文殊堂の続き まず、UI Dialogを読み込んだときにjQueryオブジェクトで使えるようになるメソッドはdialogメソッドだけです。 UI Dialog絡みの操作は全部dialogメソッドで行います。 具体的に出来ることはDialogWidgetの初期化と各種メソッド呼び出しです。 初期化 初期化はdialogメソッドの引数にオプションをオブジェクトとしてを渡すことで行う HTMLは下記のものを使用するとします。 <html> <head> <link rel="stylesheet" href="./flora/flora.dialog.css" type="text/css"> <script type="text/javascript" src="./js/jquery-1.2.6.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
