selection.jsは要素の複数う選択を可能にするスクリプトです。非依存で単体で動作します。上サンプルのように、複数並べられたボックスをドラッグで選択する事が可能で、タッチデバイスにも対応させることも可能です。選択された要素にはclassが付与されます。ライセンスはMIT。 selection.js
DOM要素をドラッグで複数選択するスクリプト・「selection.js」
selection.jsは要素の複数う選択を可能にするスクリプトです。非依存で単体で動作します。上サンプルのように、複数並べられたボックスをドラッグで選択する事が可能で、タッチデバイスにも対応させることも可能です。選択された要素にはclassが付与されます。ライセンスはMIT。 selection.js
通常のフォームをインタラクティブなチャットフォームにする「convForm」:phpspot開発日誌
GitHub - eduardotkoller/convForm: A jQuery plugin that transforms a form into a interative chat. 通常のフォームをインタラクティブなチャットフォームにする「convForm」 無機質なフォームに値を入れていくだけではなく、チャットに対する質問形式でフォームを埋めていくという新しいアプローチのフォームに変換できます。 誰かと会話しているような感じでフォームが埋まっていくので、コンバージョンが高まるかも。 一度A/Bテストでコンバージョンを測ってみたいですね。 関連エントリ デフォルトのフォーム要素を改善した「formbase」 複数ステップに分けたフォームが簡単に作れる「Multi-Step-Form-Js」
フォームバリデーションライブラリParsley.jsでリアルタイムバリデーションを行う - Qiita
JavaScriptのフォームバリデーションライブラリParsleyで入力と同時にバリデーションを行う方法を、3通り紹介します。 ※Parsley v2.7.2で動作確認しています。 ※Parsley.jsはJSからの起動と、HTMLにデータ属性をつけての起動が選べますが、今回は後者のやりかたを前提とします。 ※今回バリデーション発火のイベントとしてkeyup focusout change inputの4つを設定しています。 <input>等のフィールドに個別にdata-parsley-trigger属性を設定 公式ドキュメントのUI for fieldの項でも解説されてたり、公式のExampleでも使われてたりしていて、きっと最初にたどり着く方法。 <form data-parsley-validate> <input type="text" required placeholder=
多機能な製品のフィードバックフォームを生成できる「survey.js」:phpspot開発日誌
survey.js : Product Feedback survey 多機能な製品のフィードバックフォームを生成できる「survey.js」 製品の満足度をユーザから受ける際にフォームを作る必要がありますが、そのフォームをJSONデータを元に簡単に作れます。 フォームに使えるタイプは沢山あって自由度のあるフォームが作れて、更に結果もJSONで受け取れます 関連エントリ デフォルトのフォーム要素を改善した「formbase」 フォームのフィールド変更を検出して処理を記述できるjQueryプラグイン「dirrty」 Bootstrapなフォームでのリアルタイムバリデーションを行う「Validator for Bootstrap 3」 フォームのプレースホルダをアニメーションしてズラす「phAnimate」 フォームの送信をAjax化できるjQueryプラグイン「Submitter」
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
jQuery File Uploadを利用した大容量ファイルのアップロードをChunked uploadで実現する - KayaMemo
大容量のファイルをアップする際に、通常のinput type=fileで送ろうとすると herokuだとタイムアウトになったりして上手くいかなかった。 なので、jQueryのファイルアップロードプラグインにある、chunk uploadを利用してアップした。 ・Github blueimp/jQuery-File-Upload 公式のjQuery File Uploadのデモは以下。 https://blueimp.github.io/jQuery-File-Upload/ セットアップの流れは以下を参考に。 https://github.com/blueimp/jQuery-File-Upload/wiki/Setup 通常のアップロード 以下から最新バージョンをダウンロード。 https://github.com/blueimp/jQuery-File-Upload/releases
チェックボックスで制限された数以上のチェックをされた際にアラートを表示させる
Result チェックボックスの数を制限する時に。 jQuery$("input[name='tech']").change(function () { //チェックボックスの最大数を設定 var maxAllowed = 2; //チェックされた数をチェック var cnt = $("input[name='tech']:checked").length; if (cnt > maxAllowed) { $(this).prop("checked", ""); 設定した数より多くチェックが付けられる場合にアラート表示 alert('' + maxAllowed + 'つ以上は選べません！'); } });viaHow to limit the number of selected checkboxes?
範囲指定のスライダーUIを簡単に実装できる「RangeTouch」:phpspot開発日誌
RangeTouch - A super tiny library to make input type='range' sliders work better on touch devices 範囲指定のスライダーUIを簡単に実装できる「RangeTouch」 次のようなタッチデバイスでも動作するようなフォームUIを input type="range" のように記述して実現できるようにする軽量なライブラリです 関連エントリ Bootstrapのパラメータ入力スライダー実装「bootstrap-slider」 レスポンシブで階層的なスライダーナビゲーション実装jQueryプラグイン「yohoho.slyder」 CSSアニメーションを使ったレスポンシブスライダー実装「Jcslider」
テキストエリアのサイズを縦横自動で拡大させられる「jquery.ns-autogrow」:phpspot開発日誌
GitHub - ro31337/jquery.ns-autogrow: Automatically adjust textarea height based on user input. Non-sucking version. STAR IT テキストエリアのサイズを縦横自動で拡大させられる「jquery.ns-autogrow」。 この手のスクリプトは色々とありますが、縦限定だったりします。こちらは横にも対応（もちろん縦横両方にも可能）できます 関連エントリ textareaに行番号を付けられるjQueryプラグイン textareaにドロップダウン形式の入力補助を実装できる「jQuery.textcomplete」 textareaでタブ入力を可能にするjQuery「Textarea Tabbing」 textareaの変更履歴を記録していけるUIが作れる「textbox-revi
Selectボックスをポップアップ形式に変更できる「PopSelect」:phpspot開発日誌
PopSelect | A jQuery plugin to replace select with popover Selectボックスをポップアップ形式に変更できる「PopSelect」 純粋なselectボックスよりも選びやすく、複数選択もしやすいUIの実装ができます 関連エントリ Bootstrapのポップアップ機能を拡張できる「ggpopover.js」 ポップアップ形式のselectの代替になる入力要素を実装できる「PopSelect」 綺麗なデザインのポップアップ、ポップオーバーが実装できる「Fly」 あらゆるコンテンツを美しくポップアップさせるLightboxプラグイン「Lightcase」
ツールチップデモページ
ツールチップデモページ必須名前 名前はフルネームで入力してください。任意ユーザー名 すでに登録されているユーザー名は使用できません。必須メールアドレス（半角英数字） 携帯電話のメールアドレスをご登録の場合は、ドメイン受信設定をお願いします。必須電話番号 半角数字で入力してください。必須備考・お問い合わせ できるだけ詳しいお問い合わせ内容を入力してください。
チェックボックスとラジオボタンをカスタマイズできる「iCheck.js」 ｜ Tips Note by TAM
フォームでよく使うチェックボックスやラジオボタンを、簡単にカスタマイズできるプラグイン「iCheck.js」をご紹介します。 利用方法は簡単で、通常通りマークアップされたチェックボックスやラジオボタンに対して、.iCheck()メソッドを呼び出すだけです。同梱されているスキンの種類が豊富で、そのまま利用することも、自分でカスタマイズすることもできます。 iCheck まずは上記サイトからプラグインをダウンロードします。 ・html 特別な属性などを指定する必要はありません。 ・JavaScript $('input').iCheck({ checkboxClass: 'icheckbox_minimal-red', // チェックボックスにclass名を追加 radioClass: 'iradio_minimal-red' // ラジオボタンにclass名を追加 }); カスタマイズするi
ドラッグ＆ドロップでBootstrapベースのformが作れる「jQuery formBuilder」:phpspot開発日誌
jQuery formBuilder | Drag & Drop Form Creation ドラッグ＆ドロップでBootstrapベースのformが作れる「jQuery formBuilder」 要素をドラッグ＆ドロップで配置して、自由にフォームを生成することが出来ます。 タグを書かずにサクッとサクッとフォームの生成が可能です。 関連エントリ フォームのインライン編集を簡単に出来る「jQuery.editable」 フォームの送信をAjax化できるjQueryプラグイン「Submitter」 フォーム内の特定要素のlocalStorageへのバックアップを可能にする「DataSaver」 フォームのfile入力部分のUIを綺麗に整形できる「jQuery Filestyle」 クールでモダンなコンタクトフォームのデモ＆サンプルスクリプト Bootstrapなフォームでのリアルタイムバリデー
テキストフィールドを日時と時刻入力可能な形に変換してくれる「Combodate」:phpspot開発日誌
Combodate - dropdown date and time picker テキストフィールドを日時と時刻入力可能な形に変換してくれる「Combodate」 input type="text" に属性を設定して初期化をすれば次のようなコンボボックスのUIに変換してくれます。 <input type="text" id="date" data-format="DD-MM-YYYY" data-template="D MMM YYYY" name="date" value="09-01-2013"> 等とフォーマットを指定すれば好きなフォーマットの組み合わせに変換してくれます。 いちいちselectボックスを複数設置するのはめんどくさいですが、これを使えば、実装がかなり容易になりそうです。 関連エントリ 日付のページネーションUIを作る「Bootstrap Date Paginator
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
複数ステップに分けたフォームが簡単に作れる「Multi-Step-Form-Js」:phpspot開発日誌
アニメーションを使った豊富な種類のプレースホルダが実装できる「FoxHolder」:phpspot開発日誌
フォームのプレースホルダをアニメーションしてズラす「phAnimate」:phpspot開発日誌
checkbox/radioをボタン型にしてスマホでも使いやすくする「zInput」:phpspot開発日誌
可愛らしいスタイルのタイムピッカーを実装出来るスクリプト・「timedropper」
textareaに行番号を付けられるjQueryプラグイン:phpspot開発日誌