jQueryを複数人で使っていると、誰が仕込んだClickイベントか分からなくなる。 どうやって追いかけた良いのだろうか。良い方法があれば知りたい。 jQueryの._data の内部データから拾った jQueryはclick などのイベントリスナーを内部管理していてDOMのaddEventListener側には見せてない。なので、Chromeのデベロッパーツールなどでイベントを確認することが出来なくて困った。 jQuery._data($("#submit").get(0)).events jQuery._data($("a:contains('編集')").get(0),"events") このようにして、貼り付いているイベントハンドラを一覧することが出来た プラグインにしておいた (function($) { $.fn.events = function(){ return $._d
In this article, we’ll look at JavaScript equivalents for the more advanced methods jQuery provides… Key Takeaways Native JavaScript can be used as an efficient alternative to jQuery for launching scripts on page load, handling events, and performing Ajax operations. This can lead to more optimized and tailored code for your specific project. jQuery provides a more user-friendly syntax, especially
The idea of ‘sticky position’ is to make elements on a website stick and remain visible. Those elements will initially be in their position, and then in the event of scrolling down the webpage, their position will be following the scroll. In Facebook, this technique has been applied to their sidebar; when we scroll down the page, you will find that it follows the scroll and thus remains visible. O
jQueryでフォームデータを送信する方法のまとめです。 １．submitイベントで送信する form要素のsubmitイベントで送信する場合のサンプルは次のとおりです。 <script src="http://code.jquery.com/jquery.js"></script> <script> $(function(){ $('form').submit(function(event){ event.preventDefault(); var f = $(this); $.ajax({ url: f.prop('action'), type: f.prop('type'), data: f.serialize(), timeout: 10000, dataType: 'text' }) .done(function( data ) { // 通信が成功したときの処理 }) .fai
やりたいこと jQuery の animate メソッドを使って見た目を作っている時、アニメーションの完了後にクラスを付与したいとか、 CSS を変更したいというようなことはよくある。これをエレガントな感じに書きたい。 何も考えずに jQuery っぽく書いてみる $('.target') .animate({ left: '100px', top: '100px' }, 500, 'swing') .css('background-color', 'red'); これだとうまくいかない。アニメーションが終了した時に背景色が赤になってほしいが、アニメーションが始まったと同時に赤くなってしまう。 animate のコールバック関数を指定する 解決策のひとつとして、 animate メソッドの最後の引数にコールバック関数を指定する方法がある。指定したコールバック関数は、アニメーションが完了した
Wrapping $.ajax In A Thin “Command” Framework For Backbone Apps 4 May, 2012. It was a Friday. A large number of my recent client applications, built on Backbone, have been using straight jQuery AJAX calls. Sometimes its in combination with Backbone’s persistence method, but other times I end up using AJAX calls in place of Backbone calls. Non-CRUD-y Apps Now I don’t think that there’s anything wro
When using Jquery for ajax call, sometimes I got confused of which function to use. Here’s I created a simplified wrapper that does everything. Ok, here’s that: function remote_call(url, donefunction, errorfunction, alwaysfunction){ /* this part is to make sure that the ajax call will only run once before it finishes */ var cursor = $(this); if (cursor.data('url') == url && cursor.data('dont') ==
前記： この記事では多数のAJAX通信が発生した際、 「非同期」の処理順番を保障する方法を検討します。 すべては私個人の経験なので、もしこれよりもっどいい方法があれば ぜひ教えてください。 実際この問題にぶつかった際の考えの流れで書いています。 使えない案や、懸念がある案も全部述べたので、文章が長くなってしまいました。 開発する当時はまだインターネットにつながらないので、 何の情報も取得できず、考えたんです。 後でネットで調べたらAjax Queueのプラグインが 同じことをしてくれます。 このプラグインを使った後に所感を書く予定です。 本題 AJAXはご存知だと思います。非同期通信でページをリフレッシュせずに動的に通信ができる、 リッチなウェブアプリケーションを構築する上で不欠けんな存在であります。 一方、この「非同期」というのは特徴であり、たまには厄介なことになります。 例えばajax
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のプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
Hello. I'm Yuki Iwanaga, a software engineer pursuing beauty in both design and engineering
複数の要素をタイル状に配置するために、ブロック要素の高さを揃える軽量なjQueryプラグインjquery.tile.jsを公開します。このプラグインを使用すると、ブロック要素を簡単にタイル状に並べることができます。 スマートフォン向けのWebサイトでは、タイル状に並べた要素をタッチしてもらう、というユーザインターフェースが主流になっています。 当サイトのトップページは、このプラグインを使用して、記事の一覧をタイル状に並べています。 本プラグインはブログ形式のWebサイトでサイドバーと本体の高さを揃えたい場合などにも使用することができます。 javascriptを使用しない場合は、htmlのテーブル要素を使う、CSSのdisplay: tableを使用する、float: leftで横に並べてmargin-bottomを大きくするなどの方法が考えられますが、いずれもデザイン面で融通が効きにくい
Let’s assume that you have a webform and you would like to submit it with AJAX. jQuery makes this easy so there’s no problem – you can use jQuery serialize to encode the form data, and all is well. But then you want to include a file input field with the form submission and your remote AJAX handler doesn’t receive it at all. Well, serialize() says that it doesn’t serialize form data so now what? T
touch系のイベントを使って、「touchしたらボタンを光らせて、離したら消える」 といった実装を行いたい場合。 cssの:hover疑似クラスは一応使えますが手を離しても色が戻らなかったので、こんな感じでtouch系のイベントで実装してみました。 $(function(){ var start = "touchstart"; var end = "touchend"; $(".touchHover").bind(start,function(){ $(this).addClass("touchstart"); }); $(".touchHover").bind(end,function(){ $(this).removeClass("touchstart"); }); }); <a href="#" class="touchHover">ボタン</a> a{background:#cc
どうもこんばんは！ 今日は【input type=”file” を画像ボタンに変更する方法】を書きたいと思います。fileアップロードを画像ボタンに差し替え、ユーザビリティを向上させるのが目的です。たまに使いたくなるのでここにメモしておきますね。 通常のファイルアップロードタグ <input type="file"> 通常の状態です。CSSで背景やボーダーを削除するデザイン変更には限界があります。 ですのでjQueryで補完します。 ボタンの準備 ファイルアップロードを画像ボタンに変更 ・HTML <input type="file" id="file_01" class="file"> <label class="file_mask"> <span><!– 画像用spanタグ –></span> <input type="text" id="mask_file_01"> </label>
Twitterのツイートをブログに表示させる方法というのはいろいろありますが、今回は同じようにFacebookに投稿したウォールの内容をブログに表示させられんかなーと思って調べてみたら、「fb.wall」というjQueryプラグインがあったので、試しに実装してみました。 このjQueryプラグインを導入することで、ブログの任意のところにFacebookのウォールをデザインそのままに表示させることが出来ます。 実際の表示イメージ 導入方法はいたって簡単 導入は至って簡単です。 まずは、ここからファイルをダウンロードし、解凍したフォルダをサーバに設置しましょう。 このとき、フォルダ名とjsファイル、CSSファイルの名称を変更しておくといいかも。かなり長ったらしいので。 変更したところで支障はありませんしね。 次に、ブログのテンプレートを変更します。headタグ内に入れ込んで下さい。 <head
JavaScript用テンプレートエンジン「JST」とは？ 皆さんがこれまで制作に携わったAjaxアプリケーションは、次のどのタイプだったでしょうか。 1.HTMLファイルの中にJavaScriptの記述が混ざっている 2.JavaScriptファイルの中にHTMLの記述が混ざっている 3.JavaScriptファイルとHTMLファイルが完全に分離されている 最近では、jQueryなどを使うことで、HTMLファイルからJavaScriptを追い出して、JavaScriptファイルの中にHTMLの記述が混ざっている状態で、制作をしている人が多いのではないでしょうか。 今回紹介する、JavaScript用テンプレートエンジン「JavaScript Templates（JST）」は、TrimPathというJavaScript用フレームワークの中で使用されているテンプレートエンジンです。JSTを使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
