「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に。jQueryが新名称と新バージョンへ JavaScriptのライブラリとして人気のあるjQueryは現在、モダンブラウザのみサポートすることで、より小さく速く安定したjQuery 2.x系と、古いバージョンのWebブラウザを含む幅広いWebブラウザをサポートするjQuery 1.x系の2つが存在しています。 この2つのバージョン表記を、次のリリースから変更することが、jQueryのブログにポストされた記事「jQuery 3.0: The Next Generations」で発表されました。 バージョンは3.0に統一 現在のjQuery 1.9系とjQuery 2.0系は、前述のようにサポートするブラウザが異なるだけで、APIは基本的に互換性があります。 そこで、次のリリースからこの
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development. Usage SimpleModal provides 2 simple ways to invoke a modal dialog. As a chained jQuery funct
TouchSwipe a jQuery plugin for touch devices TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc. Features Detects swipes in 4 directions, "up", "down", "left" and "right" Detects pinches "in" and "out" Supports single finger or double finger touch events Supports click events both on the touchSwipe object and its child objects Definable threshold /
こんにちは、すどーです。 RequireJSでjQueryやjQueryプラグインの非同期ローディングを試してみました。 最近は大規模な構成になると、「ちぢめる、まとめる、かためる（minify, combine, compress）」のが主流のようです。 ですが小中規模な構成や、依存関係にあるフレームワークなども多くあるので、簡単な使い方だけでも覚えておくと便利かと思います。 RequireJS： http://requirejs.org/ RequireJS API： http://requirejs.org/docs/api.html RequireJSの主な特徴 モジュール化（AMD APIをサポート） 非同期ローディング OPTIMIZERによる最適化 1. モジュール化（AMD APIをサポート） AMD(Asynchronous Module Definition)はComm
August just got a little hotter, because jQuery 1.8 final code is here! You can pick up the code from jQuery’s CDN: http://code.jquery.com/jquery-1.8.0.min.js (compressed and minified, for production) http://code.jquery.com/jquery-1.8.0.js (uncompressed, for debugging) As usual, the Google and Microsoft CDNs will also have the file soon. Please don’t ask us about when they’ll be there, we don’t kn
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv
2012/06/30 XSSについて追記しました jQuery 1.8のbeta 1がリリースされました。 このバージョンではcustom buildが可能になる「modularity」という機能が追加されました。 この機能により、ajax, css, dimensions, effects, and offsetという機能を除外したjquery.jsをbuild可能になります。 最小セット(すべてを除いた)ではminifiedかつgzip化された状態で28KBまで小さくなるようです。 個人的にはnodeなどでの利用を考えて、domの部分(sizzle)を選択可能にして欲しいところではありますが、underscoreなどのことも考えると、その部分はlibraryレベルでの使い分けをするほうがよさそうです。 MODULARITY grunt.jsを利用し、custom biildを行うことが
コレは何か？コールバック集めてまとめて発火させたり削除したりダブって登録されたりしないようにしてくれるやつ。ちょっと便利なオブザーバーだけど、jQuery内部のコードでオブザーバー的な動きをしていたのがこれにより抽象化された風。詳しくは以下を見るべき。（この記事を書いてる時点ではjQuery1.7 beta2） 自分はこういう単純なオブザーバーをつくるとき、$({}) を作ってこいつにカスタムイベントをbindしてtriggerしてみたいなことをしてたので、同じようなことをしてた人はあーそういうやつねと思うかもしれないです。こいつが登場して便利になるのは、「より細かくコールバックを管理できるようになった」ってことかと思います。とりあえずこれいままで出来なかったよねっていうのでちょっと思いついたやつが以下。ちょっと試しただけなので雑です。
前回 は、「Creating Responsive Applications Using jQuery Deferred and Promises」 の記事と jQuery のリファレンスを翻訳し、Deferred の解説をお届けしました。が、今一歩、Deferred オブジェクトの うれしさ をお伝えできていなかったように思います。今回はその反省をふまえ、単なる翻訳ではなく、元記事の文脈に沿って、Deferred オブジェクトをどのように使うと／何がうれしくて／どうしあわせになるのか、私が学習して得た事をお伝えしたいと思います。 今回は、4本の jsfiddle を記事に埋め込んでいます。jsfiddle 上で自由に編集してテストしてもらえばうれしいのですが、4本すべて実行すると1.4MBものリソースを読み込む事になり、ブラウザに優しくありません。すぐに タブや をクリックせずに、 タブ
ポチってもうたー開発メモ。 UIだけJSでいじってる時はそこまで慎重になることでもないけども、頻繁にガシガシajaxする場合は、既に走っているajaxリクエストもうまいことハンドリングすべき。ポチってもうたーでは、ツイートをJSONで返すよう、サーバーサイドでサービスを用意しているわけだけれども、まぁ、普通に考えれば、こんな感じで、JSON返ってきたらUIを更新するってやるんじゃないだろーか。 $.ajax(url, query).then(function(){ // UI更新しちゃう }, function(){ alert('ゴメンなんか変'); }); しかし、これには問題があって、JSONが返ってくる前に、もうそのUIが用済みになってしまうような操作がされた場合、あーもうUI更新して欲しくないんだけど後から更新されちゃったよーっていうことになってしまう。 ポチってもうたーでは、ロ
はじめに 最近になって jQuery に Deferred Object と呼ばれるものが追加されたことを知りました。バージョン1.5から追加になったようです。 ここのところ色々な場面で非同期処理と付き合うことが多かったこともあって調べてみたのですが、中々嬉しい機能を持っているやつであることが判明したので、調べた内容についてまとめてみました。 非同期処理は結構書きにくい jQuery Deferred オブジェクトは非同期処理を書きやすくするために用意されたものです。でも何でそんなものが追加されたのでしょうか？ 非同期処理は複雑になってくると書きにくいものです。Ajaxリクエストを例に挙げてみます。 $.ajax({ url: "serviceA.json", success: function(data) { // リクエストが成功したときの処理 }, error: function(x
As I mentioned in my previous Ruby on Rails tutorial, Unobtrusive JavaScript (UJS) is one of the coolest new features in Rails 3. UJS allows Rails-generated code to be much cleaner, helps separate your JavaScript logic from your HTML layouts, and uncouples Rails from the Prototype JavaScript library. In this tutorial, we're going to look at these features and learn how to use them in a simple Rail
jQuery や jQuery UI は、とても便利です。各ブラウザのJavascript実装の差異を吸収してくれるだけでなく、ドラッグアンドドロップやタブビューなど様々なリッチなUIを利用することができます。あのIE6対応を考えなくても済むというだけでも、利用する価値があるというものです。 これらjQuery/jQuery UIは、コンシューマ向けのWebサイトのみならず、企業内の基幹業務用Webシステムであっても利用して当たり前、というほど普及していると言ってもよいでしょう。 ただし実際の業務システムで利用する際には、「ここをカスタマイズできれば！」という部分が出てくるものです。 jQuery/jQuery UIはオープンソースですから、ソースコードを直接修正してしまえば何でもカスタマイズできます。ただしそのような手段を取ると、今後リリースされるであろう新しいjQueryライブラリ
A jQuery plugin that attaches a popup keyboard to a text field for mouse-driven entry or adds an inline keypad in a division or span. The current version is 2.1.1 and is available under the MIT licence. For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations. Download now Defaults Invocation Inline Layouts Randomise Char
jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Visit the official Touch Punch website. Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touc
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ajax request returns status 0