googleで
カスタム検索
プロフィール

けろ&ひな

Author:けろ&ひな
大阪在住。
親ばか。
最近、転職したよ。でも、やってることは一緒なんだけどね。;-P

最近の記事
カテゴリー
月別アーカイブ
最近のコメント
最近のトラックバック
スポンサード リンク

スポンサーサイト--------(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[JS]mouseupイベントが発生しない?2012-11-30(Fri)

ボタンや画像をドラッグした場合、mouseupイベントやmousemoveイベントが発生しないようです。
その代わりといっては何ですが、dragstartイベント、dragendイベントが発生するようで。

jQueryを使っているなら

$().bind("dragstart", function(e){ });
$().bind("dragend",function(e){ });


で確認できるようです。

mousedown⇒処理開始⇒mouseup⇒処理終了
なんて流れのときに、なんかおかしな動きがあるな。。。と思ったら
mousedown⇒処理開始⇒dragend⇒処理終了
を追加したら回避できたよ。
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

[JS]2重送信チェックを。。。2012-10-05(Fri)

業務の仕様上、どうしても必要になった。
サーバーサイドでやりたかったけど、なぜか嫌って言われた。。。
仕方ないからクライアント側(JS)でやることにした。。。

jquery使ってる関係で、$().click()とか使ってるんで、できるだけ影響が少ないように$().xclick()としてラップして使うことにした。

;(function($) {
/*
* 2重送信防止.
* ・チェック対象外にする場合は、対象タグのクラスに"ignoreDblSubmitCheck"を設定。
* ・$().click -> $().xclick, confirm() -> $.xconfirm() で対応
*
* @author kero_y2
*/
$.extend({
dblSubmitCheckTarget : null
});
var methods = {
check: function(target) {
if ($.dblSubmitCheckTarget) {
return false;
}
$.dblSubmitCheckTarget = target;
return true;
}
};
$.fn.dblSubmitCheck = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
return false;
}
};
$.extend(methods, {
init : function(target, applyMethod) {
if ($(target).is(".ignoreDblSubmitCheck")) {
return this;
} else if (target[applyMethod]) {
var orgMethod = target[applyMethod];
target[applyMethod] = function() {
if ($(this).dblSubmitCheck("check", this)) {
return orgMethod.apply(this, arguments);
}
return false;
};
}
}
});

$.fn.xclick = function(callback) {
var orgCallback = callback;
return $(this).click(function() {
if ($(this).dblSubmitCheck("check", this)) {
return orgCallback.apply(this, Array.prototype.slice.call(arguments, 1));
} else {
return false;
}
});
};

$.extend({
xconfirm:function(msg) {
var result = confirm(msg);
if (!result) {
$.dblSubmitCheckTarget = null;
}
return result;
}
});

})(jQuery);


使用方法は以下の通り。
$(document).ready(function() {
// 子画面起動で親画面がいるときは、親画面のチェックオブジェクトをクリアする。
if (window.opener && window.opener.$ && window.opener.$.dblSubmitCheckTarget ) {
window.opener.$.dblSubmitCheckTarget = null;
}
// inputタグの onclick の場合
$('input').each(function(index) {
return $(this).dblSubmitCheck (this, "onclick");
});
// submit の場合
$(':submit').xclick(function(){
return true;
});
});


$().click() 使ってる時は以下の通り変更する。
$("input").xclick(function(){
:
}


kumu.jsとか使えればよかったんだけど、なんか色々理由があって使えなかったらしい。。。
即席で作ったようなものだけど、今のところ問題なく動いてるようだ。

テーマ : プログラミング
ジャンル : コンピュータ

[jQuery]pluginの作り方について 其の32011-08-29(Mon)

(其の1其の2の続きです。)
6.Namespaceについては、3つに分かれています。
それから、7.Summary and Best Practicesです。
長くなりますが、一気に。


6.Namespacing
プラグインの開発で、適切な名前空間を割り当てることはとても重要な部分です。
名前空間を正しく割り当てることで、同じページ内にある他のプラグインやコードによって、あなたのプラグインが上書きされる可能性がとても低くなることを保証します。
名前空間であなたのプラグイン開発者としての人生はハッピーになれます。
名前空間は、メソッド、イベントやデータの動きをよりよく押さえるのに役立ちます。

6.1.Plugin Methods
いかなる状況下においても、1つのプラグインでjQuery.fnオブジェクトの中に2つ以上の名前空間を作っちゃダメよ。
(function($) {
$.fn.tooltip = function(options){ // THIS };
$.fn.tooltipShow = function() { // IS };
$.fn.tooltipHide = function() { // BAD };
$.fn.tooltipUpdate = function( content ) { // !!! };
})(jQuery);

これは、$.fn の名前空間を汚しまくっているという、がっかり&とほほ&ザンネンな例です。
これを解決するには、プラグインのメソッド全てを一つのオブジェクト定数とし、
文字列のメソッド名を引数としてプラグインのメソッドを呼び出すようにすべきです。
(function($) {
var methods = {
init : function( options ) { // THIS },
show : function() { // IS },
hide : function() { // GOOD },
update : function( content ) { // !!! }
};

$.fn.tooltip = function( method ) {

// Method calling logic
if ( methods[method] ) {
// メソッドが存在するなら、メソッドの呼出を行う。
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1));
} else if (typeof method === 'object' || !method ) {
// メソッドの指定がなければ、init()を呼び出す。
return methods.init.apply( this, arguments );
} else {
// 存在しないメソッドが呼び出された場合などはエラーとする。
$.error( 'Method '+method+' dose not exist on jQuery.tooltip' );
}

};
})(jQuery);
$('div').tooltip();	// calls the init method
$('div').tooltip({
foo:'bar'
}); // calls the init method
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method

プラグインアーキテクチャのこのタイプは、プラグインの親のクロージャの中であなたのメソッド全てをカプセル化し、最初のメソッド名でメソッドを呼出し、メソッドに必要な追加パラメータを渡すことができます。
メソッドのカプセル化とアーキテクチャのこのタイプは、jQueryプラグインコミュニティーの標準であり、jQueryUIのプラグインやウィジェットを含む無数のプラグインで使用されています。

6.2 Events

もしあなたのプラグインがイベントをバインドするなら、名前空間を使用したバインドをお勧めします。
この方法では、もしあとからアンバインドする必要がでてきた時に、他のイベントの同じ型にバインドされていても
干渉することなくアンバインドできます。
それは、バインドするイベントの後ろに".<namespace>"と追加するだけです。
(function($) {

var methods = {
init : function( optiois ) {
// 'resize.tooltip' で 名前空間を指定して reposition メソッドを実行するようバインド設定
return this.each( function() {
$(window).bind('resize.tooltip', methods.reposition );
});
},
destroy : function() {
// '.tooltip' の名前空間指定でイベントをアンバインド
return this.each( function() {
$(window).unbind('.tooltip');
});
},
reposition : function() { // ... },
show : function() { // ... },
hide : function() { // ... },
update : function( content ) { // ... }
};

$.fn.tooltip = function( method ) {

if ( methods[ method ] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if (typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}

};
})(jQuery);
$('#fun').tooltip();
//Some time later...
$('#fun').tooltip('destroy');

この例では、tooltipのinitメソッドでイニシャライズ時にwindowのresizeイベントの下に"tooltip"という名前空間
でrepositionメソッドをバインドしています。
その後、tooltipを破棄する際、"tooltip"という名前空間をunbindメソッドに渡すことによってプラグインのバインドイベントをアンバインドすることもできます。
これで、偶然プラグインの外で制限されるかもしれない出来事を解かずに、私たちは安全にプラグインイベントを解くことができます。(エキサキト直訳)

6.3 Data

プラグイン開発時、プラグイン内のデータが初期化されているか状態をチェックする必要があることがあります。
そういう時は、要素ごとの変数を追えるjQueryの data メソッドを使用するとよいでしょう。
しかしながら、異なった名前で多くの別々のデータ呼び出しの動向をおさえるよりむしろ、あなたの変数のすべてを収容するのにただ一つのオブジェクトリテラルを使用して、ただ一つのデータ名前空間からそのオブジェクトにアクセスするのは、最も十分です。(エキサイト直訳)
(function($) {
var methods = {
init : function( options ) {
return this.each( function() {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text : $this.attr('title')
});

// if the plugin hasn't been initialized yet
if ( !data ) {

/*
* Do more setup stuff here
*/

// 'tooltip' データとして target=$this, tooltip=tooltip(のDOM)を設定する
$(this).data('tooltip', {
target : $this,
tooltip : tooltip
});

}
});
},
destroy : function() {
return this.each( function() {
var $this = $(this),
data = $this.data('tooltip');

//Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');

});
},
reposition : function() { //... },
show : function() { //... },
hide : function() { //... },
update : function( content ) { //... }
};

$.fn.tooltip = function( method ) {

if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method '+method+' does not exist on jQuery.tooltip' );
}
};

})(jQuery);

data を使用するとプラグインからのメソッド呼出に渡って変数と状態を追跡するのに役立ちます。(google直訳)
名前空間を使用することで、データを一箇所でまとめて扱えるようになり、削除が必要になった場合でも簡単に行うことができます。

7.Summary and Best Practices
jQueryのプラグインを作成するにはライブラリを最大限に活用し、あなたの賢く役立つコードを再利用可能なコードとして外に要約することで開発時間を効率的に短縮することができます。
jQueryプラグインを作る際に気をつけるべき点を纏めると以下の通りです。
  • プラグインは次の様にラップします。 (function( $ ){ // plugin goes here })( jQuery );

  • プラグインの直接のスコープ内で"this"キーワードを重複してラップしないようにしましょう。

  • プラグインから本質的な値を返す場合を除いては、メソッドチェーンが行えるように"this"キーワードを返すようにしましょう。

  • 長々と引数を書く必要がないようにプラグインの初期値の上書きを行うような書き方をしましょう。

  • jQuery.fnオブジェクトを取り散らさないよう、プラグインは1つにつき1つの名前空間のみを使用するようにしましょう。

  • メソッドやイベント、データは名前空間を使用しましょう。

  • " jQuery.fn " は " jQuery effin' " と発音しましょう。


以上。


続きを読む

テーマ : プログラミング
ジャンル : コンピュータ

[jQuery]pluginの作り方について 其の22011-08-26(Fri)

其の2では、4~5を。
では。
(其の1はこちら

4.Maintaining Chainability

先ほどの例では、ページ内の最大の高さをIntegerで返しました。
ですが多くの場合、プラグインではコレクションの要素に対して変更を加えメソッドチェーンによって次の処理を行います。
このメソッドチェーンこそがjQueryの売りなのです。

ということで、先ほどの例をメソッドチェーン可能なものにするためにjQueryオブジェクトである"this"を返すようにしましょう。

(function($) {
$.fn.lockDimensions = function( type ) {

return this.each(function() {
var $this = $(this);
if (!type || type == 'width') {
$this.width( $this.width() );
}
if (!type || type == 'height' ) {
$this.height( $this.height() );
}
});

};
})(jQuery);
$('div').lockDimeisions('width').css('color', 'red');

これで、プラグインが"this"キーワードを直接スコープ内で返すのでjQueryによるメソッドチェーンが行えるようになり、「.css()」が使えます。
もし、本質的な値を返さないプラグインなら、プラグイン関数は直接のスコープ内で"this"キーワードを返すようにするべし。

プラグインに渡される引数は、プラグイン関数の有効範囲に渡されます。
上の例でいうと、プラグイン関数の引数として渡した文字列'width'はプラグイン関数の「type」引数に渡されることになります。


5.Defaults and Options
多くのオプションを提供する、より複雑でカスタマイズ可能なプラグインでは、プラグインが呼び出された時に初期値を「$.extend」を使って継承できるように設定しておくのがよいのでないでしょうか。
(function($) {
$.fn.tooltip = function( options ) {
var settings = {
'location' : 'top',
'background-color' : 'blue'
};

return this.each(function() {
// if options exist, lets merge them
// with our default settings

if ( options ) {
$.extend( settings, options );
}

// Tooltip plugin code here

});

};
})(jQuery);
$('div').tooltip({
'location':'left'
});

この例では、tooltipプラグインに options 引数として 'location' を 'left' で上書きします。
一方、'background-color' は初期設定の 'blue' をそのまま引き継ぎます。
結果として、options は以下のようになります。
{
'location' : 'left',
'background-color' : 'blue'
}

この方法は、利用可能なオプション全てを引数で渡す必要が無くなるという大変すばらしーーーーいやり方です。



ここまで。

続きを読む

テーマ : プログラミング
ジャンル : コンピュータ

[jQuery]pluginの作り方について 其の12011-08-26(Fri)

どうにも、jQueryのプラグインの書き方が分かっていない管理人です。

過去にアップしてみたスクリプトも汚くて公開したくないくらいですが、恥をかくほど努力せねばと思うので晒し首にしてあります。

ということで、いまさら!改めて本家サイトの「Plugins/Authoring」を勝手訳、google翻訳、エキサイト翻訳、嘘訳駆使して勉強します。
(嘘訳が酷過ぎるという場合には、コメントにて言ってください!)

というわけで、その1。

本家サイトでは以下の内容になってます。
  1. Getting Started
  2. Context
  3. The Basics
  4. Maintaining Chanabillity
  5. Defaults and Options
  6. Namespacing
    1. Plugin Methods
    2. Events
    3. Data
  7. Summary and Best Practices


その1では、1~3をやります。
では。


1.Getting Started
jQueryのプラグインを作成するために
まずは
jQuery.fn
オブジェクトに対して新しいfunctionプロパティを追加しましょう。
("myPlugin"には、あなたの好きな名前をどうぞ)
jQuery.fn.myPlugin = function() {
// DO your awesome plugin stuff here
};

が、ちょーっと待った。jQueryで良くつかわれる$記号が見当たらないですよね?
このままでは、$記号をプラグイン内で使用できません。
まずは、あなたのプラグインが$記号を使用する可能性のある
他のライブラリとの衝突を避けるためにも、$記号の上書きができないように関数クロージャとしてjQueryオブジェクトを渡してやるとよいでしょう。
(function($) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})(jQuery);

これで、プラグイン内で安心して$記号を使用できるようになります。

2.Context
「This」キーワードについて。
プラグイン内で「this」を使用すると、それは"jQueryオブジェクト"を指すことになります。
thisがネイティブのDOMエレメントを指すのは他のインスタンスで、jQueryのコールバックとして呼び出された場所などです。
プラグイン内で「$(this)」とした場合は、「$($('#element'))」と同じになります。
(function($) {
$.fn.myPlugin = function() {

// there's no need to do $(this) because
// "this" is already a jquery object

// $(this) would be the same as $($('#element'));

this.fadeIn('normal', function() {
// the "this" keyword is DOM element
});
};
})(jQuery);
$('#element').myPlugin();


3.The Basics
とりあえず、これでjQeuryのプラグインは書けるでしょうからやってみましょう。
(function($) {
$.fn.maxHeight = function() {
var max = 0;

this.each( function() {
max = Math.max( max, $(this).height() );
});

return max;
};
})(jQuery);
var tallest = $('div').maxHeight();	// Returns the height of the tallest div

これは単純なプラグインで、「.height()」 を使用してページ内にあるDIVの最大の高さを返します。



今回はここまで。

続きを読む

テーマ : プログラミング
ジャンル : コンピュータ

工事中
RSSフィード
リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。