Webページやスマホアプリで、ドロワーのパネルを左・右・上・下からスライドさせるだけの超軽量3kBのスクリプトを紹介します。 実装もカスタマイズも超簡単で、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。
<form data-toggle="validator" role="form"> <div class="form-group"> <label for="inputName" class="control-label">Name</label> <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required> </div> <div class="form-group has-feedback"> <label for="inputTwitter" class="control-label">Twitter</label> <div class="input-group"> <span class="input-group-addon">@</span> <input
lightbox系のプラグイン、jQueryで利用するJavaScriptライブラリ「prettyPhoto」の使い方、設定のまとめ。 prettyPhotoは画像拡大表示のほかに、動画の拡大表示にも対応しています。 Youtube、Quicktime、FLASH、VIDEOファイルなどをおしゃれに拡大表示することができます。 ページ内の画像をグループ化することで自動再生スライドショーも可能。 サンプルデモ 必要なファイルは以下URLのダウンロードより http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ prettyPhotoの設定方法jQueryとprettyPhotoよりダウンロードしたprettyPhoto.jsとprettyPhoto.cssをヘッダで読み込む。 <link
フォームの入力チェックは、JavaScriptでリアルタイムにできると便利 ウェブ上のフォームに何らかの入力をするとき、一旦送信してからエラーを表示されるよりも、その場でリアルタイムに入力ミスを指摘してくれる方が便利です。その方がページを移動する手間が省けますし、戻る際に入力内容が消えてしまう心配もなくなるからです。 ■入力チェックは、複合条件だと特に手間がかかる フォームへ入力された内容のチェック機能を自力で作るのはかなり面倒です。特に「この項目のチェックがONの場合にだけ、隣のテキスト入力欄への入力が必須」といった複合条件でチェックするのは大変でしょう。HTML5には個別に入力チェックする機能がありますが、複数項目を組み合わせたチェックをしたければ、JavaScriptなどを併用するしかありません。 ■見やすくて分かりやすい形でエラーを表示したい ユーザの入力や選択にミスがあればエラー
今、構想中のWEBサービスがあります。それを作るために色々な技術を試しています。作ろうと思っているサービスで色が簡単に、自由に指定できるようにしたいなーと思うので、パレットから色を指定できるようなモノを簡単に付けたいと思いました。 検索してみて簡単に付けられそうなJSColorというものを見つけたのでその使い方について書いてみます。 JSColorとは？どんなことができるもの？ http://jscolor.com/ JSColorのサイトです。こちらにデモサイトがあるのでいじってみることができます。 テキストボックスをクリックするとカラーパレットが開くので、指定したい色をクリックするとその色の色コードがテキストボックスに入ります。 このような指定が簡単にできるJSライブラリです。 JSColorをインストールする ダウンロードページ このページの、 jscolor-1.4.4.zip を
ブラウザの特徴をモダンな物も含め網羅的に判別できる1KBのJS「Feature.j... 次の記事 ≫：JSONデータをタイムラインとして表示してくれる「jQuery-TimelineMe」
こんにちは、おじいちゃんです。 今回は簡単にプリロードやローディング画面を実装できるjQuery.ImgLoaderの使い方をご紹介したいと思います。 jQuery.ImgLoaderとは 多くの画像やWebフォントを使うサイトを作成する場合、ロードにかかる時間が長くなり、デザインが反映される前の状態をユーザに見られてしまうことがあります。 デザインは綺麗な状態を見てもらいたいですよね。 そんなときはローディング処理を簡単に実装できるjQuery.ImgLoaderを使って、ローディング画面を作ってあげましょう。jQuery.ImgLoaderは画像のプリロードを行うライブラリなのですが、ローディング画面も実装することができます。 準備 まずはImgLoaderを使うための準備をします。 下記URLからダウンロードしてみましょう。 https://github.com/Takazudo/j
Lobianijs - Responsive jQuery messagebox and notification plugin available for commercial and non-commercial usages メッセージボックスや通知ダイアログ表示コンポーネントが多数詰まった「Lobianijs」 標準やBootstrap標準ではないようなダイアログ、通知のコンポーネントが利用できます 通知系。サウンドも鳴らすことができます 関連エントリ モダンなUIでモーダルダイアログを出すことができる「jQuery Popdown」 iOS風のモーダルダイアログを実装できる「basicModal」 確認ダイアログ（window.confirm）の実装をクロスブラウザで統一できる「jquery.confirm」 アニメーションするモダンなモーダルダイアログを汎用的につくれる「cta
auxiliary/rpage GitHub BootstrapでのPaginationのUIをレスポンシブ化する「rpage」 ページ幅と共に、PaginationのUIを拡大・縮小させられるjQueryプラグインです 意外とこの部分は対応が難しいせいか、レスポンシブ化が進化していないように思いますがこうしたプラグインが出てきたようです 関連エントリ BootstrapのDropdownメニューをよりリッチにすることができる「Bootstrap-dropselect」 Bootstrapのポップアップ機能を拡張できる「ggpopover.js」 BootstrapのDropdownメニューをホバーで開くように出来るプラグイン「bootstrap-hover-dropdown」 BootstrapでiOSアプリ風UIを作るBootstrapテーマ「Bootstrap iOS7」
nuContextMenu クールな独自の右クリックコンテクストメニューを実装できるjQueryプラグイン「nuContextMenu」 次のようにカッコいいコンテクストメニューが実装できます。対象の要素をセレクタで指定できるので、指定要素に対するコンテクストメニューが簡単に作れそうです 関連エントリ ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」 アニメーション切り替えがカッコイイタブUI実装jQueryプラグイン「tabtab.js」 独自デザインのソーシャルシェアボタンが実装できるjQueryプラグイン「jsSocials」 必要な機能は全部入ったモダンなLightBox実装jQueryプラグイン「lightGallery」 エレメントにサウンドを自由に付けられるjQueryプラグイン「easyAudioEffects.js」
RobertoPrevato/jQuery-KingTable GitHub テーブルのソート・フィルタ機能等、超多機能テーブルに変形させられる「jQuery-KingTable」 テーブルを次のように超リッチにしてくれます。ページング、フィルタ、ソート等便利に使えます テーマも色々えらべます 関連エントリ テーブル内容の編集がその場で出来て便利になる「jQuery-Tabledit」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ヘッダ、フッタを固定したテーブルを実装できるjQueryプラグイン「jTableScroll」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」
フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。
jQuery Splitter Demo divによるブロックを分割してデスクトップアプリ風にリサイズできるようにする「jQuery Splitter」 境界をドラッグ＆ドロップでリサイズできるおなじみのUIがWEBでもお手軽に実現できます 関連エントリ 独自デザインのソーシャルシェアボタンが実装できるjQueryプラグイン「jsSocials」 アニメーション切り替えがカッコイイタブUI実装jQueryプラグイン「tabtab.js」 必要な機能は全部入ったモダンなLightBox実装jQueryプラグイン「lightGallery」 エレメントにサウンドを自由に付けられるjQueryプラグイン「easyAudioEffects.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く