スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る
twitter facebook hatena google pocket Facebookをはじめスマートフォンサイトやアプリでは、メニューをタップするとサイドからにゅっと出てくるメニューが導入されて久しいです。 今回はSidr - A jQuery plugin for creating side menusを利用して、にゅっと出してみましょう。 sponsors 使用方法 Sidrからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.sidr.dark.css"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.sidr.min.js"></script> <sc
[JS]jQueryのプラグイン33 1選 -2011年10・11月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 FlexSlider シンプルながら高性能でセマンティックなマークアップのスライダー。 Slidorion 画像スライダーとアコーデ
jQueryで時間をカウントダウンするJavaScript「jCountr」
ティザーサイトなどで、あと何秒でオープンみたいな表示があります。 JqueryプラグインjCountrを使用すると似たようなカウントダウンが可能になります。 使用方法 jCountrからjquery.jCountr.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.jCountr.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#id名").counter({ hour:"1", //開始時間 min:"02", //開始分 sec:"15" //開始秒 })
[JS]地味なフォームを簡単にかわいらしいデザインにする -Ideal Forms
画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。 チェックボックスのチェックも画像ではないですよ。 Ideal Forms デモ [ad#ad-2] Ideal Formsのデモ フォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。 デモでは、3つのスタイルが用意されています。 スタイル：Comix Ideal Formsの主な特徴 フォームに美しい外観を与える軽量（14Kb）のスクリプト。 カスタマイズも簡単で、非常に使いやすいです。 画像は必要なく、スタイルシートでデザインを適用しています。 [ad#ad-2] Ideal Formsの実装 ファイルのアップロード 以下の2つをフォルダごとアップロードします。 css/idealForms js/idealForms.js
さまざまなタイプのスライドショーが簡単に設置できるスクリプト -Agile Carousel | コリス
一つ一つの完成度が高い、アニメーションを伴ったさまざまなタイプのスライドショーが簡単に設置できるjQueryのプラグインを紹介します。 Agile Carousel - Javascript Slideshow - Image Carousel [ad#ad-2] Agileは以前ちらっと紹介しましたが、つい最近バージョンアップしたので改めて紹介します。 以前のバージョンではjQuery UIも併用するタイプでした。 Agile Carouselには、下記のさまざまなタイプのスライドショーが用意されています。
[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble
テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。 jRumble デモ 振るわせるアニメーションは、ガタガタをはじめ、ぷるぷる、ちりちり、などにすることができます。 [ad#ad-2] jRumbleの実装 jRumbleの実装は簡単です。 div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。 JavaScript 「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jrumble.1.0.js"></script> JavaScript ガタガタさせるDOM要素をスクリプト
年表作り等に使えるタイムライン実装用jQueryプラグイン「timeglider.js」:phpspot開発日誌
Timeglider jQuery Plugin/Widget 年表作り等に使えるタイムライン実装用jQueryプラグイン「timeglider.js」。 マウスでドラッグ＆ドロップしたり、拡大できたりする年表のUIを提供してくれます。 例えば、どういうJavaScriptライブラリが何年に登場したのか、みたいなものを表示するのに使えます。 誰がいつ入社したのか？といった時系列のデータの表示なんかにも使えそう。 年代なんかも表示できます。 更にアイテムをクリックした場合には注釈を表示することも出来ます。 あまり使う機会はないかもしれませんが、こうしたライブラリはそれほど多く無いので覚えておいても損はなさそうです。 関連エントリ PHP・CSS・jQueryを使った横向きのタイムライン実装例 HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.
[JS]jQueryのプラグイン33+1選 -2011年2・3月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 MobilySlider 軽量ながらも高性能なコンテンツスライダー。 jShowOff さまざまなオプションを備えたコンテンツスライ
[JS]使いやすく高性能なフォームが簡単に設置できるフレームワーク -jFormer
簡単なログインフォームをはじめ、お問い合わせフォーム、コメント用フォーム、ショッピングカート用フォーム、アンケート用フォームなど多種多様なタイプが用意された、バリデーション機能も備えたフォームのフレームワークを紹介します。 jQuery Form Framework - jFormer [ad#ad-2] jFormerの特徴 クライアントサイドのバリデーション サーバーサイドのバリデーション AJAXを使ったページ変更機能 CSSベースの簡単なカスタマイズ Botの防止（CAPTCHAは無し） 入力データのレジューム機能 フィールドのロック機能 フォームのテンプレートも多数用意 jFormerのデモ デモには、さまざまな実用的なフォームがあります。
[JS]画像の一部を拡大するシンプルで実用的なスクリプト -Easy Image Zoom
プロダクトページなどによく利用される、画像の一部を拡大する実用的で軽量なjQueryのプラグインを紹介します。 jQuery plugin: Easy Image Zoom デモページ [ad#ad-2] デモではサムネイル画像にカーソルを合わせると、その箇所を中心に拡大表示し、ディテールをユーザーに提供することができます。 スクリプトは使い勝手をよくするために、できるだけ軽量にし、またカスタマイズも簡単にできるように設計した、とのことです。 Eazy Image Zoomの実装 HTML サムネイル画像をimg要素で実装し、拡大画像をa要素に配置します。 <a href="large.jpg"><img src="small.jpg" alt="Small image" /></a> CSS 拡大画像のスタイルはCSSで簡単にカスタマイズが可能です。下記はデモページの例です。 #easy
[JS]インタラクティブでフレキシブルなレイアウトが楽しめるスクリプト -Magic jQuery
ページ内のエレメントの配置や、メニュー、タブなど、ユーザーインタラクションを伴ったレイアウトが簡単に実現できるjQueryのプラグインを紹介します。 Magic jQuery デモ [ad#ad-2] 配置のデモでは、ピンクのパネル（「drag me」）をドラッグすると、それに合わせて各パネルの配置がダイナミックに変更されます。 ピンクのパネルを移動したキャプチャ 上記の各色のパネルにはそれぞれ条件が設定されています。 例えば、オレンジのパネルは下記のようなスクリプトになっています。 JavaScript $("#orange").align({top:'', bottom:"", left:"", rightIsLeftOf:'pink'}); $("#orange").limit({rightIsLeftOf:'blue'}); オレンジのパネルはピンクの左に沿って配置（align:r
[JS]HTMLコンテンツにも対応、カルーセルで表示するスライダーのスクリプト -jShowOff
一つ以上の子要素と、それらを内包する親要素をスライダーとして使用します。 下記は、テキストや画像を配置したdiv要素を子要素として、それらを内包するdiv要素を配置しています。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div> </div> JavaScript 「jquery.js」と「jquery.jshowoff.min.js」を外部ファイルとし、下記のスクリプトを記述します。 セレクタ（#features）は、自分の環境にあわせて変更してください。 $(document).re
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]jQueryのプラグイン33+1選 -2011年1月