jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携 - くらげだらけ
前回、フォームをAJAXでうんちゃかするjQueryFormPluginのエントリーを書きましたけど、フォームと言えばValidateですよね。 ってことでjQueryValidatePluginについてもサラサラ見ていたので、こっちも日本語Document化したのを書いておく。 で、日本語化して書いていたら思ったよりも量が多くて少し適当な感が否めないような感じになっているかもしれません。 必要なさそうなところは一部飛ばしているしー、たまにおかしいところがあるかもしれませんが悪しからず。そんときはコメントくださーい。 あ、あとエラーメッセージ等のローカライズ版と日本語環境用のValidateメソッドを新たに追加するスクリプトも書きました。 デフォルトだと半角英数のみとかー、ひらがなのみとかーできないんでー それから、もともとの目的のjQuery Form Pluginとの連携でAJAXなん
【jQuery】要素をタイル状に並べるプラグイン［Freetile.js］の使い方。
グリッドに沿って要素をタイル状に並べる jQueryプラグインとして、これまでにも［Masonry］や［Isotope］を紹介してきました。 今日紹介する［Freetile.js］も、前者２つと同じような機能を備えたプラグインです。 まずはサンプルをご覧ください。 Freetile.js：サンプル 導入方法や使い方も［Masonry］や［Isotope］とまったく同じ。 まずは公式サイトからプラグイン本体をダウンロードしてきましょう。 Freetile.js 公式サイトダウンロード サイトまた、忘れずに［jQuery.js］もダウンロードしてきてください。 手に入れた２つのファイル、［jQuery.js］と［Freetile.js］は、html の<head>〜</head>内で読み込みます。 <script src="../js/jquery.js"></script> <script
DateTimePicker - XDSoft plugins, scripts, program, parsers
PeriodPicker or TimePicker or PeriodDateTimePicker Try another perfect period picker or cool datetimepicker. Used TimePicker or perioddatetimepicker Compact mode like this datetimepicker mode or cute timepicker (touchable,draggable,use keyboard and mousewheel, support mobile devices). Read more Buy and Download Read more ... How do I use it? First include to page css and js files <!-- this should
Androidでoverflowした要素をスクロール可能にするjQueryプラグイン - Qiita
iOSでもoverflowを設定すると慣性スクロールが効かなくなるので有用かもしれませんが、 よほどでなければUAを判定してAndroidだけ適応するほうがいいと思います。 仕組み touchStartで取得したポイントをと現在の指の位置の差分をscrollTopに設定しているだけです。 模式的に書くと次のようなかんじです。 タッチ開始 $target.on("touchStart", function(event) { event = event.originalEvent; var touch = event.touches[0]; touchStartX = touch.pageX; touchStartY = touch.pageY; });
jQuery – 目的の場所にさくっと要素を追加する | 1：n – DETELU Blog
「いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する」で要素をさくっと選択できるようになったら、次は選択した要素を元に、さくっと新しく要素を追加する方法を覚えて見ましょう。 「新しく要素を追加する」というのはAjaxで外部データを読み込み、リスト一覧を表示させる場合などに頻繁に利用します。たとえばtwitterからデータを読み込んでサイドバーに表示する、といった場合です。 他にもホームページに新しい商品を追加して「NEW」という画像を表示することがあると思いますが、一ヶ月後には消したいという場合、直接HTMLに書き込んでいると、いちいち修正しないといけません。それをうまくJavascriptで追加するようにして上げれば、修正の必要がなくなります。 class名に日時を添えて、そのclass名につけられた日時と現在の日時と比べて処理をさせます。少しスクリプトは荒い例ですが、下
フォームの入力内容をリアルタイムにチェックするサンプル
「jQuery-Validation-Engine」を使って、フォームの入力内容をその都度自動チェックし、ミスがあればバルーンで警告を表示します。 入力項目がフォーカスを失った際と、「チェック＆送信」ボタンがクリックされた際に、各入力内容のチェックが行われます。 ※各入力欄を何も触らずに、とりあえず末尾の「送信」ボタンを押してみて下さい。一括してチェックが行われます。 ※エラーメッセージのバルーンは、バルーン自体をクリックすると消えます。 «解説記事に戻る テキスト入力欄 【基本】 ◎必須項目： (必須) 【文字数の指定・制限】 ◎最低6文字入力： (必須) (オプション) ◎最大12文字入力： (必須) (オプション) ◎5～10文字の範囲で入力： (必須) (オプション) 【文字種の制限】 ◎英数字のみを入力（0～9、A～Z、a～zのみ）： ◎英字と空白のみを入力： ◎数字のみを入力（
【jQuery】フォームのリアルタイムエラーチェックはjQuery Validation Engineプラグインが簡単
Home › プログラミング › 【jQuery】フォームのリアルタイムエラーチェックはjQuery Validation Engineプラグインが簡単 フォームのエラーチェックでいちいち読み込みが走るのはサーバ側もユーザーさんもストレスかかりますよね？ クライアント側でリアルタイムにエラーを表示させることでフォームのコンバージョン率も上がるみたいですし、ユーザーさんのイライラも軽減できる。 これは導入しておいて損はないですね。 フォームエラーチェックのjQueryプラグインをいくつか調べましたが、その中でもポップアップでエラーを表示してくれる「jQuery Validation Engine」が気に入りましたので、その使い方を紹介したいと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは？
GitHub - victorjonsson/jQuery-Form-Validator: [DISCONTINUED] jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.
[DISCONTINUED] jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.
![GitHub - victorjonsson/jQuery-Form-Validator: [DISCONTINUED] jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.](https://cdn-ak-scissors.b.st-hatena.com/image/square/10e4657bda3ba19a8b529ef9c28efa97add6ea4c/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Fbbcb7779576cd4126482fef827522b9d9d72cafa8e28dc4dfbc65a6f18ca62c2%2Fvictorjonsson%2FjQuery-Form-Validator)
jQueryでチェックされたcheckboxの値を取得して配列に格納する方法、また、配列をcheckboxの値に設定する方法 - knt45の日記
2013-04-15 jQueryでチェックされたcheckboxの値を取得して配列に格納する方法、また、配列をcheckboxの値に設定する方法 jQuery よくやるのでメモ。こんなcheckboxがあるとする。 <input type="checkbox" name="days" value="1"> 月曜 <input type="checkbox" name="days" value="2"> 火曜 <input type="checkbox" name="days" value="3"> 水曜 <input type="checkbox" name="days" value="4"> 木曜 <input type="checkbox" name="days" value="5"> 金曜 <input type="checkbox" name="days" value="6">
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される（バブリング） preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita
続編も書きました : 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 jQuery version1.5で導入されたjQuery.Deferredは、無くてもコードを書けるけど、使えば少しコードが綺麗かつ見通しが良くなる、という機能。 無くても書けるという機能がなかなか使われないというのは世の常なので、jQueryクックブック(O'REILLY)の中でも言及されていない、なんとも寂しい状況だ。 ちょっとここらで一肌脱いでやるか、という趣旨で書き始めたら無駄に長くなった。 とりあえず使ってみたい、という人は下の方の「jQuery.Deferred自体の使い方」までジャンプするとよい。 jQuery.Deferredとはどういう場面で使うものなのか コールバックを渡して非同期処理完了時にそれを呼び出してもらうような場面。 具体的には $.get('hoge',
javascriptオブジェクトをJSON形式に変換する | Try Lifelog
最近のブラウザでは、オブジェクトをJSON文字列に変換する JSON.stringify()、逆にJSON文字列をオブジェクトに変換する JSON.parse() が標準で用意されている。 JSON.stringify(value [, replacer] [, space]) space(省略可)を利用して結果文字列を整形することができる。 [以下引用] space に数を指定すると、戻り値のテキストの各レベルは、指定した数の空白でインデントされます。 space が 10 を超える場合、テキストは 10 個の空白でインデントされます。 space が空でない文字列 (‘\ t’ など) の場合、戻り値のテキストの各レベルは、その文字でインデントされます。space が 10 文字より長い文字列の場合は、最初の 10 文字が使用されます。 デフォルトで作成した例： [{"gpsDate"
JavaScript で重複のない乱数を生成する | Web Design Leaves
重複のない乱数を生成して配列に格納して返す方法。 パラメータに生成する乱数の数を受け取り、重複のない整数の乱数を発生させ、配列に入れて返す関数を作成。例えばパラメータに 10 を指定すると 0 から 9 の間の10個の重複のない整数をランダムに生成する。 パラメータ count の数だけ乱数を発生させる。 Math.random()で取得した値に「count」をかけて、Math.floor() で切り下げて整数にする。 すでに同じ数値が生成されているかは、すでに生成した乱数と発生した乱数を比較。 異なる値が発生されるまで繰り返し。 function generate_randomx(count) { //生成した乱数を格納する配列を初期化 var generated = new Array(); //生成した乱数を格納している配列の長さ（生成した乱数の数） var generatedCou
Androidでoverflowした要素をスクロール可能にするjQueryプラグイン - (・肉・)ブログ
Androidでoverflowするとスクロールできない問題を解決するためにつくりました。 ソースコード https://github.com/yosukedoke/JSOverflowScroll 使い方 #hoge { overflow:auto;//Androidは強制的にhidden的な挙動になる width:320px; height:400px; } $("#hoge"). overflowScroll(); iOSでもoverflowを設定すると慣性スクロールが効かなくなるので有用かもしれませんが、 よほどでなければUAを判定してAndroidだけ適応するほうがいいと思います。 仕組み touchStartで取得したポイントをと現在の指の位置の差分をscrollTopに設定しているだけです。 模式的に書くと次のようなかんじです。 タッチ開始 $target.on("touch
Pinterest風のレイアウトが出来るWookmark jQuery pluginを使ってみた - 初めてのシステムと日記
Pinterestのように要素をレンガ上に並べるレイアウトが近年流行っていますが、 そのレイアウトをシンプルなスクリプトで表示出来るのが「Wookmark」です。 The Wookmark jQuery plugin github Wookmark-jQuery ■デモ githubにあったサンプルをこちらに置きました。 ■使い方 外部ファイル jquery.jsとwookmark.jsを読み込みます。 <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML レンガ状にレイアウトするコンテンツをリスト要素で並列に並べます。 各要素のidは後述するwookmarkの実行で使用
jQuery でサイズや位置を取得する方法を図にしてみた - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary サイズの取得 煩雑になるので height の記述しかありませんが、width に置き換えれば幅もとれます。 普通のボックス要素 height() メソッドで取得できる値には、padding や border の分の高さを含みません。 CSS の height と同じなので、css('height')メソッドで取得してもよさそうですが、こちらの場合ブラウザの種類や CSS の定義の仕方で取得される値が異なる（クロスブラウザとしての機能が完全でない）ので、純粋に px 単位の高さを取得したい場合は height() メソッドを使用した方が無難です。 スクロールバー付きボックス要素 clientHeight には
【jQuery】jQueryでパラパラアニメを実現するプラグイン | バシャログ。
ノストラダムスのことも思い出してあげてください。minamiです。 jQueryを使ってちょっとしたアニメーションを作ることも多いかと思いますが、jQuery.animateのようにCSSのプロパティをいじってアニメーションするのに加えてちょっとだけgifアニメのようなことができたらな～ということでjQueryのプラグインを作ってみました。 まずはサンプルをごらんください。 サンプル アニメーションの出来はともかくとして、動いています。STOPボタンを押すと途中で止めることもできます。 しくみ 用意するもの アニメーション用png（スプライト） jQuery※サンプルではv1.8.2 jquery.backgroundpos.min.js jquery.limitAnime.js まずアニメーション用の画像ですが、下記のようにコマを均等な幅で作った一枚の画像を用意します。これを要素の背景画
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - posabsolute/jQuery-Validation-Engine: jQuery form validation plugin
http://formvalidator.net/