jQueryコードリーディング: bind(),live(),delegate() - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥
おはようございます。コードリーディング第四回です。 jQueryには、特定のエレメントにイベントを割り当てるメソッドとしてbind,live,delegateが存在します。今回は、これらのメソッドの実装を追ってみたいと思います。 対象 jQuery 1.5.0 これまでのエントリ 配列、each 初期化、extend セレクタを渡した場合の処理 はじめに bind,live,delegateそれぞれの公式リファレンスは以下です。 http://api.jquery.com/bind/ http://api.jquery.com/live/ http://api.jquery.com/delegate/ また、それぞれのメソッドの違いを解説したエントリは以下です The Difference Between jQuery's .bind(), .live(), and .delegate()
jQueryの.bind(), .live(), .delegate()の違い
The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ jQueryの.bind(), .live(), .delegate()違いや仕組みの理解、また.delegate()の方が.live()より優れている理由について書かれています。 内容を簡単に書き出すと以下のようなことについて書かれています。 $('a').bind('click', function() { alert("That tickles!") }); .bind()は$(‘a’)に対してイベントを設定してる。 $('a').live('clic
無職のプログラミング QUnitの勉強
QUnitを使ったイベント起動処理のテスト方法について書く。 jQueryを使うことを前提とする。 1. 今回のテスト対象 簡単な例として、「四角形をクリックすると動く」だけのコードをテスト対象とする。 /* boxをクリックすると動く */ var mvb = {}; // namespace /* 定数 */ mvb.con = { rootid: 'root', // rootdivのid boxid: 'box1', // boxのid boxtop: 20, // boxのcss top boxleft: 20, // boxのcss left初期値 boxmvlen: 200, // boxの移動距離(px) boxclsnm: 'boxdiv', // boxのcss classname bgcol: 'rgb(51,153,255)' // boxの背景色 }; /* bo
QUnitの基本的な使い方 - but hopeful
[追記] 2013/9/1 三年前の記事が未だに読まれているようなので、一応書いておきますが、あれから色々変わってもっと良いものも出ています。 QUnit でも別に問題はないですが、今から QUnit を使うよりは http://visionmedia.github.io/mocha/:title=mocha] とかの方が個人的にはお勧めです。とにかく、今は色々あるのでもっと別の選択肢調べて見ることを個人的にはおすすめします。別に QUnit は使わないほうが良いとは言いません。 JavaScriptのテスティングフレームワークはいろいろありますが、自分は今主にQUnitを使っているので、少し使い方をまとめて見たいと思います。 [追記]今回作成したソースを上げました。ninja.js QUnit とは QUnitはもともと、jQueryをテストするために開発されたJavaScript Un
jqueryを使って文字数を調べる
問い合わせフォームなどで、文字数制限があるときに、 今何文字書いているかわかるようにできれば、ユーザーによりやさしいホームページになります。 そこで、今回は、jqueryを使って文字数を表示させてみます。 html <div id="c_waku"><p id="num">0</p> <textarea id="message"></textarea> </div> $(function(){ $("#message").bind("change keyup",function(){ var count = $(this).val().length; $("#num").text(count); }); }); 2個以上のイベント時に命令を実行させたいときに使えるメソッド。 bind("イベント",イベント時に実行する命令) $("#message").bind("change keyup
jQueryMobileでリアルタイムなフォームバリデーションを使う - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryMobileでのフォームバリデー ションに関して調べ物をしたのでメモ。 実装した事が無かったのですが、も しかしたら近いうちに使うかもなので 動作テストしてみました。バリデーシ ョンには他プラグインを使います。 結論から言えば非モバイルサイトのバリデーションの方法となんら変わりませんでした。一安心、みたいな記事なのでなんだかすみません。 コード <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
フォームのバリデーション用jQueryプラグインいろいろ+α - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js V
リアルタイムに入力チェック - jQuery Inline Form Validation Engine - | バシャログ。
こんにちは、nakamura です。すっかり秋めいてきましたね。みなさんの今年の夏の思い出は何だったでしょうか。僕の思い出は叔父がやっている家庭菜園で膨大な量のきゅうりが取れてしまい、家のおかずが2週間ほどきゅうりづくしだった事でしょうか。自分、鈴虫かと思いました。 とあるプロジェクトで、入力フォームのバリデーションを javascript で実装したいという要件がありました。なおかつ最近よくみる submit ボタンを押さずともリアルタイムでエラーメッセージを表示してくれるおしゃれなアレです。そんな要件に添う為今回使ったのが Jquery Inline Form Validation Engine です。元々 sakai が見つけてきたものなのですが、仕組みも簡単で分かりやすく中々動作も軽快だったのでここでご紹介したいと思います。 ファイル構成 まずはスクリプトをダウンロードしましょう。
リアルタイムフォームバリデーション jQuery.validation.js :: 5509
お知らせ（10.08.06）： jQuery.validation.jsはアップデート・修正対応などを終了しました。 仕様などを変更したバリデーションプラグインを公開したので、そちらの方を参考にしてください。（validation.jsにはあるのにexValidationでは実装していない機能もありますが、基本的に実装は行いません） どんなフォームにも使えるjQueryのフォームバリデーションプラグイン: exValidation jQuery.validation.jsはフォーム入力のイライラを軽減して、Webブラウジングとかショッピングをもっと快適にするためのjQueryプラグインです。(もちろんサーバサイドでのチェックは必須ですが…) jQuery.validation.jsのサンプルを見てみる トピックス 特徴 ダウンロード 導入方法 1.JSファイルを読み込む 2.input要素
リアルタイムフォームバリデーション validation.jsサンプル
リアルタイムフォームバリデーション validation.jsサンプル « 解説ページ « 5509
jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別してURLをリダイレクトする方法｜BLACKFLAG
最近のWebサイト制作では、通常のPCサイトを制作するだけでなく iPhoneやAndroidのスマートフォンや、iPadなどタブレット向けにそれぞれサイトを用意し、 デバイス毎にアクセスさせるURLを分けることも増えてきました。 その様な場合のデバイス制御に使える（であろう） iPhone、iPad、AndroidでPC向けサイトへアクセスした際など、 jQuery（JavaScript）を使って簡単に別のURLへリダイレクトさせる方法を紹介してみます。 jQuery(JavaScript)でiPhone,iPad,Android(アンドロイド)を判別してリダイレクト 例として、サイト構成が以下の様なURLとします。 ——————————————————- 【PC向けサイト】 ｈｔｔｐ：//black-flag.net/sample/pc/ 【スマートフォン向けサイト】 ｈｔｔｐ：//b
【jQuery】iPhoneに最適！フリックでスライドする写真ギャラリーを簡単に作成するプラグイン ｜ KLUTCHE
iPhone向けのサイトで画像ギャラリーを設置したいならこのプラグインを使うととてもお手軽です！ jCarousel.min.js こちらで紹介されているjavascriptを使用します。 くらげだらけ HTML jQueryのプラグインなので、headで2つのjavascriptを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jCarousel.min.js"></script> あとは、スライドさせたい画像をリスト要素にして、jCarouselというクラス名を付けるだけです！ <ul class="jCarousel"> <l
Fotorama. Nice-looking javascript gallery
Account Suspended This Account Has Been Suspended
JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
Thickboxの使い方 – 画像やHTMLのポップアップをお手軽に！｜クロノドライブ
ThickBoxとはjQueryを使用したAjaxライブラリの一つで、主に画像をページ上に大きく表示させるときに使われます。また、画像だけではなくHTMLファイルも表示することが出来るため、これ一つで画像とHTMLをポップアップ表示（正確には同じページ上にオーバーレイ表示される）させることができます。 ◆サンプル このライブラリの便利なところは、小難しい設定をしなくても使えることや、ポップアップした画像を自動的にブラウザに収まるサイズに縮小してくれるところです。 ※HTMLを表示する場合にはサイズを指定する必要があります。 使ってみたい！と思った方のために使い方の手順を下記にまとめました。 必要なデータを揃える まずは、配布元であるThickBox3.1に行き、Downloadから下記ファイルをダウンロードしましょう。 ファイル名 thickbox.js thickbox.css load
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1） 基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは？ 今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ＆ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど） 今回は、jQuery UIのドラッグ＆ドロップ機能
GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
モダンJavaScriptを無理なく学べる5冊+3
この5冊で一通り学べます。 最近のJavaScriptが書きたいなあ、と思ったときに、キーとなるのは・・・。jQuery、クロージャ、無名関数、HTML5、スマートフォン対応！？ それらを「わかりやすく」学べる、という視点で選んだ5冊。そもそもJavaScriptって何？という方は、まず以下の記事から。 JavaScript講座 [Smart] ＞＞書き方、構文、演算子・・・。基礎を学べます。 「目指せ！ウェブマスター」JavaScript講座 ＞＞サンプルたくさん！ ハタさんのブログ(復刻版) : javascriptを初めて学ぶ人についてのおさらい。その１ ＞＞今風の書き方の基礎
jQueryコードリーディング:セレクタを渡した場合の挙動について - $('a') は何を返すか - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥
おはようございます。コードリーディング第三回です。 これからエレメント操作系のコードを読んでいきたいのですが、そのための準備として、セレクタを引数にしてjQueryオブジェクトを構築したとき何が起こるか見ていきたいと思います。 セレクタの解釈にはSizzleというエンジンが使用されているようですが、今回はあまり深くは追いません。「セレクタを渡した場合どのようなオブジェクトが返ってくるのか」を理解することを目的とします。 対象 jQuery 1.5.0 これまでのエントリ 配列、each 初期化、extend 今回読むコード $('a') 記述ルール 今回から、jQuery本体のコメントと区別するため、筆者が追加したコメントは//# の形式で記述します。 //# 筆者が追加したコメント // 元からついていたコメント function foo() { } クエリセレクタをざっと読んでみる $
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
