フォームでユーザーにヘルプをツールチップで実装するjQueryプラグイン・jQuery FormHelp
割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。 フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。 動作サンプルです。HTMLを普通にマークアップするだけで自由にツールチップ内に実装できるのは楽ですね。 コード 本体とプラグインを読み込みます。 $.formHelp();コールします。 <input id="input-email" type="email"/> <span class="helptext" data-for="#input-email"> <p>ここにツールチップ</p> <hr> HTMLが自由に使えます <ul> <li>One<
selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」:phpspot開発日誌
mtkopone/zelect GitHub selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」 既存のselectは初期のブラウザで実装されたもので、大概古いインタフェースなわけですが、標準ではあのままです。 これを簡単にjQueryプラグインで、インクリメンタル検索対応にして入力を楽にできます。 選択肢が多すぎる場合なんかに便利 関連エントリ selectボックスをiPhoneのOn/OffスイッチっぽくできるjQueryプラグイン「switchy」 selectボックスをリッチかつクールにできるjQueryプラグイン「jAutochecklist」 selectボックスを超カッコよくするjQueryプラグイン「Chosen」
[JS]レスポンシブ対応でパンくずの一行が長くて困ったを解決するスクリプト -rCrumbs
多階層をもったサイトでは、パンくずも長くなりがちです。 テキストベースで実装した長い一行のパンくずを表示幅に合わせて最適化するjQueryのプラグインを紹介します。 jQuery rCrumbs -GitHub rCrumbsのデモ rCrumbsの使い方 rCrumbsのデモ 一行で長いパンくずは表示幅を変更すると、最適化されて表示されます。 主要なモダンブラウザをはじめ、IE8+でご覧ください。 デモページ：幅1200, 780, 480pxで表示 幅1200pxで表示 先頭のHomeから、長いページタイトルまで全部が表示 幅780pxで表示 先頭のHome側からはみ出るアイテムを省略 幅480pxで表示 長いページタイトルもはみ出る場合は省略 ※省力無しの固定表示することもできます。 rCrumbsの使い方 実装は簡単で、パンくずはリスト要素で実装されています。 Step 1: 外部
スマホアプリのような横から出てくるサイドメニューを実装できるjQueryプラグイン
【Sidr】Facebookアプリのようなメニュ... / 【jPanelMenu】横から出てくるサイドメニ... / 【Snap.js】フリック動作で出し入れが可能な...他...全4件
SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」:phpspot開発日誌
svg.js - A lightweight JavaScript library for manipulating and animating svg SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」 ちょっと、SVG苦手だわ、と思った方はこうしたライブラリでトライしてみるのもいいかもしれません。 次のような分かりやすいコードでSVGを操ることが可能になります ライブラリも5KB程度なので、簡単な画像を描画するのならこちらでブラウザ上で描いちゃったほうが軽そうですね。 デモページ 関連エントリ SVGグラフィックを手書き風アニメーションさせられる「Lazy Line Painter」 SVGを使った高度なアニメーションを実現できるライブラリ「BonsaiJS」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」
ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」:phpspot開発日誌
ModelN/sDashboard GitHub ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」。 次のようなパネル状のUIでパネルを好きな位置に移動できたり、ウィジェットを追加したりすることのできるフレームワークです。 管理画面等のダッシュボード作成の際に活用できる場面がありそう 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 アイテムをタイル状に並べる新しいjQuer
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン:phpspot開発日誌
Expanding Textareas jQuery Plugin テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン。 文字の量に応じて自動でリサイズするテキストエリアはブラウザ標準でも付けてもらいたいぐらい便利なのですが、最低の高さを設定したり、リサイズ時のコールバックを設定したりできるプラグインのご紹介。 テキストをいれてなくても最小のサイズが指定できるのは便利。 リサイズされた時のコールバック設定により、現在の行数なんかを表示することもできますね 関連エントリ textareaのキャレットを細かく制御する関連jQueryプラグインまとめ 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」
[JS]スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ：Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」:phpspot開発日誌
ThreeSixty ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」。 マウスやスワイプで回転させられる次のような3Dオブジェクトをページ内に配置できます。 （実際には3Dオブジェクトを描画するというよりかは、画像を切り替えて回転させています） 商品の写真を360度撮影できる仕組みさえあれば、商品を回転できるECサイトに活用できそうですね。 関連エントリ コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」 UIがカッコいいオートコンプリート実装jQueryプラグイン「Ajax AutoComplete」 吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」 テキスト表現力を豊かにするタイポグラフィ関連
テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」:phpspot開発日誌
Columnizer jQuery Plugin テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」。 <div>内にある、<h1>や<p>で構成されただけの文書を初期化すると、新聞風のレイアウトにしてくれます。 マークアップ例 初期化したレイアウト。カラムの幅なんかはclass名指定によって選べるようです。 ちょっと変わったUIにしたい、とか新聞っぽさを出したい時に使えそう 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 アイテムをタイル状に並べる新しいjQueryプラグイ
[JS]最近リリースしたjQueryのプラグインのまとめ -2013年1・2月
紹介済みから未紹介のものまで、最近リリースしたjQueryのプラグインをまとめました。 去年までは33+1選としてましたが、今年から新たなフォーマットで。
タッチデバイスにも対応したシンプルなLightboxを実装するjQueryプラグイン・Swipebox
タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox
jQueryの可能性は無限大！？プラグインまとめ番外編 - Webデザイン初心者向けのあれこれ
どうもこんばんは、僕です。 今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編？と言った感じです。 一応今までのプラグインまとめ記事はこちらです。 ・ひと工夫でこんなことも！ユニークなjQueryプラグイン5つ集めてみました ・すっごい動くよ！テキストをアニメーションさせるjQueryプラグイン集めてみた ・今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました ・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた ・jquery-tubular http://code.google.com/p/jquery-tubular/ ページの背景にYouTubeの動画を指定することができます。 背景を考える幅が広がるのではないでしょうか。 ・jquery.snipe http://rayfranco.github.com/jquery.sn
jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」:phpspot開発日誌
Post/jquery bullet graph - dingsdax jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」 select エレメントをプラグインで初期化すると次のようなグラフが描画できます。 棒グラフを細分化して使い方次第で情報を分かりやすく表示できます。 売上等のパフォーマンスを分類して目標ラインに到達しているかどうか、といった表示をする際に使えそう 関連エントリ テーブルをグラフに変換してくれるjQueryプラグイン CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 クールなドアノブ風の％グラフを描画できるjQuery Knob
Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」:phpspot開発日誌
FullCalendar - Full-sized Calendar jQuery Plugin Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダー実装のスクリプトは色々とありますが、UIが綺麗に作られているカレンダー実装jQueryプラグインの１つとしてご紹介 ドキュメントが充実しておりカスタマイズ制が高いものとなっています 関連エントリ Google Calendar風に使えるカレンダー実装jQueryプラグイン「jquery-frontier-calendar」 これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]チェックしておきたいjQueryのプラグインのまとめ -2013年3・4月
ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」:phpspot開発日誌
これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集
マンガっぽい物をWEB上で作れるライブラリ「Comix I/O」:phpspot開発日誌