大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」:phpspot開発日誌
大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」 2009年10月22日- jQuery listmenu plugin - javascript list navigation menu control 大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」 次のように大量のアイテムがあったとしても・・・ ↓↓↓↓↓↓↓↓↓↓↓↓↓ jQuery ListMenu Plugin があれば次のように超スッキリさせることが出来ます。 使い方はいたって簡単で、次のようにコードを書けば最低限実装できます。 $('#demo1').listmenu(); $('#demo1').listmenu( { option } ); で各種カスタマイズも可能です。 日本のサイトとしては日本語が
jQueryのみでLightboxっぽいものを実現する方法 - F.Ko-Jiの「一秒後は未来」
梅酒.inのトップページにある「梅酒がウリな飲食店」というコーナーにある画像をクリックすると、Lightboxっぽく情報を表示するようにしています。 ↑ こんな感じ。 Lightbox効果を実現するライブラリは検索すれば色々と見つかると思いますが、ここではライブラリはjQueryのみとして、どのようにLightboxを実現したかを説明します。 処理のおおまかな流れは以下の通りです。 select要素を隠す (IE対策) ページ全体に半透明の黒いレイヤーを表示する 表示領域の中央に目的のコンテンツを表示する 1. select要素を隠す IE6ではselect要素にz-indexが定義されていないため、レイヤーのz-indexをどれだけ大きくしても、IE6ではselect要素がレイヤーの下に隠れることはありません。そのため、ページ上にあるselect要素を隠す必要があります。 jQueryで
[JS]複数のパネルをウィザード形式に実装するスクリプト -Smart Wizard
複数のパネルを順番に表示するウィザード形式のコンテンツをフレキシブルなスタイルで実装するスクリプト「Smart Wizard」をFivelistから紹介します。 Smart Wizard demo デモでは4つのステップがあるコンテンツが実装されており、各ステップに進む際は「Next」ボタンをクリックして移動することができます（※ステップでは移動しません）。 前のステップに戻る際は「Back」ボタンかステップのナビゲーションで操作ができます。 デモは他にも、ステップが垂直に実装されたタイプもあります。
スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」:phpspot開発日誌
jScrollPane スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」。 ちょっと前に話題になっていたような気がしますが便利なのでご紹介。 デザインサイトなどで、スクロールを使ってしまうとOSによって見栄えが変わってきてしまって全体のデザインを崩してしまいますが、このプラグインを使えばそういうこともなさそうですし、更に拡張された機能を使うことができます。以下にピックアップします。 デザイニング 次のような自由にデザインされたスクロール付きブロックを実装可能 プラットフォームに関わらずWinXPスタイルのスクロールバー実装 同様にMacOS Xみたいなスクロールバーも実装できます 拡張機能 さらに面白いのが、スクロール内でさらにスクロールさせるという機能。 スクロール要素をネストできます あと、スクローラー外部からの<A>タグをクリックで指定位置にス
何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」:phpspot開発日誌
jTimepicker - Yet another jQuery time picker plugin. 何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」。 時計のアイコンを押すと次のような水平バーが現れてスライドさせることで、selectボックスの値が増加・減少するUIです。 標準のselect は縦方向に長くなりがちですが、このUIであれば横にスライドさせて比較的簡単に時間の入力が出来ますね。 必要なJavaScriptとCSSを読み込んだら、$('#timepicker').jtimepicker(); で初期化することが出来ます。 関連エントリ jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン
jQueryを使いドロップダウン変更によって文字を大きくするスニペット:phpspot開発日誌
jQueryを使いドロップダウン変更によって文字を大きくするスニペットが公開されています。 1から実装しても全く難しいものではありませんが、それなりに使えそうなのでご紹介です。 ↓ドロップダウン選択で文字が大きくなります↓ 次のように2行で実現しているところがjQueryの素晴らしいところ。 セレクタを変えれば、特定の部分だけを大きくすることが出来ますね。 var size = $(this).val(); $("#main").css('font-size', size+'px'); ペラの１ページだけのサイトなんかに入れておくと文字を大きくできて便利かもしれませんね。 Zooming with jQuery and CSS. クッキーでサイズを保存するような機能は付いていないので、欲しい場合は付ける必要がありますが、jQuery Cookie pluginなんかを使えばこれも簡単ですね
ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」:phpspot開発日誌
ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」 2009年10月05日- ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」。 Flashでよくある〜％読み込みました、みたいなものをJavaScriptで実現できるみたいです。ページを完全に読み込ませてから見てもらいたい場合に使えそうです。 読込みバーが右に伸びていって進捗表示 終わったらアニメーションでカッコよく画面切り替え ページ表示したところ 必要なJavaScriptとCSSを<script>と<link>で読み込んだら、次のように初期化するだけで実装できます。 <script type='text/javascript'> QueryLoader.init(); </script> スクリプトのダウンロー
[JS]jQueryのプラグイン33+1選 -2009年9月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
[JS]快適に動作するコンテンツスライダーのスクリプト -AnythingSlider
各パネルをダイレクトに表示するリンクにも対応した、パネルをスライドするスクリプト「AnythingSlider」をCSS-Tricksから紹介します。 AnythingSlider demo コンテンツスライダーは右下のボタンで自動再生が可能で、横のアローで次と前、下の数字で各パネルをダイレクトに表示することができます。 また、各パネルをダイレクトに表示するリンクにも対応しています。 例：demo: panel 3 オプションでは自動再生の有無、再生ボタンのテキスト、表示アニメーションのスピードやタイミングなどが変更できます。 AnythingSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。
サイト内の目次をjQueryで自動で作成するチュートリアル:phpspot開発日誌
Automatically generate table of contents using jQuery サイト内の目次をjQueryで自動で作成するチュートリアル。 jQueryで、h1〜3タグのヘッドラインを自動で抽出し、以下のように「Table of Contents」としてヘッダに表示するチュートリアルです。 コンテンツが仮に変わったとしても、jQueryで自動でやってくれるため、目次作成がかなり作成が楽になりそうです。 デモページ コードは以下のように、プラグインにするほどではない簡単なコードで実現できています。 $("#toc").append('<p>In this article:</p>') $("h1, h2, h3").each(function(i) { var current = $(this); current.attr("id", "title" + i);
[JS]画像に見出しとキャプションをスライド表示させるチュートリアル
jQueryを使用して、画像に半透明の見出しとキャプションをスライド表示させるチュートリアルをQuenessから紹介します。 Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery demo デモでは画像にマウスをホバーすると、上から見出し、下からキャプションをスライド表示させます。 見出しとキャプションは画像の前後にdiv要素で実装されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div class="photo"> <div class="heading"><span>Telephoto Lens</span></div> <img src="images/fall.jpg" width="350" h
jQueryで重力をシュミレーションするサンプル:phpspot開発日誌
In the Woods - Simulate Gravity with jQuery jQueryで重力をシュミレーションするサンプルが公開されています。 赤い線にマウスオーバーすると、おもりが落ちていきます。 デモを参照 普通ならFlashでやるようなものですが、jQueryで実現してしまうところが面白いですね。 チュートリアルを読み解くことで、色々と勉強になるかもしれません。 関連エントリ JavaScriptによるモーショントゥイーンアニメーション実装「JSTween」 JavaScriptでクールにカラーフェードアニメーションを実現
[JS]滑らかにスライドするナビゲーションを実装するチュートリアル
滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li
jQueryとGlimmerでインタラクティブコンテンツを作成
jQueryとGlimmerでインタラクティブコンテンツを作成：jQueryで学ぶ簡単で効果的なAjaxの使い方（4）（1/3 ページ） いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ／プロデューサーも必見！ Webサイトで重要なのは、顧客を囲い込む戦略 Webサイトで重要なのは、いかにリピーターを確保できるかどうかに掛かっているといっても過言ではありません。新規のユーザーは、広告さえ出せば瞬間的に獲得できます。しかし、継続的にサイトにアクセスしてもらうには、ユーザーにそのサイトを何度も訪れる“理由”が必要です。 もちろん、「Webサイトが、どのようなサービスを提供するのか」が最も重要な“理由”とならなければ意味がありませんが、Webサイトに何度も訪れたくなるようなちょっとした“仕掛け”
jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごい:phpspot開発日誌
mbideasproject - Project Hosting on Google Code jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごいです。 以下、プロジェクトのホームページもOSっぽいインタフェース上でアニメーションしてかっこいいのですが、構成されるコンポーネントが色々とあるみたい。 mbContainers | デモ OSのようなウィンドウ管理システムが作れるようです このページの上でそれぞれ動作を確認することが出来ます。 mbMenu | デモ かなりリッチなメニュー実装用ライブラリ 右クリックのコンテキストメニューもいじれます mbImgNavigator | デモ 画面に収まりきらない画像をドラッグ＆ドロップでGoogleMapぽく見れるコンポーネント。サムネイル付き mbTabset | デモ mbTooltip | デモ よく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ライトのエフェクトを使用して、コンテンツの一部に集中できるようにするスクリプト
http://www.designwalker.com/2009/09/jquery-table.html
[JS]フォームのテキスト欄にアイコンやテキストを表示させるスクリプト -CoolInput
テーブル操作に使えそうなjQueryプラグイン色々:phpspot開発日誌
IBM Developer
