BootstrapのcheckboxもBootstrap風デザインに変更できる「Checkbox X」:phpspot開発日誌
Checkbox X Demo - Kartik BootstrapのcheckboxもBootstrap風デザインに変更できる「Checkbox X」 Bootstrapでサイトを作ってもなぜかチェックボックスは素のデザインでちょっと残念、ということがありますが、 次のようなデザインであれば完全にBootstrapデザインにマッチしていますね。こだわりたい方は導入するとよさそう 関連エントリ Bootstrapなサイトで階層的なツリービューを作成できるUIライブラリ「bootstrap-treeview」 Bootstrapのナビゲーションバーをお好みにカスタマイズできる「Bootsnav」 BootstrapのDropdownメニューをホバーで開くように出来るプラグイン「bootstrap-hover-dropdown」 複数選択が出来るBootstrapなサイトで使えそうなselec
画像上にピンを立てて注釈を埋め込むことができる「jQuery.easypin」:phpspot開発日誌
jquery.easypin by atayahmet 画像上にピンを立てて注釈を埋め込むことができる「jQuery.easypin」 画像にピンを立てて、洋服等をそのまま購入に結びつけるようなUIが簡単に実装できます。 関連エントリ 画像の選択に便利なチェックボックス実装jQueryプラグイン「imgCheckbox」 WEB上での画像の切り取りの決定版jQueryプラグイン「Cropper」 Photoshopばりの画像編集エディタをサイト上で使えるようにするjQueryプラグイン「Classypicozu」 画像・動画にリアルタイムでフィルタをかけられるjQueryプラグイン「toCanvas」
textareaの変更履歴を記録していけるUIが作れる「textbox-revision-tracker」:phpspot開発日誌
textareaの変更履歴を記録していけるUIが作れる「textbox-revision-tracker」 2015年10月27日- jonmbake/textbox-revision-tracker GitHub textareaの変更履歴を記録していけるUIが作れる「textbox-revision-tracker」。 テキストを入力していって、途中経過を保存し、ブラウザを開いている間は好きなタイミングに戻すことができるというUIが作れます。 テキストの差分をハイライトしてくれたり、保存時間を記録してくれたりという機能があります。 サーバサイドやlocalStorageに保存してブラウザを閉じても使えるようにしたらより便利そうです 関連エントリ textareaを入力値によってリサイズできるシンプルなjQueryプラグイン「autoresize-textarea」 textarea内の
レスポンシブサイズの100アイコンセット:phpspot開発日誌
100 Responsive Line Icons - download free icons by PixelBuddha レスポンシブサイズの100アイコンセット。 ピクトグラムアイコンはサイズ拡大による劣化はありませんが、拡大すると当然ながら線が太くなって、大味なものになってしまうのは否定出来ません。 こちらのアイコンは３セットそれぞれ独自にデザインされており、汎用的なものも多く、サイズが大きくなってしまっても細いラインで細かく美しいアイコンが使えます。 こうしたアイコンは始めてみましたが、こうした考え方がどんどん広まっていくのかもしれません。 関連エントリ 195のフラットデザインの国旗アイコンセット ポップなデザインが印象のアイコンフォント「Prestashop Official Icon Pack」 306種類のスマホアプリアイコンセット「subway」
Bootstrap3ベースのCaptcha付きコンタクトフォーム用OSS:phpspot開発日誌
フォーム内の特定要素のlocalStorageへのバックアップを可能にする「DataS... 次の記事 ≫：色付きのピクトグラムアイコン2000個セット「Thousands Icons」
ドロップダウンメニューにサブメニューを付けて便利にするjQueryプラグイン「SmartSelect」:phpspot開発日誌
jQuery SmartSelect ドロップダウンメニューにサブメニューを付けて便利にするjQueryプラグイン「SmartSelect」 ドロップダウンメニューをcheckbox付きにして折りたたみ機能や検索によるフィルタ機能等を加えられます。 selectの項目が大量にあっても便利に使えるようにするためのもののようです。 関連エントリ メニューが多い場合のMegaメニューのドロップダウン実装「Animated-megadrop」 textareaにドロップダウン形式の入力補助を実装できる「jQuery.textcomplete」 言語切り替え用のドロップダウンUIを簡単実装できる「Polyglot」
HTMLコンテンツ全体のWYSIWYG編集を可能にするツール「ContentTools」:phpspot開発日誌
GetmeUK/ContentTools GitHub HTMLコンテンツ全体のWYSIWYG編集を可能にするツール「ContentTools」。 ページ上の左上のペンのアイコンを押すとページ全体が編集可能となり、テキストの修飾や画像・動画のD&Dによる移動が可能。 昔からIEなどでもContentEditableという仕組みがありましたが、こちらはモダンな実装となっていて面白いです。 関連エントリ HTML5ベースのWYSIWYGエディタ「Squire」 サーバ上のHTMLをWYSIWYGで書き換えてそのまま保存するというシンプルなCMS「SiteCake」 Markdown記法そのままでWYSIWYGできるエディタ実装jQueryプラグイン「Markdownify」
アイコン探しの手間を最小化できる「We Love SVG」:phpspot開発日誌
We Love SVG - Google Fonts for icons | Icons8 アイコン探しの手間を最小化できる「We Love SVG」 豊富なアイコンセットがWEB上で多数収録されており、更にそれらを一元的に使うためのjQueryプラグインも配布。 WEB上で好みのアイコンを選んでクリックすれば実装用のコードが出るのであとはサイトに貼り付けるだけで簡単にアイコン挿入が出来ます。 ライブラリを使わない場合も、知らなかったようなアイコンセットの発見もできます。 関連エントリ 195のフラットデザインの国旗アイコンセット 汎用iOS8用アプリアイコン30個セット「Jellycons iOS 8 App Icon Set」 306種類のスマホアプリアイコンセット「subway」 ポップなデザインが印象のアイコンフォント「Prestashop Official Icon Pack」
Bootstrapでたて型のタブを実装できる「Bootstrap Vertical Tabs」:phpspot開発日誌
Bootstrap Vertical Tabs - Demo Bootstrapでたて型のタブを実装できる「Bootstrap Vertical Tabs」 通常横並びのタブを次のように縦に並べることが出来ます。UIとしてはよくあるUIですね 文字も90%回転させて次のようにすることも可能。 関連エントリ Bootstrapのポップアップ風デザインのモーダルを作成「Stackbox.js」 Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」 Bootstrapのselectを拡張した「select2」 BootstrapとMaterial Design Liteの比較
BootstrapのDropdownメニューをよりリッチにすることができる「Bootstrap-dropselect」:phpspot開発日誌
Bootstrap-dropselect by lodev09 BootstrapのDropdownメニューをよりリッチにすることができる「Bootstrap-dropselect」 通常のドロップダウンを次のように検索ボックスを入れたり、アイコン付きのメニューにしたりと、リッチにすることが出来ます 関連エントリ Bootstrapのポップアップを強化する「WebUI Popover」 Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」 BootstrapのDropdownを使うなら必ず知っておきたい「Bootstrap Enhancement Dropdowns」 selectボックスをスマホネイティブ風にフルスクリーン化する「Bootstrap-fullscreen-select」 Bootstrapのポップアップ風デザインのモーダルを作成「Stack
Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」:phpspot開発日誌
Smoke Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」 フォームのバリデートや通知、モダンなプログレスバー、フルスクリーン機能、パネル等の機能を追加できます。 より今っぽいサイトを作るのに役立ちそうなプラグインなのでBootstrapを使う人は知っておいて損は無いと思います 関連エントリ Bootstrapのポップアップを強化する「WebUI Popover」 Bootstrapのポップアップ風デザインのモーダルを作成「Stackbox.js」 Bootstrapなサイトでレスポンシブなタブナビゲーションを実現する「Responsive Tabs」 Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」 BootstrapのDropdownを使うなら必ず知っておきたい「Bootstrap Enhanc
クレジットカード入力専用フォームを実装できる「payform」:phpspot開発日誌
レスポンシブに使えるクオリティの高いサイドメニュー実装「vertical-re... 次の記事 ≫：画像・動画にリアルタイムでフィルタをかけられるjQueryプラグイン「to...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2KBで依存ライブラリなしのPinterest風UI実装「Minigrid」:phpspot開発日誌
水平スワイプが可能なスライダー実装ができる「Horizon Swiper」:phpspot開発日誌
Bootstrapなサイトで階層的なツリービューを作成できるUIライブラリ「bootstrap-treeview」:phpspot開発日誌
input[type=file]をいい感じにスタイリングするチュートリアル:phpspot開発日誌
エレメントをボックスの中心に配置できる「Center.js」:phpspot開発日誌
Windowsフォルダ風の階層的にファイルを辿れるUIを実装できる「folderselect.js」:phpspot開発日誌
Bootstrapのポップアップ機能を拡張できる「ggpopover.js」:phpspot開発日誌
selectタグの機能を大幅に向上させる「selectivity」:phpspot開発日誌