ActionBy Class,Elementのclassトリガ動作を利用する
Webアプリケーション、ページ上の要素(Element)をして、よくいくつかの特殊な処理を行います.
例えば特効を増やしたり、innerHTMLを処理したりします.
例を挙げます.
jQueryにはlavaLampのプラグインがあり、きれいなメニューを作ることができます.
使用するときは、cssを書く以外にstyleを設定すると、呼び出しです.
この需要に対して、この使い方は非難の余地がない.
しかし、このように要素をフィルタリングしてから異なる需要を行うには、いくつかのアプリケーションで多くの需要がある可能性があります.
個々のライトセレクタの場合、要素に特殊なIDや属性を設定するのは面倒です.
ソースファイル関連要素(htmlラベル)のclassプロパティを設定することで、この問題を処理する簡単な方法があります(この方法はもう2年も使っています.とても簡単です).上記のような需要htmlコードは以下の通りです.
これはlavaLampの最も簡単な形式で、lavaLampBottomStyleはメニューのスタイルを設定するために使用されます.
lavaLamp効果をトリガする設定です.
中のabcは特殊なマークを宣言するために使われていることが分かったかもしれません.このclassにActionBy Classがある方法を表します.abc.LavaLamp({fx:'easeOutBack',speed:700})はlavaLampをアクティブにする構文です.
この文法が有効になるには、jQuery拡張ActionBy Class------abcを書きました.
注意:コードは私の拡張から直接投稿されています.何かを書くのは試用のためで、いくつかのものは私が試験的に使ったものです.読者は原理を理解するだけで、自分で書くことができます.
この拡張は簡単です.
abcに対応するコードは、$('.abc')またはabc classを持つElementsが表示されます.abc分析class nameで「abc.」(もちろんprefixで他の、順序を区別するために定義することもできます)先頭のclassは、実はActionコマンドです.関連する$を呼び出す.abc.xxxx
この方法により,多数の異なるIDを定義するのに苦労する必要がなくなり(これは煩わしい),呼び出しも一言でトリガーされる.
考え:
1.実は2年间の使用を経て、実际にはこの方法が最适化できると思いますが、契约式のプログラミングを使っているので、みんなに普遍的に受け入れられるとは限らないので、言わないでください.
2.前述の問題については、複雑なアプリケーションでactionトリガの順序が要求されています.最初はインクリメンタルまたはインクリメンタルサイクルで解決しましたが、prefixの設定に変更してトリガーしました.例えば、次のようにします.
呼び出し順は2つ書けばいいです.
例えば特効を増やしたり、innerHTMLを処理したりします.
例を挙げます.
jQueryにはlavaLampのプラグインがあり、きれいなメニューを作ることができます.
使用するときは、cssを書く以外にstyleを設定すると、呼び出しです.
$(elm).lavaLamp(options);
/*elm , #ID jQuery ,options lavaLamp */
この需要に対して、この使い方は非難の余地がない.
しかし、このように要素をフィルタリングしてから異なる需要を行うには、いくつかのアプリケーションで多くの需要がある可能性があります.
個々のライトセレクタの場合、要素に特殊なIDや属性を設定するのは面倒です.
ソースファイル関連要素(htmlラベル)のclassプロパティを設定することで、この問題を処理する簡単な方法があります(この方法はもう2年も使っています.とても簡単です).上記のような需要htmlコードは以下の通りです.
<ul class="lavaLampBottomStyle abc abc.lavaLamp({fx:'easeOutBack',speed:700})">
<li><a> </a></li>
<li><a> </a></li>
</ul>
これはlavaLampの最も簡単な形式で、lavaLampBottomStyleはメニューのスタイルを設定するために使用されます.
abc abc.lavaLamp({fx:'easeOutBack',speed:700})
lavaLamp効果をトリガする設定です.
中のabcは特殊なマークを宣言するために使われていることが分かったかもしれません.このclassにActionBy Classがある方法を表します.abc.LavaLamp({fx:'easeOutBack',speed:700})はlavaLampをアクティブにする構文です.
この文法が有効になるには、jQuery拡張ActionBy Class------abcを書きました.
$.extend($.fn, {
abc: function(prefix) {
prefix=(prefix ||'abc')+'.';
//for (var i=this.length - 1;i>=0;i--) {// , ,
for (var i=0 ;i<this.length;i++) {
var cna = this[i ].className.split(/\s+/);
var self=this[i];// eval
var selfjQ = $(this[i]);// eval jQuery
for (var j=0; j<cna.length; j++) {
if (prefix!=cna[j].slice(0,prefix.length) || cna[j].indexOf('(')<1 || cna[j].slice(cna[j].length-1)!=')') continue;
var fn=cna[j].slice(0,cna[j].indexOf('('));
var option=cna[j].slice(fn.length+1,cna[j].length-1);
option=option.replace(/&/g,' ')||undefined;
fn = fn+'(this[i],'+option+')';
//selfjQ.removeClass(cna[j]);
//try {
//alert(('$.'+fn));
window.eval(('$.'+fn));
//catch (ex){alert('abc error:'+fn)};
}
}
this.removeClass(prefix.slice(0,-1));
}
});
$.abc = {};
$.extend($.abc, {
lavaLamp:function(elm,options){
$(elm).lavaLamp(options);
}
);
注意:コードは私の拡張から直接投稿されています.何かを書くのは試用のためで、いくつかのものは私が試験的に使ったものです.読者は原理を理解するだけで、自分で書くことができます.
この拡張は簡単です.
$('.abc').abc()
abcに対応するコードは、$('.abc')またはabc classを持つElementsが表示されます.abc分析class nameで「abc.」(もちろんprefixで他の、順序を区別するために定義することもできます)先頭のclassは、実はActionコマンドです.関連する$を呼び出す.abc.xxxx
この方法により,多数の異なるIDを定義するのに苦労する必要がなくなり(これは煩わしい),呼び出しも一言でトリガーされる.
考え:
1.実は2年间の使用を経て、実际にはこの方法が最适化できると思いますが、契约式のプログラミングを使っているので、みんなに普遍的に受け入れられるとは限らないので、言わないでください.
2.前述の問題については、複雑なアプリケーションでactionトリガの順序が要求されています.最初はインクリメンタルまたはインクリメンタルサイクルで解決しましたが、prefixの設定に変更してトリガーしました.例えば、次のようにします.
abc abc.lavaLamp({fx:'easeOutBack',speed:700});// abc ,
abc2 abc2.lavaLamp({fx:'easeOutBack',speed:700});
呼び出し順は2つ書けばいいです.
$('.abc').abc();
$('.abc2').abc('abc2');