階層的なスケジュール表示ができて便利なjQueryプラグイン「GraspSchedule.js」:phpspot開発日誌
jQuery - GraspSchedule.js 階層的なスケジュール表示ができて便利なjQueryプラグイン「GraspSchedule.js」。 次のようにスケジュールを階層にワケて表示できます。夜間対応以下に、具体的に何をやるかといった事を記載できて、より細かい事を分かりやすく表示できます。 関連エントリ 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 複数条件で結果を絞り込めるテーブルを実装できるjQueryプラグイン「Multifilter」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 jQueryのanimateを高速化した「Velocity.js」 ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」
Bootstrap用、横スライド式メニュー等の追加コンポーネントが使える「Jasny Bootstrap」:phpspot開発日誌
Bootstrap用、横スライド式メニュー等の追加コンポーネントが使える「Jasny Bootstrap」 2014年01月13日- Jasny Bootstrap Bootstrap用、横スライド式メニュー等の追加コンポーネントが使える「Jasny Bootstrap」。 通常のBootstrapだとスライドダウンする形式のメニューがレスポンシブで実装されますが、トレンドである、横スライド式のメニュー等が実装できるBootstrapの追加コンポーネント集です。 メニュー以外にもボタンやナビゲーション用メニュー、フォーム入力補助機能等が拡張されていてどれも使いやすそう。 横スライド式メニュー 拡張ボタン 併せて使えば便利ですね。本家にインクルードされてもよさそうな質です。 関連エントリ フリーで使えるフラットでハンサムなBootstrapテンプレ集「Black Tie」 Bootstrap
超カッコイイ立体的なメニューを実装したデモ:phpspot開発日誌
Perspective Page View Navigation | Codrops 超カッコイイ立体的なメニューを実装したデモ。 ページがあって、クリックすると次のようにページが傾いてメニューが表示されるというデモです。 デザインもフラットでクール。 数年後のWEBではこうしたデザインは当たり前になっているのかもしれませんね。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 アコーディオン型のシンプルな階層メニューが作れるjQueryプラグイン「navgoco」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Nav
ドラッグ＆ドロップで複数の画像を切替えられるようにするjQueryプラグイン「Covering Bad」:phpspot開発日誌
Covering Bad ドラッグ＆ドロップで複数の画像を切替えられるようにするjQueryプラグイン「Covering Bad」。 次のように２枚の画像に切れ目を入れて、つまみ部分をドラッグ＆ドロップで画像を切替えられるUIが作れます。 あるときと無いとき、みたいな比較画像をサイトに表示したい場合に使えますね 関連エントリ 複数の画像を組み合わせて3Dっぽく回転できる「jQuery Interactive 3D」 画像のdiffができるjQueryプラグイン「TwentyTwenty」 コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 サムネイルをクリックでその場で画像ズームできるjQueryプラグイン「Ion Zoom」
新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」:phpspot開発日誌
Justified Gallery 新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」。 PinterestというよりはFlickrの最近変わった新しいギャラリーっぽいギャラリーが簡単に実装できます 次のようにタイル上に敷き詰められ、カーソルを合わせるとキャプションがでるというものです。 高さやマージンの調整等、色々と細かなカスタマイズもできるみたい。 関連エントリ レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 PCでもスマホでもスワイプできるギャラリー実装プラグイン「jQuery.swapgallerywithdots」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 Google画像検索っぽい画像ギャラリーが作れるjQuer
ピュアCSSなローディングアニメーション実装サンプル:phpspot開発日誌
Cleanest CSS spinner, ever | Lea Verou ピュアCSSなローディングアニメーション実装サンプル。 スマホなんかでgifアニメーションがうごかなかったりしてローディングエフェクトが動いていない場合がありますが、ピュアCSSで動作し、かつRetinaディスプレイ等でも劣化なしということで使えるサンプルコードです。 手元のiPhoneでも綺麗に動いてくれました。 関連エントリ クールなローディングエフェクトのアイデア＆サンプル集 ボタンに直接ローディングボタンを付けられる「Ladda」 for Bootstrap 3 ボタンに直接ローディングアニメーションを付けられる「Ladda」
汎用で使える264種のフラットなベクターアイコンセット「IKONS」:phpspot開発日誌
IKONS - 264 free vector icons from Piotr Kwiatkowski 汎用で使える264種のフラットなベクターアイコンセット「IKONS」 次のようなアイコンが、SVG, AI, ESP, PSD, CSH, PNGフォーマットでダウンロード可能です。 フラットなサイトにぴったり使えそうです。 関連エントリ 汎用で使える癖のない400＋のアイコンが詰まったアイコンフォント「Ionicons」 １５０個の汎用で使えるPSD形式のピクトグラムアイコン「Glyphs」 フリーのiOS7アイコン800個セット ベクター形式のお天気アイコン１００個＋パック「Cumulus」 汎用に使えるピュアCSS3なピクトグラムアイコン200個+ SEOに関連するフラットなアイコン60個セット
textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」:phpspot開発日誌
textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」 2013年10月01日- yuku-t/jquery-textcomplete GitHub textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」。 長文を入力中にemoticonを入れたりする際に補完して便利にできるプラグインです。 オートコンプリートというと、単一行テキストが一般的だと思っていましたが、確かにtextareaに入れるのも便利ですね。 ajaxなどには対応していないっぽいですが文章入力に活用できるようにカスタマイズしてもよさそう 関連エントリ テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン textareaのキャレットを細かく制御する関連jQueryプラグインまとめ 通
カスタマイズが容易なカレンダー生成jQueryプラグイン「CLNDR.js」:phpspot開発日誌
CLNDR.js カスタマイズが容易なカレンダー生成jQueryプラグイン「CLNDR.js」 マークアップやCSSは独自で定義してデザインし、Underscore.js形式のテンプレートを使ってカレンダー部分を実装できます カレンダーを実装する際は動的な部分がでてきてしまって割りとややこしいですが、動的な部分はJSでやってくれます サーバサイドでライブラリなどを利用してカレンダーを生成する以外にも、クライアントサイドでカレンダーを実装したい際の１つの選択肢として使えそう 関連エントリ Googleカレンダーっぽい物や日付ピッカー等カレンダー関連のjQueryプラグイン集15 レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」 Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」
エディタをフルスクリーンにして編集しやすくできるjQueryプラグイン「jQuery Fullscreen Editor」:phpspot開発日誌
jQuery Fullscreen Editor エディタをフルスクリーンにして編集しやすくできるjQueryプラグイン「jQuery Fullscreen Editor」 このプラグインで初期化すれば、textareaの右上にボタンが表示され、クリックでブラウザ全体にtextareaが最大化されます 文書を書く場合はエディタ領域が広いほうが編集しやすいので、なかなか便利に使えそう ブラウザ全体に広がります 関連エントリ テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン textareaのキャレットを細かく制御する関連jQueryプラグインまとめ 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」
バッテリーが必要な場合やネット接続がない場合に警告を表示できるjQueryプラグイン「FailSafe」:phpspot開発日誌
FailSafe - A jQuery Plugin to make your App Robust バッテリーが必要な場合やネット接続がない場合に警告を表示できるjQueryプラグイン「FailSafe」 次のように、バッテリーがなかったり、接続状態が悪い場合に警告を出してくれます。 操作時にバッテリーやインターネット接続が必須なサービスの場合は使うと便利そう。 尚、バッテリー残量を取得する場合はFirefox等の対応ブラウザのみとなります。 関連エントリ ドロップダウンをフラットでクールにするjQueryプラグイン「EasyDropDown」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 タッチができてレスポンシブなカルーセル実装jQuery
WEBベースのモダンなUIを持つメーラー「Mailpile」:phpspot開発日誌
Mailpile: Let's take e-mail back! WEBベースのモダンなUIを持つメーラー「Mailpile」 自前のサーバに設置する方式のメーラーで、モダンで高速なUIが特徴。 外部メールサービスを使うのに抵抗があり、でもブラウザで利用したいという方は検証してみてもよさそうです 言語はPythonで設置にはPython環境を用意する必要があります 関連エントリ POP3メールをブラウザで読めるメーラー「T-dah Webmail」 PHPとAjaxを使った軽快ブラウザメールライフを実現できるオープンソース集 高速検索、管理が可能なアウトラインプロセッサ「外部記憶データベース」
スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」:phpspot開発日誌
jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin. スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 次のようにスマホでも階層を開閉できるレスポンシブなメニューが実装できます。デザインもいい感じ。 PCでも横長に違和感なく表示することが可能 スマホサイトを作る上では覚えておいて損はなさそう 関連エントリ 新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」 アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」 レスポンシブなiPhoneのサイドメニューっ
フラットで超カッコいいUIライブラリ「Semantic UI」:phpspot開発日誌
Getting Started | Semantic UI フラットで超カッコいいUIライブラリ「Semantic UI」 ボタン、ヘッダー、アイコン、パンくずリスト、フォーム、グリッド、メニュー等実に豊富で、クールななUIエレメントがセットになっています。 ざっと見たところ、Bootstrapにも対抗できそうなUIライブラリです。とにかく、流行りのフラットデザインベースがカッコいい。 マークアップもBootstrapより、より自然な記法になっているところも嬉しい。 Bootstrapとお互いに競争して素晴らしいライブラリになってくれると利用側としては選択肢が増えてありがたい限り。 関連エントリ FlatなUIが美しいJSレスなUIライブラリ「TopCoat」 Yahooが作ったピュアCSSのUIライブラリ「Pure」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「
レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」:phpspot開発日誌
Glide.js | Simple, Lightweight & Fast jQuery Slider レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 スライド用ライブラリは多数ありますが、PCでも当然使えて、レスポンシブでタッチフレンドリーとなると選択肢は狭まりますね。 そんな場合に１つの選択肢となるライブラリです。 スライドの幅もブラウザに応じて適切なサイズにリサイズされるので、ほとんどの端末に対応できます。 関連エントリ 色の細かなカスタマイズが可能なスライド式カラーピッカー「jQuery Color Picker Sliders」 Youtube動画とSlideshareのスライドを同期して再生できる「Presentz」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ＆ドロップで画像をUPできるようにするjQueryプラグイン「JQuery File Uploader」:phpspot開発日誌
プレビューもできる画像切り取りUI実装jQueryプラグイン「Image Cropper」:phpspot開発日誌
フラットな大量のコンポーネントが詰まったフラットなモバイルUIキット「Flatastic Mobile UI Kit」:phpspot開発日誌
iOSスタイルのヘッダーが作れるjQueryプラグイン「Stacks」:phpspot開発日誌
クールなローディングエフェクトのアイデア＆サンプル集:phpspot開発日誌