GitHub - house9/jquery-iframe-auto-height: jQuery plugin to set the height of an iframe to its contents heightYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ECサイトなどで使えそうな360度ズーム機能を実装するjQueryプラグイン「AJAX-ZOOM」:phpspot開発日誌
ECサイトなどで使えそうな360度ズーム機能を実装するjQueryプラグイン「AJAX-ZOOM」 2011年08月24日- AJAX-ZOOM jQuery Image Zoom Viewer & Pan Gallery, PHP - Javascript 360 Spin & Zoom Rotate Fullscreen ECサイトなどで使えそうな360度ズーム機能を実装するjQueryプラグイン「AJAX-ZOOM」。 商品なんかを360度回転させながら詳細を確認するみたいなUIが作れます。最初に画像を一気にダウンロードする必要はなくて、ajaxベースなのも特徴です 大きな画面で見れるようにフルスクリーンモードなんかがついたりして凝った作りになっています 以下は回転させて別のアングルでズームしてみたところ ３Dだけではなくて、２Dの大きな画像にも適用することができるみたいです 用途に
ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル:phpspot開発日誌
Circular Content Carousel with jQuery | Codrops ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル。 そもそものデザインもいいのですが、次のようなコンテンツを左右にスライドできる（ホイールでもOK)UIを作ることが可能です。 「more」をクリックすればそのまま詳細がアニメーションで広がります サンプルプログラムのダウンロードが可能なので、ダウンロードしてカスタマイズして使うだけでも有用です。 関連エントリ IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」
TinySort
TinySort TinySort is a small script that sorts HTMLElements. It sorts by text- or attribute value, or by that of one of it's children. The examples below should help getting you on your way. If you find a bug, have a feature request or a code improvement you can file them here. Please provide code examples where applicable. TinySort used to be a jQuery plugin but was rewritten to remove the jQuery
超シンプルな、pushState + Ajax = PJAXのサンプル Flask編 - When it’s ready.
HTML5熱いですね。いろんな意味で BigPipeやら、HTMLでテンプレートエンジンとかいろいろ出ていますがユーザービリティ下げちゃいけないよねって事は、どの技術でも大切な共通項ですね。pjax = pushState + ajax使えば、リッチな人にはサクサクなUIを、そうじゃない人にもそれなりに提供できる。その上、戻るボタンもサーチエンジンにも優しいとくれば、これは試さないわけには行かないですね。 動作サンプル： http://pjax.atu.si/ Pjaxするとどうなるのか？ 非同期動作時 http://pjax.atu.si にアクセスをして、リンクをクリックすると要素が非同期に変更される。 非同期に更新されているがURLは、シンプルなものに変更される。 同期動作時 http://pjax.atu.si/parts/x や http://pjax.atu.si/parts/
上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル:phpspot開発日誌
Portfolio Image Navigation with jQuery | Codrops 上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル 通常ギャラリーというと左右の矢印がついているだけですが、今回紹介するものは上下左右にナビゲーションさせるというものです。 ページ下部にはナビゲーションが付いており、こちらをクリックしても画像が見れます。 上下の位置関係による意味付けをギャラリーにつけることが可能 デモはこちら 関連エントリ PHPソース１個で実現されるクールなWEBギャラリー実装プログラム「Pagemap ImageWall」 立体感がいい感じの３Dギャラリー作成JSチュートリアル CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 CSS3をフル活用した立体的な画像ギャラリー作成デモ
シンプルデザインで使いやすい日付ピッカー実装jQueryプラグイン「glDatePicker」:phpspot開発日誌
glDatePicker - A simple, customizable, lightweight date picker calendar plugin for jQuery シンプルデザインで使いやすい日付ピッカー実装jQueryプラグイン「glDatePicker」。 次のような大きめでシンプルデザインの日付ピッカーを簡単に実装できるプラグイン。デザインがよくても小さくて押しづらいものよりもよさそうです。 白黒のバージョンがあります。CSSデザインなのでデザイン変更も簡単でしょう。 $("#date1").glDatePicker();と書くだけで<input>にフォーカスした際に表示されクリックだけで日付を入力できます。 シンプルイズベストですね。 関連エントリ Mac OS XのDateLine風1行カレンダーをWEBサイトにも簡単実装できるjQueryプラグイン「Dateli
[JS]画像の一部を拡大・カラー・くっきり表示するスクリプト -jQuery Loupe
拡大画像を表示するレンズの形状やオーバーレイの設定など、豊富なカスタマイズが用意された画像の一部を拡大表示したり、カラーやくっきり表示にするjQueryのプラグインを紹介します。
わずか4KBと軽量でカスタマイズしやすい、シンプルなデートピッカー（カレンダー）を実装するjQueryプラグイン・glDatePicker - かちびと.net
カレンダーの日付を押すだけでボックス内にデータを入力出来るやつです。デートピッカーというんですが、これがあるとユーザーは視覚的にも探しやすく、入力ミスも防げるので日付を入力するフォームに導入するといいユーザービリティになりそうです。 また、シンプルなコードでカスタマイズもしやすいのが特徴です。というわけでサクッと日本語にしてみました。 デモ デモです。フォーカスするとカレンダーが表示されます。 汎用的 コードもシンプルなので簡単に日本語に出来ます。 カラーはcssで変更するだけ。 コード <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/gl
Google＋風の円形リストを作成できるjQueryプラグイン「CircleList」:phpspot開発日誌
CircleList jQuery Plugin Google＋風の円形リストを作成できるjQueryプラグイン「CircleList」。 ULで定義したリストを初期化するだけで次のように円形にアニメーションします。各アイテムはドラッグ＆ドロップで他の円リストに移動することが出来ます。 更に、範囲指定で複数アイテムの選択なんかもできるようになっています。 実装は必要プラグインを読み込んだ後、次のように初期化するだけです。 <ul id='list'> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>4</li> </ul> <script> $('#list').circlelist(); </script> ジェネレーターもあって、その場で動きを作れてコードも出力する機能もあったりします。 ちょっとしたサプライズ効果に使えそうですね。 関連
ブラウザ上でカッコいいメニューを作れる「Menu Maker CSS3」:phpspot開発日誌
JavaScript - Menu Maker CSS3 jQuery - CodeCanyon ブラウザ上でカッコいいメニューを作れる「Menu Maker CSS3」 次のような検索窓つきのメニューをブラウザ上でパラメータ調整するだけで作れちゃう仕組みです。 jQueryプラグインベースのメニューが作れます。有料＄４ですが、なかなか面白い仕組みだったのでご紹介です。 作成画面 関連エントリ 超カッコいい確認ダイアログをjQueryで実装するチュートリアル jQueryを使ったアニメーションする投票グラフを作るチュートリアル 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」
年表（タイムライン）を表示する時に使ってみたいjQueryプラグイン·Timeglider MOONGIFT
Timegliderはマウス操作可能なインタラクティブな年表（タイムライン）を作成するjQueryプラグイン。 TimegliderはjQuery/JavaScript製のオープンソース・ソフトウェア。年表というのはとても面白い。今の状態がなぜ生まれたのか、そこに関わっている要因が何だったのか時系列をおって見えるようになると、様々な情報が得られる。やはり何からの要因があってこその結果なのだ。 表示デモ しかし年表というのは作るのが難しい。横に時間軸をとって、そこに当てはまる情報を埋め込んでいくだけなのだが、ズーム機能や情報の属性による表示の変更なども欲しくなる。そうした年表（タイムライン）表示に使えるライブラリがTimegliderだ。 Timegliderはタイムラインを表示するためのライブラリで、マウスのドラッグで横軸を移動したり、スクロール操作でのズームイン/アウト、項目をクリックし
[JS]jQueryのプラグイン33 1選 -2011年7月 | コリス
jquery.transitions CSS transitionのサポートを検出し、classベースのアニメーションを与えることができます。
横に飛び出すメガメニューを実装するjQueryプラグイン・JQUERY VERTICAL MEGA MENU - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 最近かなり見かけるようになった印象の、 大量のコンテンツを格納するメガメニュー の横に飛び出すタイプ。jQueryで実装して います。メガメニューはECサイトやポータル サイトなどなど、階層の深いWebサイトにて ユーザビリティ向上に貢献してくれます。 何度もクリックしないと目的の場所に到達できない、という設計はユーザーに取って不便ですし、離脱率も上げてしまいがちですので、大量のコンテンツを保有するWebサイトではこういったメガメニューの導入を検討するのも良いかも知れません。 メガメニューはドロップダウン形式が多いのですが、今日ご紹介するスクリプトはサイドメニュータイプです。 見た目はよくあるサイドナビゲーションメニューですが、マウスを乗せると横に関連ページなどが整
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
Flashみたいなテキストエフェクトが作れるjQueryプラグイン「TextFX」:phpspot開発日誌
JavaScript - TextFX - A jQuery Text Animation Tool - CodeCanyon Flashみたいなテキストエフェクトが作れるjQueryプラグイン「TextFX」 Flashにもこうしたテキストアニメーション作成ツールがあった気がしますが、jQueryでも出来るみたい。 １５のコアとなるアニメーションに加え、１８種類の設定、カスタムイージング、スピードなどカスタマイズ自在です。 デモページ ブラウザで動くエフェクトジェネレーター付きで、自由自在かつ簡単に動きをデザインできます。 注意点として、$5のライセンスウェアのようですが１からつくることを考えれば安いですね IEやSafariなどでも互換性があるみたいです。 関連エントリ プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」 スマ
タブやアコーディオンなど、様々なUI構築用のjQueryプラグイン30個以上をセットにしたフレームワーク・ jQuery EasyUI - かちびと.net
普段からよく見かけるjQueryによる タブやアコーディオンなどのUIの構築 を簡略化するためのフレームワーク・ jQuery EasyUIのご紹介です。プラグ インは30個以上あり、どれもシンプル なものになっています。 数じゃ敵いませんけど、Ext JSのjQuery依存型みたいな印象です。結構昔からあるみたいなので知ってる方も多いかもですけど・・・恥ずかしながら最近知ったので、僕と同様にまだ知らない方向けにシェア。 jQueryを使ったシンプルなユーザーインターフェースを構築する為のプラグイン30数個をワンセットにしているフレームワークです。余計な機能が付いていないものばかりなのでカスタムしやすいのでは。 コードはドキュメントに全部書いてありますので割愛します。 プラグインの一部をご紹介します。 Accordion 開閉するアコーディオン Menu シンプルなメニュー Panel パ
ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。 サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択でき
ブロックごとに独自の右クリックメニューが実装できるjQueryプラグイン「contextMenu」:phpspot開発日誌
ブロックごとに独自の右クリックメニューが実装できるjQueryプラグイン「contextMenu」 2011年07月11日- jQuery contextMenu Plugin Demo ブロックごとに独自の右クリックメニューが実装できるjQueryプラグイン「contextMenu」。 通常ブラウザ上で右クリックすればブラウザのコンテキストメニューが出ますが、これを独自にできる上、ブロックごとに実装を別にできます。 このため、メニュー欄ではコンテキストメニュー１を、コンテンツではコンテキストメニュー２を設定してユーザビリティを高めることができそうです。 ブロック外で右クリックすれば通常のブラウザのコンテキストメニューも使えるのでフラストレーションはたまりません。 メニューもアイコン付きでなかなかナイス！ インプットをメニューにいれこんじゃうなんてことも出来ます 自分で実装するとめんどくさ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery – sorting DIVs by date | ProDevTips – Web Development Tutorials