jQueryにquery parserを追加する拡張 - とあるプログラマの日記 @s025236
query_string(location.search)をパースしてオブジェクトを返す拡張 作り方 jquery.parse.jsとか適当に名前を付けて保存します。 jquery pluginはjQuery.fn.extend(object)を利用するのが作法ですがjQuery.parse()みたいな呼び出し出来なくなるので強引に拡張しています。 ※jquery pluginとしては非常にお行儀の悪い書き方ですので真似しないでください。 コメントによるとこの拡張方法で問題無いみたいです if(typeof jQuery === 'function' && typeof jQuery.parse === 'undefined' ) jQuery.parse = function($_){ var i,$R = {}; $_ = arguments.length === 0 ? locati
あなたはJavaScriptを知らない - 杉風呂2.0 - A Lifelog -
この記事はMichael Woloszynowicz氏のブログWeb 2.0 Development And Business Lessonsの記事"You Don't Know JavaScript"を翻訳したものです。本人の許可を得て公開します。原文は2011年4月16日にポストされました。私自身のJavaScriptの学習が浅く、誤訳の指摘等はコメントを下さると助かります。 原文は以下のURLから。 http://www.w2lessons.com/2011/04/you-dont-know-javascript.html 去年ぐらいから、いらいらする現象が目に留まるようになった。プログラマが、少ししか触っていない技術でありながら、それで履歴書を脚色するパターンに何度も出会った。多くの言語で起こることではあるが、最も冒涜を受けている言語がJavaScriptだ。 あなたは自分が知らな
Sencha Touch での Sass 利用事例
開発部の川野です。今回も Sencha Touch をテーマに、記事を書かせて頂きます。 Sencha Touch と言えば、「綺麗な UI」が特徴ですよね （JavaScript だけで画面を構築する独特のスタイルも特徴ですが）。 本記事では、その綺麗な UI を支えている「Sass」「Compass」というツールについて、また、Sencha Touch で、それらをどのように利用しているかについて、少し覗いてみたいと思います。 Sass makes CSS fun again. Sass は、CSS の冗長性や、保守性・生産性の悪さを解決するために生まれた CSS の拡張言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。 Sass の具体的な説明は本記事では割愛させて頂きますが、一言で言うと、CSS の「プログラミング」を可能にしてくれます。押さえておきたい特
Post by @hamalog
コレは何か？コールバック集めてまとめて発火させたり削除したりダブって登録されたりしないようにしてくれるやつ。ちょっと便利なオブザーバーだけど、jQuery内部のコードでオブザーバー的な動きをしていたのがこれにより抽象化された風。詳しくは以下を見るべき。（この記事を書いてる時点ではjQuery1.7 beta2） 自分はこういう単純なオブザーバーをつくるとき、$({}) を作ってこいつにカスタムイベントをbindしてtriggerしてみたいなことをしてたので、同じようなことをしてた人はあーそういうやつねと思うかもしれないです。こいつが登場して便利になるのは、「より細かくコールバックを管理できるようになった」ってことかと思います。とりあえずこれいままで出来なかったよねっていうのでちょっと思いついたやつが以下。ちょっと試しただけなので雑です。
jQuery 1.7 の $.Callbacks の解説 - わからん
jQuery 1.7 で導入される $.Callbacks についての "Demystifying jQuery 1.7′s $.Callbacks" と題された解説記事をみつけたので紹介します。内容を少しはしょったり、補ったりした翻訳です。元記事の著者 Addy Osmani さんは jQuery チームのメンバーとのこと。本文に出てくる jQuery.Deferrd, Pub/Sub の話題を理解するのに、次の資料に目を通しておくとよいかもしれません。 jQueryのDeferredオブジェクトについて調べてみた - AOEの日記 Script Junkie | Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability Pub/Subメッセージングモデル 元記事 AddyOsmani.c
jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
jQuery 1.7の on() off()について調べてみた | バシャログ。
新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで
HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」:phpspot開発日誌
Slider.js: Slideshow with jQuery, CSS Transitions and Canvas - example with Flickr HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 スライドショーライブラリは色々ありますが、Slider.jsはCSS3やCanvasをフルに活用したライブラリとなります CSS3を使った画像切替の効果が豊富に用意されているのが特徴です。 ページ番号、送る、戻るといったナビゲーションの表示方法も色々と変えられるようです APIのところを見ればわかりますが使い方が超簡単でコードもシンプルにかけます。 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 CSS3を使った超カッコい
長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」:phpspot開発日誌
NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン
jquery-mockjax 使えよ色々と捗るぞ - present
jQuery や Backbone.js で UI を開発していて面倒なのが、サーバー側の API を呼び出す部分の実装です。呼び出したい API が既に実装されていないと、細かいところまで作り込めません。 あと、上手く動かなかったときも面倒です。原因がクライアント側ならすぐ直せますが、サーバー側だった場合、サーバー側のコードを修正して、テストまでしないといけません。効率悪いですよね。 できれば、クライアント側の開発はクライアント側だけで完結したい。さらに欲を言えば、最終的にサーバー側の API を呼び出すように修正するとき、出来るだけ少ない修正で済むようにしたい。 API 呼び出しを抽象化してダミーの処理と差し替えたり、jQuery.ajax を上書きしたり、色々工夫して最後に行き着いたのが『jquery-mockjax』。 appendto/jquery-mockjax · GitHu
jQuery Mobileでのアプリケーション開発にBackbone.jsを導入しよう | Lab by engineering@dwango.jp
こんにちは、2011年度新卒エンジニアの夏目です！突然ですがみなさんJavaScript書いてますか？ 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
Post by @0-9
jQueryにはイベント制御のAPIとして、clickやmouseoverの元になるbindの他に、同じような呼び出し方のliveやdelegateが提供されている。 bindはDOM APIで提供されているaddEventListenerのwrapperだが、liveは以下のような実装になっている。 1. 第一引数のイベント名でdocument objectにlive用のイベントハンドラーをbindする 2. 1で設定したイベントハンドラー内でdocument object内に存在する要素上で発生したイベントを全てキャッチする ・イベントの発生元要素がbind時に設定されたセレクタに一致する場合、第二引数に指定されたユーザーのイベントハンドラーを呼び出す これはもともと「多量の要素に対してbindするとUIをロックしてしまう」という問題の対策として知られていた手法だが、liveはそれをj
Youtube動画を自由自在に操れるjQueryプラグイン「Red Ytube」:phpspot開発日誌
Red Plugin Youtube動画を自由自在に操れるjQueryプラグイン「Red Ytube」 YoutubeのAPIを使って独自の再生ボタンを作ったり、再生時間なんかを表示させたり、埋め込み動画をその場でリサイズしたりすることが可能です 独自のテキストベースの再生・停止ボタン 現在の動画時間のリアルタイム表示 右下のつまみをドラッグ＆ドロップで動画をリサイズ（これは便利） APIを調べるのが億劫でも比較的簡単に実装できそうです 関連エントリ APIを使わずにYoutube動画のサムネイルを得る方法 Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com
もちろん、そうでない方にも親しんで頂きたいと思います。 最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました この記事中にjQuery 1.6/1.6.1での .attr()仕様変更がらみの話で、うちの「jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。」の記事へリンクされていました。 ただこの記事はちょっと中身が細かくて、ぱぱっと理解するのは難しいんじゃないかなあと思って、この記事を書いています。どこまでご理解頂けるかはわかりませんが、あっちの記事よりは読みやすいはず。 今さら感もないではないですが……。(´ω｀) jQuery 1.6/1.6.1で何があったの？ .attr()にまとめていた処理を .attr()と .prop()に分割した そしたら今まで動いていたも
リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」:phpspot開発日誌
jQuery ComboGrid Plugin リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」。 input type="text" に文字を入れて、候補が表示されたりするオートコンプリートがありますが、そのオートコンプリートをグリッドにしてリッチにし、よりヒントを多くすることでユーザビリティを上げるような使い方が可能。 表データがあって、その中から選んでもらいたいようなケースに使えそうですね。 中身のデータは当然ですがAjaxで読み込んで表示しています。 基本的には $(element).combogrid(options); というので利用が可能です。 サンプルコードは以下。 関連エントリ クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」
jQueryのプラグイン33+1選 -2011年9月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Loupe 画像の一部を拡大します、多彩なオプションが便利。 Slicebox 画像をダイナミックに3Dスライスするギャラリー。 E
超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」:phpspot開発日誌
jQuery Marquee Animation Plugin Preview - CodeCanyon 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」。 ホームページをつくりはじめた時には誰もが使ったマーキー。覚えていくにつれ、ほとんど使われないかわいそうなマーキー。 そんなマーキーもjQueryで超かっこ良く、まるで映画のプロモーション動画に使われるようなエフェクトに生まれ変わったようです。 生まれ変わったマーキーを見てみよう 実装は超簡単！ <script language="javascript"> $(document).ready(function() { $('.marquee').fMarquee({width: 960, height: 100}); // サイズをオプション指定 }); </script> <!-- 内容はdivに入
EXCEL（CSV）ファイルからHTMLのTABLEを自動生成するJS｜BLACKFLAG
タイトルの通り、CSVファイルからHTMLのTABLEを自動生成するJS、 「jquery.csv2table.js」が何かに使えそうだったのでメモ書きしておきます。 「jquery.csv2table.js」はjQueryのプラグインで、 まずここからJSファイルをダウンロードして、jQueryと併せてページ内に張る。 ソース上には ■■■■■■■■■■■■■■■■■■■■■ <script type=”text/javascript”> $(function(){ $(‘#view1’).csv2table(‘sample.csv’); }); </script> ■■■■■■■■■■■■■■■■■■■■■ といった記述でCSVファイルを読み込んでおいて、 <body>内に<div id=”view1″></div>といった空タグを記載するだけ。 ID名が重ならないようにすれば、 １ペ
tDiaryのJavaScript比重を高める計画(というほどのものではないけど) - ただのにっき(2011-06-07)
■ tDiaryのJavaScript比重を高める計画(というほどのものではないけど) categoryプラグインが内蔵していた編集サポート機能のJavaScriptをjQueryで再実装して、.jsファイルに追い出した。最近プラグインから.jsファイルのロードをコントロールできるようにしたので、やりたかったことにようやく着手できた感じ。 tDiaryはまだまだCGIとして動かせるようにしておく以上、サーバサイドでの処理は少なければ少ないほど良い(といっても限度はあるが)。検索エンジンbot向けに必要なテキスト以外はできるだけJavaScriptに追い出すべきだろう。ということで、将来的にjsに追い出したい機能: 本日のリンク元表示: 記録まではサーバサイドでいいけど、これを見たい人は限られているので、ボタンをクリックされた時だけ非同期に読み込むようにしたい。 highlightプラグイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること