指定エレメントのフォントサイズ変更機能を超簡単に提供できるjQueryプラグイン「jFontSize」:phpspot開発日誌
jFontSize | jQuery plugin | Font Size | Font Resize | Change font-size | Javascript 指定エレメントのフォントサイズ変更機能を超簡単に提供できるjQueryプラグイン「jFontSize」 大・小だけでなく、標準サイズにも変更できるようなボタンを実装できます ↓指定エレメントのみをリサイズ可能。標準ボタンもあるので戻すのも簡単。 使い方は、サイズ変更用のボタンを指定のマークアップで記述後、$(element).jfontsize() としてリサイズ対象としたいエレメントを選ぶだけです ボタンも自分でCSSを使って簡単にデザイン変更できます 関連エントリ 指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」 手描き感がクールな44種類のフリーフォントいろいろ
閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」:phpspot開発日誌
JQuery Magic Tabs Plugin | jQuery Plugins 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」。 次のように、横に長くなってもスクロールできつつ、閉じるボタンもついて、インタフェースもなかなかクールなタブUIが実現できます。 ありそうであまり無かったかもしれないプラグインですね。もちろん「タブの追加」みたいなのもできます。 実装コードはこちらに掲載されています。デモもあります ページの構成によっては使うことでより利便性の高いインタフェースを提供できそうですね 次のようなコードで比較的容易に実装が可能です。 関連エントリ 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」 シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」
わずか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> ジェネレーターもあって、その場で動きを作れてコードも出力する機能もあったりします。 ちょっとしたサプライズ効果に使えそうですね。 関連
全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」:phpspot開発日誌
全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」 2011年08月05日- jQuery.fracs larsjung.de 全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」 縦に長ーいサイトだと今どこ読んでいるのか？わからなくなってしまうことがありますね. このライブラリを使えばページのサムネイルが動的に生成され、とってもわかりやすいだけでなく、サムネイル上をドラッグ＆ドロップでページ移動できちゃいます 右横にページ全体像のサムネイル 拡大するとこんな感じです ドラッグ＆ドロップでページ内を瞬間移動可能。 これはナイスですね 関連エントリ ページ内ハイライト検索が実装できるjQueryプラグイン「Plain Text Keyword Search」 今までなかっ
今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」:phpspot開発日誌
今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」 2011年08月04日- Flexible Nav jQuery library 今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」 <a name="hoge"></a> と <a href="#hoge"></a> を使って実現するページ内ナビゲーションをスマートに実現できます。 h1〜h3のエレメントでドキュメントの見出しを定義しておいて、プラグインで初期化すると、ページの右側に見出しが現れます。 文書の長さに応じて見出し間の距離が表されて、文書の構造が非常にわかりやすく、辿りやすくなります。 見出しをクリックすると、指定位置に移動できるのはもちろん、ドキュメント位置に応じて現在参照している見出し部分がハイライトされるので
ビフォア・アフターが超わかりやすいパーツ実装jQueryプラグイン「jquery-comparewyw」:phpspot開発日誌
jquery-comparewyw - a jQuery plugin which allows you to compare, for example, before and after images - Google Project Hosting ビフォア・アフターが超わかりやすいパーツ実装jQueryプラグイン「jquery-comparewyw」 単純に画像を並べてビフォアアフターするよりも面白くて場所を取らない一工夫のあるUIが実装できます。 マウスでドラッグ＆ドロップしたり、マウスオーバーで直接切り替えることも可能。 画像同士を重ねることで分かりやすいですね。ショッピングサイトなんかで使えるのかも。 関連エントリ Flashみたいなテキストエフェクトが作れるjQueryプラグイン「TextFX」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 画像スライダー
[JS]jQueryのプラグイン33 1選 -2011年7月 | コリス
jquery.transitions CSS transitionのサポートを検出し、classベースのアニメーションを与えることができます。
古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」:phpspot開発日誌
Demo | jQuery DivCorners | Product of roydukkey 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」 border-radiusで角丸は実装できるようになりましたが、古い非対応ブラウザだとうまく表示されないということで、やっぱりdivでやろうという方は必見のプラグイン。 連番の画像を用意しておくだけであとは簡単に初期化できます 実装コードの例。 prefix+"top-left"+拡張子 prefix+"top"+拡張子 prefix+"bottom"+拡張子 ・・・ という感じで画像を８枚用意すれば独自の縁が簡単にできます グラデーションがかかったものも簡単に実装できます 単純にdivで分割しているだけです 関連エントリ IEでもCSS3を使うためのツールやリソース集 CSS3の擬似クラスをIE6-8でも使えるように
jQuery Mobileで作るスマホ向けFacebookアプリ
jQuery Mobileで作るスマホ向けFacebookアプリ：無料クラウドでできるFacebookアプリ開発入門（3）（1/5 ページ） 連載第1回の「基礎から分かる、Facebookアプリの作り方」と第2回の「クラウドに載せてFacebookアプリを全世界に公開する」では、Facebookアプリの開発と公開まで行いました。最終回となる本稿では、公開したアプリケーションの管理について紹介します。また、ちょっとしたアレンジとして、jQuery Mobileを使ったスマートフォン向けのFacebookアプリ開発について説明します。 公開したFacebookアプリを管理するには Facebookアプリでは、ユーザーが簡単にアプリを探せる「アプリディレクトリ」や、アプリのお知らせや情報を公開するための「アプリケーションプロファイルページ」、アクティブユーザーやニュースフィードの記事数、Face
jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQuery Mobileに関して少し整理したいので まとめました。JQMを使うときに知っておくと 便利そうなTipsとか情報とか。いくつか自分 の記事も含まれているのが若干アレなんです が、ご了承ください。内容はコードのみ、では なく、参考サイトなど一貫性無い感じですが。 整理するのが下手なもので一貫性に欠ける内容で申し訳ないですけど、jQuery Mibileを使ったWebサイト構築時のちょっとしたTipsや役に立つ情報などのまとめです。 ページ移動にAjaxを使わないようにする プラグインの前に記述。リンク単位でならマークアップでrel=”external”を、フォームはdata-ajax=”false”を加える。 <script src="http://co
シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」:phpspot開発日誌
Basic Example - jQuery The Final Countdown plugin シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」。 次のようなデザインのカウントダウンタイマーが簡単に実装できるプラグインです。 実装コードも次のように美しい。 関連エントリ ファンシーなデザインのカウントダウンタイマー実装jQueryプラグイン「Fancy Countdown」 画像を使った綺麗なタイマーが実装できるjQueryプラグイン「spriteTimer」
[JS]jQueryのプラグインを開発するためのテンプレート -jQuery Boilerplate
jQuery Boilerplate [ad#ad-2] jQuery BoilerplateはjQueryのドキュメント「Plugins/Authoring」から、より良いパフォーマンスとメモリ使用を提供することを目標として開発したとのことです。 jQuery Boilerplate (stripped version) jQueryのプラグインのテンプレート(stripped version)です。 ※2011年7月26日現在のものです。 (function($) { $.pluginName = function(element, options) { var defaults = { foo: 'bar', onFoo: function() {} } var plugin = this; plugin.settings = {} var $element = $(element)
独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン:phpspot開発日誌
Screw Default Buttons! | Custom Radio Buttons and CheckBoxes 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン。 ONかOFFの状態の２枚の画像を用意してjQuery関数で初期化するだけで簡単に独自デザインのものが作れます。 実装コード例。超簡単ですね。 追加のCSSでよりスタイルを独自に変えることも可能です 関連エントリ 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelectBox」 CSS3で独自デザインの綺麗なボーダーを実装する例
jQuery Clip - jQueryのプラグインをまとめました。
jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。
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ベースの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はなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
タブやアコーディオンなど、様々なUI構築用のjQueryプラグイン30個以上をセットにしたフレームワーク・ jQuery EasyUI - かちびと.net
普段からよく見かけるjQueryによる タブやアコーディオンなどのUIの構築 を簡略化するためのフレームワーク・ jQuery EasyUIのご紹介です。プラグ インは30個以上あり、どれもシンプル なものになっています。 数じゃ敵いませんけど、Ext JSのjQuery依存型みたいな印象です。結構昔からあるみたいなので知ってる方も多いかもですけど・・・恥ずかしながら最近知ったので、僕と同様にまだ知らない方向けにシェア。 jQueryを使ったシンプルなユーザーインターフェースを構築する為のプラグイン30数個をワンセットにしているフレームワークです。余計な機能が付いていないものばかりなのでカスタムしやすいのでは。 コードはドキュメントに全部書いてありますので割愛します。 プラグインの一部をご紹介します。 Accordion 開閉するアコーディオン Menu シンプルなメニュー Panel パ
プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」:phpspot開発日誌
プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」 2011年07月13日- Extended Progress Bar プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」。 プログレスバーは処理中に表示することでユーザのストレスを軽減することが出来ますがそんなプログレスバーを実装する際に、自分のサイトにマッチしたものを手軽に作りたいというニーズがあるのではないでしょうか。そんな場合に使えるプログレスバー実装のためのjQueryプラグインです。 次のような豊富なカスタマイズオプションが用意されています ・色のカスタマイズ ・値の最小値、最大値のカスタマイズ ・クリティカル値の設定 ・バーの色設定 ・バーの進行方向 ・バーのラベル表示位置 ・多数のイベントハンドラ プログレ
ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。 サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択でき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
