マスクを設定して入力に制限をかけられる「jQuery Mask Plugin」:phpspot開発日誌
jQuery Mask Plugin - A jQuery Plugin to make masks on form fields and html elements. マスクを設定して入力に制限をかけられる「jQuery Mask Plugin」 日付、電話番号等の細かなマスクを設定してValidation以前に入力を制限することが可能です。 <input type="text" name="field-name" data-mask="00/00/0000" data-mask-selectonfocus="true" /> のようにしてマスク指定が可能で、非常に簡単に扱える他、JSコードでの非常に細かなフィルタにも対応 関連エントリ クールでモダンなコンタクトフォームのデモ＆サンプルスクリプト フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「Formplate
ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌
Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル
オートコンプリート可能なプルダウン実装「jquery.ajax-combobox」:phpspot開発日誌
sutara79/jquery.ajax-combobox GitHub オートコンプリート可能なプルダウン実装「jquery.ajax-combobox」。 選択肢が膨大にあっても対応可能なプルダウンを実装できます 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flexselect」 selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」 フラットなクールデザインのselectを実装できる「Select or Die」 selectボックスをスマホネイティブ風にフルスクリーン化する「Bootstrap-fullscreen-select」
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
GitHub - jackocnr/intl-tel-input: A JavaScript plugin for entering and validating international telephone numbers
NEWS: we now have our own React component! Play with it on Storybook. NEWS: we now have our own Typescript type definitions, so no need to use @types/intl-tel-input anymore! 🗣️ NEWS: we now provide translation files for several common languages! See them in action. International Telephone Input is a JavaScript plugin for entering and validating international telephone numbers. It takes a regular
複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」:phpspot開発日誌
Gridmanager Demos 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」。 次のようにカラムごとにツールを付与して、コンテンツを追加したり消したり、移動できたり、幅を調整したりとかなり高度な事が誰でも簡単にできるUIが実現可能です。 jQueryプラグインの形で誰でも簡単に実現できるところがすごい。複雑なレイアウトのサイトであっても見たまま編集ができるというのはよさそうですね。 ライブプレビューも可能 レスポンシブにも対応 関連エントリ 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 オンラインで使えるWYSIWYGなCSS3コードジェネレーター「Enj
PDFy - PDFをホストしてPDF.jsで表示するWebサービス MOONGIFT
PDFはビジネスでよく使われるフォーマットになっています。そのためインターネット上にもコンテンツが無数にありますが、閲覧する際にはプラグインの仕組みを使っていたり、ダウンロードしたりしなければならないのが手間です。 そこでプラグインフリーで使えるPDF.jsを使ってみましょう。単純にビューワーとしてだけでなく、PDFyみたいなサービスだって作れちゃいますよ。 PDFyの使い方 Webブラウザ上でPDFが表示できます。これはプラグインフリーです。 ページ送りもあって再現性はかなり高いです。 日本語も表示可能です。 文字の選択もできます。画像の埋め込み場所も適切に再現されています。 PDFyは埋め込み表示もサポートされていて、PDFをより他のコンテンツと同じように扱えるようになります。アップロードすると、すぐにクライアントサイドで表示ができます（クライアントサイドでJavaScriptの解析を
これは危険! PhotoshopやOffice等のソフトのバージョン情報をブラウザ上で取得できる「software-detect.js」:phpspot開発日誌
localStorageにフォーム内容を保存してブラウザクラッシュに備える「jquer... 次の記事 ≫：タイトルヘッダーをフルスクリーンにしてクールにするチュートリア... これは危険! PhotoshopやOffice等のソフトのバージョン情報をブラウザ上で取得できる「software-detect.js」 2014年05月30日- johnmcl/software-detect-js GitHub これは危険! PhotoshopやOffice等のソフトのバージョン情報をブラウザ上で取得できる「software-detect.js」。 こんな情報をブラウザで抜けちゃていいのだろうかというJSですが、ソフトにバンドルされているフォントがインストールされているかどうかをベースに判定していて、なるほどこれだと脆弱性をついているわけじゃないし、利用者が気をつけないといけないな、というところ
localStorageにフォーム内容を保存してブラウザクラッシュに備える「jquery.formsaver.js」:phpspot開発日誌
localStorageにフォーム内容を保存してブラウザクラッシュに備える「jquery.formsaver.js」 2014年05月29日- jquery.formsaver.js by hackprime localStorageにフォーム内容を保存してブラウザクラッシュに備える「jquery.formsaver.js」 ブラウザが落ちてフォームが消えてしまった、というのに備えるためのライブラリです $("#form_id").saveForm(); $("#form_id").restoreForm(); のようなAPIで簡単にlocalStorageにフォーム内容を保存、リストアを可能にします。好きなタイミングで保存、リストアが可能となるので、扱いやすそう。 関連エントリ Gmail風に書き途中のフォーム内容をlocalStorageに定期的に保存してくれる「Sisyphus」
タッチ端末でドラッグ＆ドロップできるようにするjQueryプラグイン「touch-dnd」:phpspot開発日誌
touch-dnd by rkusa タッチ端末でドラッグ＆ドロップできるようにするjQueryプラグイン「touch-dnd」 Sortable, Draggable, Droppableをタッチ端末で実現できるようにするものです。 関連エントリ タッチデバイスでリストを並び替えたり削除したりできるUI実装ができる「Slip.js」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」 タッチに最適化されたLightBox実装jQueryプラグイン レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」
selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」:phpspot開発日誌
selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 2014年04月21日- wSelect :: jQuery Select Box Plugin selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 次のようなアイコン付きででbootstrapなサイトでもでも使えそうなselectボックスが実装できます。 国際的なサイトなどで、言語を切り替えるスイッチを作る場合なんかに使えそう。 アイコン画像は次のようにdata-iconで指定してあげて、あとは初期化というお手軽さもいいですね。 関連エントリ フラットでカッコいいselectボックスを作成できるjQueryプラグイン「EasyDropDown」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 selectボ
電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」:phpspot開発日誌
jQuery Autotab Demo 電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」 電話番号フィールドを複数にわけているけど、入力がおわったら次のフィールドに自動でうつる、というアレが簡単に実装できます。 単に移動するだけではなくて、入力値をフィルタすることも可能です 関連エントリ Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 より良いフォームの入力ヒント実装jQueryプラグイン「Label Better」 フォーム要素にフォーカスした際のヒント表示を簡単に実装できるjQueryプラグイン「FormHelp」
faviconにアニメーション付きのバッジをつけられる「favico.js」:phpspot開発日誌
favico.js - Make a use of your favicon faviconにアニメーション付きのバッジをつけられる「favico.js」 faviconに通知等の件数を付与し、単に付与するだけではなく、アニメーションをつけられるJS。 タブがバックグラウンドにある時に、分かりやすいですね。 このライブラリを利用して簡単に実現できるので通知等があるサイトの場合は実装しておくとよいかもですね 関連エントリ faviconを円グラフにしてアニメーションできる「Piecon」
Sieve jQuery Plugin
"Moral indignation is jealousy with a halo." - H. G. Wells (1866-1946) "Glory is fleeting, but obscurity is forever." - Napoleon Bonaparte (1769-1821) "The fundamental cause of trouble in the world is that the stupid are cocksure while the intelligent are full of doubt." - Bertrand Russell (1872-1970) "Victory goes to the player who makes the next-to-last mistake." - Chessmaster Savielly Grigoriev
ページの一番上へ、を簡単に実装できるjQueryプラグイン「ScrollUp」:phpspot開発日誌
scrollUp jQuery plugin ページの一番上へ、を簡単に実装できるjQueryプラグイン「ScrollUp」 ページ内をスクロールすると出てくる、あの「一番上へ」ボタンを容易に実装できるプラグインです。 ページトップにいる時はなくて、スクロールすると表示されます。方式が、色々とカスタマイズでき、CSSカスタマイズでUIも自由に変えられます スタイルだけではなく、挙動についてのカスタマイズも容易 関連エントリ コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 jQueryでブレ
Boostrap向けの日付/時間ピッカーを実装するスクリプト・bootstrap-datetimepicker
Twitter Boostrap用の日付/時間 ピッカーを実装する為のライブラ リ・bootstrap-datetimepickerの ご紹介。日付と時間を同じinput 要素内で取得できます。また、 フォーマットも指定可能です。 デート・タイムピッカーを実装するスクリプト。jQuery依存みたいです。 シンプルに日付と時間を取得するだけのものですが、別のinput要素を用意する必要が無いのはユーザーに優しいですね。 Sampleカレンダーの下部に時間ピッカーへの切り替えボタンがあります。 言語を日本語に指定したけどカレンダーはまだ日本語には未対応です。出力フォーマットは自由に設定できます。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.
マウスホイールで画像をズームさせるjQueryプラグイン・jQuery Wheelzoom
マウスホイールで画像を拡大、ドラ ッグ操作によるスクロールが可能な jQueryのプラグイン、jQuery Wheelzoomのご紹介です。シンプルで いいですね。IEは9からの対応だそう なので利用シーンは若干限られそ うですけど。 マウスホイール操作による画像のズームや、ズーム後にドラッグ操作でスクロールも可能にするスクリプトです。 マウスホイールで画像をズームします。それだけと言えばそれだけなんですけど、結構軽量なので一応覚えておくといいかも。 Sample動作サンプルですー ドラッグ操作も可能です。タッチイベントへの対応は・・・別途コードを用意しなきゃかな（確認してない タッチイベントと合わせてスマフォ向けのECサイトなんかに導入したり、というのも良さそうだけどピンチイン/アウトにも対応しないとですかね、多分。 コード<script src='http://ajax.googlea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
確認ダイアログ（window.confirm）の実装をクロスブラウザで統一できる「jquery.confirm」:phpspot開発日誌
ページ内の文字をハイライトさせることができるjQueryプラグイン「FilteringHighlight」:phpspot開発日誌
ウェブデザインのセンスを磨く！ 2012年下半期洗練されたディテールのUIデザインのまとめ