jQueryプラグインをうまいことカプセル化する設計方法- jamadam weblog2
“There are only two hard things in Computer Science: cache invalidation and naming things” だそうです。そういう訳で、jQueryプラグインのメソッド名が他のプラグインと衝突するのを回避するための設計方法を列挙してみた。今のところ、一番下の方法が自分的にはしっくり来ている。 jquery.myplugの基本形。基本的に$.fn.extend()は使わない方針。 /** * jquery.myplug基本形 * * SYNOPSIS * * $('#target').myplug(); * $('#target').myplug({param1 : val1, param2 : val2}); */ ;(function($) { var default_params = { param1 : 'a',
jQuery plugin refactoring
step1: 動けばいいレベル 適当にざっくり書いて終了 イベントハンドラのなかでテキトーに全て終わらせる メソッドチェイン長いのがかっこいいと思ってる年頃 <div class="item"> <div class="label">A</div> <h2 class="title">itemA</h2> <p class="main">text text text text</p> <p class="showMore">more</p> <p class="more">more more more more</p> <p class="hideMore">hide</p> </div> <div class="item"> <div class="label">B</div> <h2 class="title">itemB</h2> <p class="main">text text
jQueryのプラグイン作成前のメモ|WEBプログラム覚書
HOME>WEBプログラム覚書>jQueryのプラグイン作成前のメモ jQueryのプラグイン作成前のメモ jQueryのプラグイン作成がなんとなくわかった気になってたけど 全然わかってなかった。ってかjQuery自体わかってなかった。 更に言うとjavascriptが今だにわかってないんじゃねって感じで凹むなー。 ｢$｣と｢jQuery｣ とりあえず｢$｣は｢jQuery｣のエイリアスらしい。 $使ったりjQuery使ってたりでなんなんだろうって思ってたけど そういうことだったのか。 $.extend()と$.fn.extend() jQuery.extend(object) - jQuery 1.3.2 日本語リファレンスに$.extend()はjQuery名前空間に新たなメソッドを追加。 $.fn.extend()はjQueryオブジェクトのプロトタイプにメソッド追加。 と書いてある
jQuery: hideはcssでposition:absoluteにしてるとieできかない « きんくまデザイン
こんばんは。きんくまです。 今AS2で書いたものを、ほぼそのままJSに移植する作業をしています。ていうか何で最初からJSで作るようにしなかったんだろ？この二重開発、、、。コンサルコンサルコンサル。最後にちょろっと顔だしてきて、しれっとFlashはちょっとっていうのは反則かなと思う。 さてさて、そんなこんなでJSのノウハウを貯めてます。 JSもオブジェクト指向で開発ができるので、ASのファイル構成を保ったままJSにもってくることができてます。 そのあたりのことは今度落ち着いたら書きます。 さて、今回はタイトルのままです。 JQueryで$(‘なんとか’).hide(); とやったときにそのDOMのCSSにposition:absoluteが入っているとFirefoxではうまく隠れるんですが、IEだとうまく隠れませんでした。 それにしてもやってて思うのはIE6の実行速度が遅いことと、IE6のo
[jQuery]こんな機能があったんだ。jQuery stop()|WEBプログラム覚書
HOME>WEBプログラム覚書>[jQuery]こんな機能があったんだ。jQuery stop() [jQuery]こんな機能があったんだ。jQuery stop() 「Buttons like Windows 7 with JS & CSS」を見てて って記述あったので調べてみたらstop()って色々使えるんですね。 全然しらなかったです。 stop([clearQueue], [gotoEnd]) 引数は2つ。何も指定しないとfalse [clearQueue]がtrueの場合、持っているキューが全て削除される。[gotoEnd]はtrueにすると現在のアニメーションの最後のコマへジャンプする。
JavaScriptのライブラリをGithubから呼び出して高速化 | Web活メモ帳
「Cached Commons」はGithubにあるJavaScriptライブラリを集めているサイトです。 みんなでGithubにあるライブラリを呼び出して、ユーザーにキャッシュしてもらおうというプロジェクトです。 サイトの高速化につなげる事ができますね。 Google Ajax Librariesと一緒？ 基本的な考え方はGoogle Ajax Librariesと一緒ですね。 サーバーにアップしなくても良いので、サーバー側の負荷減少にもなるかと思います。 jQueryのプラグインなど豊富にそろっているので、GoogleのAPIより一枚上手かもしれません。 Githubで公開しているライブラリを申請すれば加えてくれるのもポイントです！ 他のライブラリもGithubで開発・公開すれば良いのにと思わずには居られませんねw
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
![14のjQueryベストプラクティス[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
細かすぎて伝わらないjQueryの機能5選 - KAYAC Engineers' Blog
実は技術部ではなく、演出部所属のagoです。 先日jQuery 1.3.2のソースを読む機会があり、そのときいくつか気づいたことがあったのでまとめてみました。 1 .addClass, removeClassはスペース区切りで複数のclassを渡せる .addClass, removeClassにはスペース区切りで複数のclass nameが渡せます。 //classの順番は保持します。 //<div class="hoge gege">があった場合、<div class="hoge gege huga">になります。 $('div').addClass('hoge huga'); //<div class="hoge gege huga">があった場合、<div class="gege">になります。 $('div').removeClass('hoge huga'); ただし、hasC
IE6対応！jQueryで透過PNGのロールオーバーを作る (2/3)
IE6で透過PNGを表示する さて、ここからが今回の本題です。サンプル01をIE6でも正しく表示できるようにします。IE6ではCSSの独自拡張（filterプロパティ）を使って透過PNG画像を背景として表示できます（関連記事）。jQueryのスクリプトを書く前に、IE6で単純に透過PNGを表示するHTMLとCSSを作成します。 ナビゲーションメニューのHTMLはサンプル01と同様にul/li要素で記述します。IE6では透過PNGをimg要素に直接指定しても表示できませんので、代わりにダミー画像（1px×1pxの透過GIF画像＝「transparent.gif」）を用意してsrc属性に指定します。img要素にはCSSを設定するため、「jquery」「javascript」などのメニューの項目名に対応したclass属性を付けておきます。 ▼サンプル02（HTML部分） <ul> <li><a
FlashとjQuery どちらで実装するか決める際の重要なファクター
ウェブサイトを構築する際、FlashとjQueryは非常に魅力的なツールです。コンテンツを実装する際にどちらを使用すべきか迷うこともあると思います。 両方の特徴を把握し、実装する際に適切に選択するための重要なファクターを紹介します。 A Closer Look at Choosing Between Flash and jQuery 下記は各ポイントを意訳したものです。 はじめに 1. FlashとjQuery どちらにするか重要なファクター 2. jQueryとFlashサイトのショーケース まとめ はじめに HTML5の登場により、それがFlashを破るか否かに関わらずこれらはウェブコミュニティで議論の的でした。この議論が活発に行われる中、Flash vs. JavaScriptの話題は少し失われていました。 ここではJavaScriptの中から特に人気の高い「jQuery」をとりあげ
[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する
twitter facebook hatena google pocket まずはフォトグラファー 木村 隆宏さんのサイトを御覧ください。 こちらのサイトでは、アクセス時にポートフォリオを順番にフェードさせることで非常に印象的となっています。 今回はこちらで使用しているJavaScriptをのぞきながら、どう実現しているのかを見ていきたいと思います。 sponsors 使用方法 フォトグラファー 木村 隆宏ではJavaScriptライブラリjQueryを利用し、fade.jsでフェードを制御しています。 該当部分を抜粋し、汎用的に書き換えたのが以下となります。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $('
![[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a2b72034be2bced8bec9088f939fbccfd2280a9/height=288;version=1;width=512/http%3A%2F%2Fwww.skuare.net%2Fassets_c%2F2010%2F07%2Fjintervalfade-thumb-300x200-477.jpg)
8行でjQueryのデバッグが楽になるjQuery.pの紹介 - KAYAC Engineers' Blog
週末はオレ標準JavaScript勉強会のUstreamを眺めてました。ago（@kyo_ago）です。 以前jQuery使いが陥りやすい罠の中で「4 何でも一行で書こうとする」という点を上げたのですが、以下のようなmethodを定義することでmethod chainのデバッグが楽になるので紹介したいと思います。 $.fn.p = function (id) { var arg = [this]; if (id) arg.unshift(id); if (!window.console) return this; var c = window.console || { 'log' : function () {} }; (c.debug || c.log).apply(c, arg); return this; }; 具体的な使い方ですが、以下のように確認したいmethodの後に.p()を
画面遷移なしにAjaxでシームレスに実装できるコメントシステム作成チュートリアル:phpspot開発日誌
Simple AJAX Commenting System ? Tutorialzine 画面遷移なしにAjaxでシームレスに実装できるコメントシステム作成チュートリアル。 書き込むと内容がそのままDOMツリーにアニメーションしながら追加されるという、よくありそうなコメントシステムの実装チュートリアルとサンプルプログラムです。 似たようなものを実装したい場合に参考にできるかもしれません。 フォーム部分もそれなりにスタイルされており、JavaScriptによるブラウザ上バリデートも効いてます。 改善の余地がありますが１から作るよりサクっと実装したい場合に使えそうです。 関連エントリ PHPとjQueryで作るAjaxなグループチャットスクリプト PHP+Ajaxなチャットスクリプト：YShout
JavaScriptを上手くデザインに生かしたサイトのみを集めているギャラリーサイト・Not Coffee - かちびと.net
JSを使ったWebデザインをしたい方 のインスピレーションに良さそうだっ たので記事に。jQueryやmootools、 Prototypeなど、人気のライブラリを 駆使したサイトのみをショーケース化 しているギャラリー、Not Coffeeの ご紹介です。 数はさほど多くは有りません（150~160ほど）が、今後に期待したいギャラリーです。デザインも素敵なものばかりなのでインスピレーションと更なるjsの使い方の勉強にもいいかもですよ。 ギャラリー形式になっています。jQuery、mootoolsなどのカテゴリで分けられているのでライブラリ別で探せます。 サムネイルにマウスオーバーすると必要な情報が出てきます。どのライブラリがどこに使われているか（これはタグで分けています）などが直ぐに分かりますので探しやすいですね。 以下のようなサイトが掲載されていました。 Alex Buga’s Liv
人の嫌がることを進んで出来るプラグイン jDTGnoKyouhu.js【グロ注意】 | labs.yusukenakanishi.com
小学校の時、先生に人の嫌がることを進んでしなさいと言われ、好きな女の子に虫を見せて本当に嫌がられた記憶ありませんか？あの感じを何歳になっても味わいたいという少年の心を持った素敵なあなたのために、「人の嫌がることを進んで出来るプラグイン jDTGnoKyouhu.js【グロ注意】」をつくりました。好きな女の子のサイトに実装したらそれはもう嫌がられること間違いないしです！ 使用上の注意 グロテスクな表現があるので注意して下さい お食事中はお避け下さい 心臓の弱い方はおやめ下さい 未成年の方は保護者同伴で御覧下さい ゴキブリ好き？ Demoを見る ファイルをダウンロード 導入方法 // head内の記述 <link type="text/css" rel="stylesheet" href="css/jdtgnokyouhu.css" /> <script type="text/javascri
How to Create an App from Scratch | AppMaster
Turning an app idea into a working reality is a more complicated task than most people might believe. However, with the wealth of software resources available on the internet, creating an app out of your idea is manageable. You don't even need to necessarily know how to develop mobile apps to make your application work. You can hire third parties or freelancers as there many places where you can f
[JS]壁一面に写真を並べたようなギャラリーを作成するチュートリアル
画像をダイナミックに配置し、それに負けないくらいダイナミックなアニメーションで画像を拡大表示するギャラリーのチュートリアルをCodropsから紹介します。
jQuery for Designers - Tutorials and screencasts
Welcome to jQuery for Designers Learn how easy it is to apply web interaction using jQuery Search Search for Featured Simple use of Event Delegation Posted on 14th June 2011 — Event delegation may be some techie term that you’d rather shy away from, but if you’ve not already used it, this example will show you a simple but powerful use of event delegation. View Tutorial 16 Comments Tutorials – It’
テキストリンクへのマウスオーバー時にスムーズにURLや他のテキストに切り替えるjQueryプラグインHoverAttribute
マウスオーバーするとフェードインアウトエフェクトでURLに切り替わります。IE6、7では動かないみたいです。 オプションもあるみたい。 ↓ URLの最後の部分をハイライト $("h3 a").hoverAttribute({ removeProtocol: true, removeWWW: true, highlightURLPart: "lastURIPart" });↓ 文字数を指定してハイライト $("h3 a").hoverAttribute({ wrapLength: 65, wrapLink: "before", highlightURLPart: "query", });↓ title=””内のテキストに切り替える $("h3 a").hoverAttribute({ attribute: "title" });ほんとIEさえなければ色々出来ますね。デモとダウンロードは以下よ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大切なところは見ちゃいや… jDTGirigiriMosaic.js :: 5509