jQueryを使って、FAQのAnswerをフェードで表示・非表示を切り替えるコンテンツをシンプルなコードで実装するチュートリアルを紹介します。 Questionクリック時 実装 Step 1: 外部ファイル 「jquery.js」を外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> Step 2: HTML 質問はh3要素、回答はp要素で実装し、div要素で内包します。 <div id="w"> <h2>User Accounts</h2> <div class="q"> <h3 class="qhead"><a href="#q01">よくある質問</a></h3> <div clas

Sly - jQuery plugin アイテムベースのスクロールを実現できるjQueryプラグイン「Sly」。 通常スクロールバーを動かすとブラウザがスクロールしますが、Slyで初期化したエレメント上でホイールを動かすとアイテムが横にスクロールする、みたいなUIが作れます。 ホイールだけではなくて、横に長いコンテンツのスクロールやページ送り、アイテムの追加等ができます。 応用して面白いインタフェースが作れそうです。 文書を入れてみた例。自動でスクロールさせたり、メインのコンテンツをハイライトしたりすることも出来るみたい 関連エントリ スクロールすると巻物風にコンテンツが回転するUIを作れる「FoldScroll」 ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ラ

equalize.js ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 $('#height-example').equalize(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」

Create.js - A new kind of web editing interface ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」。 起動すると、コンテンツテキストが編集可能になり、ページ上のツールバーを使って太字などの文字修飾ができ、そのままSaveボタンで保存できるという非常に使いやすい編集ツールとして使えます CMS等に実装するといいのかもしれません ページ全体をWYSIWYG編集可能にするモードもIEにはあったりしましたが、これは編集させたい部分だけを編集できるようになるという所がよいです。 ページ全体を下手に編集可能にするとデザインが崩れたりして大変であったりしますが、コンテンツ部分のテキストのみ編集可能にすればそういうことがないですね。 関連エントリ HTML5ベースの音声入力可能なWYSIWYGエディタ「wysihtml5

BigText Makes Text Big コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」。 以下のようなマークアップがあったとします。出力結果はこのブログの読者の皆さんならお分かりだと思います。 そこで、bigtextプラグインを<script>で読み込んで以下のコードを記述 ドーン！シュビドゥバ。かっこ良くなったね。 テキストを幅に応じて自動で最適なサイズにしてくれるというプラグインのご紹介でした。 関連エントリ 指定エレメントのフォントサイズ変更機能を超簡単に提供できるjQueryプラグイン「jFontSize」

アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modal [ad#ad-2] Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コールバック関数を備えています。 画像や動画、AJAXコンテンツにも対応しています。 Simple Modalのデモ デモではSimple Modalのさまざまな実装例があります。

Cool Highlighter Effect with jQuery | jQuery Plugins コンテンツをページ内でハイライトしつつ切り替えられるjQueryデモ 縦に区切ったコンテンツをベースにハイライトを使ってページを切り替えるというお洒落なUIを実現できます。 ページはキーボードによる切り替えが可能で、スライドショーっぽく使うことができます。 デモページ - 実際に動きを見てみましょう 関連エントリ XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」 ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」

AnnotateItはWebサイト上で注釈をつけたり表示するJavaScriptライブラリ。 AnnotateItはjQuery/JavaScript製のオープンソース・ソフトウェア。Wikipediaをはじめとしてコンテンツ系サイトでは記事に対する引用元や、注釈をつけることがある。大抵そうした内容は記事全体の下にまとめて引用として添付されるので見過ごされがちだ。 注釈入力中 また、ブログやニュースサイトにはコメント機能がついていることが多い。そこでは大抵記事の一番下にコメントエリアがあり、感想などを投稿する。そのため記事全体に対するコメントと受け取られがちで、勘違いを生むこともある。そうした事態にならないよう使ってみたいのがAnnotateItだ。 AnnotateItはWebサイトの任意のテキストに対して注釈を付けられるJavaScriptライブラリだ。文字を選択すると編集アイコンが表

デスクトップのブラウザでもiPhoneのような滑らかなアニメーションでコンテンツをスクロールさせるjQueryのプラグインを紹介します。 Overscroll デモページ [ad#ad-2] Overscrollのデモ デモではコンテンツを「Click+Drag」することで、滑らかスクロールでコンテンツを表示します。 デモページ Overscrollの実装 デモを例に実装方法を紹介します。 HTML スクロールするコンテンツに必要な箇所は「div id=screen」です。 デモでは初期状態ではオーバーレイ（div id=overlay）が表示され、フォーカスされるとスクリーンの箇所が表示されます。 <div id="ithing"> <div id="screen"> <img alt="loading..." src="/static/img/sfmap.jpg" /> </div>

コンテンツの幅指定の単位にパーセント(width:100%;)が使える、レスポンシブ レイアウト対応のコンテンツスライダーのjQueryのプラグインを紹介します。 Dynamic Carousel デモページ [ad#ad-2] Dynamic Carouselのデモ デモではページネーションが3タイプ用意されており、それぞれコンテンツのwidthが%で実装されています。 ※ページネーションはHTML+CSSで自由に配置できます。 デモページ：ページネーション左上 Dynamic Carouselの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"><

ブロック内コンテンツを読込画像と共にAjaxで読み込ませアニメーション切替えできるjQueryプラグイン「Ajaxloader」 2011年06月29日- Ajaxloader 1.5.0 ブロック内コンテンツを読込画像と共にAjaxで読み込ませアニメーション切替えできるjQueryプラグイン「Ajaxloader」 $('#localframe').ajaxloader('page1.html');のように呼び出すことでブロック内にほかのHTML内容を読み込ませられます。 jQueryを使えば大して難しくはありませんが、ローディング画像を付けつつフェードアニメーションで切り替えるという効果も付けられます。 （引数にページ名を指定するだけなので簡単） 読込中はローディング画像が表示。 ローディング画像はカスタマイズ可能 SEO用にURLも切り替わってくれたら嬉しいのですが今のところそのよう

複数のパネルを配置したコンテンツの一つにパネルにマウスをホバーすると、内容を変更しハイライト表示にするjQueryのプラグインを紹介します。 デモページ：ホバー時 Hoverpanelsの実装 HTML 各パネルはdiv要素（class="hover-panel"）で実装されており、通常時用とホバー時用のコンテンツをそれぞれ配置します。 ※通常時用：.default、ホバー時用：.hover <section class="clearfix"> <div class="hover-panel topLeft"> <h3>Test</h3> <div class="default"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis dolor, et porttito

WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」 2011年05月09日- Awkward Showcase ? A jQuery Plugin | Awkward Group - A Digital Agency WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」。 divの中に複数のdivを並べて初期化することで簡単にコンテンツスライダーを作れます。 １つのコンテンツにはHTMLが入れられ、ツールチップ表示用の機能なんかも同梱されています。 初期化も次のように簡単。コンテンツのサイズ等をオプションとして渡せます。 $("#showcase").awShowcase({ content_width: 700, content_height: 470 }); デモページはこちら

複数のコンテンツをサムネイルで配置し、ローテーションで打ち出しエリアに拡大表示するフィチャーボックスを実装するチュートリアルを紹介します。 Rotating Feature Boxes デモページ [ad#ad-2] デモでは右側に配置されたサムネイルのコンテンツをクリックすると、打ち出しエリアにアニメーションでスライド移動して、全文が表示されます。 ※アニメーションはCSS3で実装されているためChrome, Safariのみで、非対応ブラウザはアニメーション無しです。 デモページ 2番をクリックして、2番が打ち出しエリアに。 [ad#ad-2] ローテーションするフィチャーボックスの実装 HTML 3つのコンテンツはdiv要素で実装されており、それぞれidとclassを付与し、全部をdiv要素で内包します。 <div id="rotator"> <div id="block-1" cl

SnippetはjQuery/JavaScript製のオープンソース・ソフトウェア。ブログやWebサービスでプログラミングコードを扱っているのを見ることは多い。そう、ソースコードはコンテンツなのだ。Tips、関数、オブジェクトなど様々なコードがコンテンツになり得る。 ハイライト例と実際の使い方 そんなプログラミングコードを表示する際にJavaScriptのライブラリを利用することがよくある。幾つかあるが、ポイントは対応しているプログラミング言語と表示方法の多様さだ。その二つに重点を置くならSnippetは注目したいライブラリだ。 Snippetが対応するプログラミング言語は実に15種類もある。C/C++からはじまって、各種スクリプト言語、SQL、XML、Java、HTML、CSSなどに対応している。さらに拡張することでMakefileやLDAPファイル、Diff、Changelogといった

Index of /Plugin/Virtualkey 打ちやすいバーチャルキーボード実装が可能なjQueryプラグイン「VirtualKey」。 コンテンツの横に表示されているボタンを押すと…。 大きめのキーボードが表示されます。配列が通常のキーボードと似ているので打ちやすいですね。 英字しか対応していないため、パスワード入力欄などの英字フィールドにキーロガー対策として入れる部分で使えそう。 関連エントリ ソフトウェアキーボード実装ならこれかもという「jQuery Keypad」

jQuery Data Link pluginを使うとHTML上のデータ操作が容易になる。 jQuery Data Link pluginはjQuery/JavaScript製のフリーウェア（ソースコードは公開されている）。jQueryをはじめとするJavaScriptフレームワークの登場で、Webブラウザ上でデータ操作を行うケースが増えている。しかし意外とやりづらさを感じていた。 データ操作がシンプルになる DOMを使って指定する場合、一つ二つであれば容易なのだが、多数のフィールドを操作しようと思うと面倒だった。そうしたデータ操作をもっと手軽に分かりやすくするのがjQuery Data Link pluginだ。 jQuery Data Link pluginではObjectを作成し、それをformとリンクさせる。そうすると（例えばpersonというオブジェクトを生成した場合）perso