jQueryプラグインをうまいことカプセル化する設計方法-jamadam weblog2
“There are only two hard things in Computer Science: cache invalidation and naming things” だそうです。そういう訳で、jQueryプラグインのメソッド名が他のプラグインと衝突するのを回避するための設計方法を列挙してみた。今のところ、一番下の方法が自分的にはしっくり来ている。 [2011.02.02追記] 2011年はsub()方式がおすすめです。 jquery.myplugの基本形。基本的に$.fn.extend()は使わない方針。 /** * jquery.myplug基本形 * * SYNOPSIS * * $('#target').myplug(); * $('#target').myplug({param1 : val1, param2 : val2}); */ ;(function($)
jQuery $.data()と.data()、データの保存と取得で気をつけること。 - かもメモ
jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita こちらの記事に data() // 普通の書き方 $(elem).data(key, value); // 10倍速い！ $.data(elem, key, value); とあったので、$.data(elem, key, value);を使おうとして少し気になる挙動になったのでメモです。 確認環境のjQueryのバージョンは1.10.2です。($.fn.jqueryでjQueryのバージョンが確認できます。) リファレンスのメモ .data() .data() | jQuery API Documentation .data() | jQuery 1.9 日本語リファレンス | js STUDIO データを格納する .data(key, value) 引数説明 key要素に紐付けるデータのキーとなる文字列を
jQuery - プラグインを作る - entacl Lab.
jQueryプラグイン スライダーやニュースティッカー等jQueryと同様になくてはならない存在のプラグイン。jQueryやプラグインの作者さんたちには頭が上がらないです。 今回は、そんなjQueryのプラグインを作ってみます。さて、 「わざわざプラグインにしなくてもいいんじゃない？」 っていう方もいるでしょうね。 コードを全て自分一人で管理していたり、ごく簡単なものならグローバルの名前空間でゴリゴリ書いてもいいし楽です。しかし、チームで開発するとき等にはプロパティやメソッドがバッティングしないような気遣いは必要になると思います。大きなコードであれば自分だけで作っててもバッティングしてしまうことすらあります。IDEのコードヒントも鬱陶しくなりますしね。 jQueryのプラグインにすれば$内空間だけで完結できるので、グローバルでのびのびできます。 「大抵のプラグインはあるし、車輪の再発明では
jQuery初心者のためのJavaScript設計トレーニング | 機能や役割に着目したコード整理
2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2021年まで10連続でMicrosoft MVP（Developer Technologies）を受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』（共著：エクスナレッジ、2011年3月12日）や『CSS3デザイン プロフェッショナルガイド』（共著：毎日コミュニケーションズ、2011年5月28日）』などがある。
jQueryプラグインの書き方を考えてみる(1)
更新履歴 2010-01-21 プラグイン定義方法については、約１年後に再考した下記エントリの方をお勧めします。 jQuery プラグインの定義パターンについて調べてみた - Cyokodog::Diary プラグイン API の定義パターンについて調べてみた - Cyokodog::Diary jQuery UI の プラグイン定義関数 $.widget を使ってみる - Cyokodog::Diary jQuery ライクなプラグイン API の定義方法を考えてみる - Cyokodog::Diary プラグインを書いてみる まずこのへんの記事を参考に、 jQueryは、プラグインで手軽に機能を実装できるのが特徴です。プラグイン・ディレクトリ（Plugins | jQuery Plugins）に沢山のプラグインが公開されていますが、作り方を調べてみたら、かなり簡単に自分でも作成できるよ
jQuery プラグインの書き方メモ - tacamy--blog
勉強のために超簡単な jQuery プラグインを書いてみたら、凄腕 JSer の方々に色々とご指導ご鞭撻いただいたので、忘れないようにメモる。 オレオレ jQuery プラグインテンプレート (function($) { $.fn.pluginName = function(options) { /** * Option */ options = $.extend({ opt1: 'val', opt2: 'val' }, options); /** * Core */ return this.each(function() { // Process }); /** * Method */ function _methodName() { }; }; }(jQuery)); /** * Execute */ $(function() { $(".foo").pluginName(); })
指定した背景画像をx秒毎に切り替えるjQueryプラグイン - Rewish
img要素ではなく背景画像（background-image）を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御（開始/停止/リセット） ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>
シンプルなイベントカレンダーを実装するjQueryプラグイン - Rewish
ある朝僕は、以下の用件を満たすカレンダープラグインを探していました。 シンプルなHTMLを吐いてデザインの変更が容易 コールバック関数である程度処理をイジれる 月移動のアニメーションが素人ウケしそう 小一時間色々なプラグインを見ましたが、中々しっくり来るモノが無く、「これは探すより作った方が早そうかなぁ」と思ったので作ってみました。 機能概要 記事の初めで大方出ていますが、主に以下の機能を備えています。 月移動時のスライドアニメーション 生成するHTMLを包含する要素のclass変更 イベント追加、月移動などに対応するコールバック関数 JSON形式でのイベント追加 イベント用JSONの先読み機能（月移動時の遅延対策） 表示中の月に属さない日付の表示、非表示 ダウンロード jQuery.calendar 動作デモ 導入方法 jQueryプラグインではお馴染み、 jQueryを読み込んでからプ
ときどきWEB | jQuery覚えたい人向け入門の問題集作ってやんよ!!!（オブジェクト編）
過去２回、これからjQueryを覚えたいという方に向けて問題集を作成しました。 LV１・・・特殊なロジックや記述は不要。基本的にはメソッド単品のみで処理可能レベル jQuery覚えたい人向け入門の問題集作ってやんよ!!!（メソッド編） LV２・・・完成イメージから処理に適したメソッドを選定でき、functionイベントを設計できるレベル jQuery覚えたい人向け入門の問題集作ってやんよ!!!（ベタ書きfunction編） 今回、最後の仕上げとしてひとつのfunction内ですべての処理を行うベタ書きから、 単純なfunctionを量産し、実行用のfunctionで全体の処理を行うオブジェクト指向の感覚をつかむところまでを目標にしたレベル３を作成しました。 jQuery問題集レベル３（オブジェクト関連） レベル３・・・・・構文や変数を組み合わせて簡易的なインスタンスを構築できる 問41.i
ときどきWEB | jQuery覚えたい人向け入門の問題集作ってやんよ!!!（ベタ書きfunction編）
前回、「jQueryに興味はあるけど難しそう・・・」とか「覚えたいけど何をどうすれば？」といったjQueryに関心のある方のお手伝いができれば!!! といった訳で問題集を作ってみました。 jQuery覚えたい人向け入門の問題集作ってやんよ!!!（メソッド編） 前回はjQueryライブラリで用意された関数を用いてページを読み込んだ時点で処理を行うものがメインでしたが、 ＵＩやヌルヌル動くアニメーションを手軽に作成できるのがjQueryの真骨頂だと思いますので、 せっかくテキストの書き換えや要素の追加・削除ができていればあとはもうあとはfunction宣言や記述ルールのコツさえつかめばおｋ。 jQuery問題集レベル２（ベタ書きfunction関連） レベル２・・・・・完成イメージから処理に適したメソッドを選定でき、functionイベントを設計できるレベル 問31.id名「q31」の要素にサ
ときどきWEB | jQuery覚えたい人向け入門の問題集作ってやんよ!!!（メソッド編）
jQueryを覚えたい!!という方で本屋さんで『すぐにわかるjQuery入門』なる参考書を買っては一週間後にはその話題はタブーになっちゃう方へちょっとした問題集を作ってみようと思います。 もう参考書を買ってわかったつもりとはさよならbyebye♪ これからjQueryやJavaScriptを覚えていきたい方など是非とも！！ 練習問題.『Hello,World』をアラート出力せよ 回答はコチラ alert("Hello,World"); jQuery問題集レベル１（メソッド関連） 特殊なロジックや記述は不要。基本的にはメソッド単品のみで処理可能レベル 問1.id名『q01』のテキストカラーを赤に変更せよ <!-- HTML --> <p id="q01">ときどきweb</p> 回答はコチラ $(function(){ $("#q01").css('color','red'); }); 問2
画像スライドショーでjQueryプラグインの基本を学ぶ
画像スライドショーでjQueryプラグインの基本を学ぶ：jQuery×HTML5×CSS3を真面目に勉強（2）（1/4 ページ） はじめに この連載で取り扱っているjQueryはJavaScriptのライブラリエンジンです。 世の中には実にさまざまなプログラミング言語があります。昨今主流となっているものの大半は、オブジェクト指向プログラミング言語と呼ばれているものです。 代表的な例を挙げると、Java、C#、Ruby、Python、Objective-Cといったところでしょう。これらの言語はクラスベースというカテゴリに属しています。クラスベースはアプリケーションにおけるさまざまな機能をクラスと呼ばれる単位でキッチリと分割することで、プログラム全体をキレイに整理整頓できるという特徴を持っています。大規模な開発になるほど、この特徴が威力を発揮するため、先に挙げたプログラミング言語が積極的に採用
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
