I tmozg js_school_jquery
- 2. 2
jQuery 仗仍舒亞亳仆
亅从仂仆仂仄 于亠仄
丕仗仂舒ﾑ 从仂亟 从亳仗仂于
仂亰于仂仍ﾑ 亟亞亳仄 亳仗仂仍亰仂于舒 于舒 从仂亟
- 3. 3
仆亳亳舒仍亳亰舒亳
jQuery.fn.myPlugin = function() {
// 仂亟 从仂亞仂 仗仍舒亞亳仆舒
};
- 4. 4
舒于亳仍仆舒 亳仆亳亳舒仍亳亰舒亳
(function( $ ) {
$.fn.myPlugin = function() {
// 仂亟 从仂亞仂 仗仍舒亞亳仆舒
};
})( jQuery )
- 5. 5
仂仆亠从
(function( $ ){
$.fn.myPlugin = function() {
// "this" 亢亠 磦仍磳 jQuery 仂弍亠从仂仄
this.fadeIn('normal', function() {
// "this 磦仍磳 DOM 仂弍亠从仂仄
});
};
})( jQuery );
$('#element').myPlugin();
- 6. 6
舒弍仂舒ﾑ亳亶 仗仍舒亞亳仆
(function( $ ){
$.fn.maxHeight = function() {
var max = 0;
this.each(function() {
max = Math.max( max, $(this).height() );
});
return max;
};
})( jQuery );
var tallest = $('div').maxHeight();
- 7. 7
仂亟亟亠亢亳于舒亠仄 chaining
(function( $ ){
$.fn.lockDimensions = function( type ) {
return this.each(function() {
var $this = $(this);
// 舒弍仂舒亠仄 从舒亢亟仄 仍亠仄亠仆仂仄
});
};
})( jQuery );
- 8. 8
舒舒仄亠亳亰舒亳
(function( $ ){
$.fn.tooltip = function( options ) {
// 舒亳于 亰仆舒亠仆亳亶 仗仂 仄仂仍舒仆亳
var settings = $.extend( {
'location' : 'top',
'background-color : 'blue'
}, options);
return this.each(function() {
// 仂亟 仗仍舒亞亳仆舒
});
};
})( jQuery );
$('div').tooltip({ 'location' : 'left' });
- 9. 9
Namespacing
(function( $ ){
$.fn.tooltip = function( options ) {
// 亅仂
};
$.fn.tooltipShow = function( ) {
// 仂亠仆
};
$.fn.tooltipHide = function( ) {
// 仗仍仂仂
};
$.fn.tooltipUpdate = function( content ) {
// !!!
};
})( jQuery );
- 10. 10
弌仗亳仂从 仄亠仂亟仂于
var methods = {
init : function( options ) { },
show : function( ) { },
hide : function( ) { },
update : function( content ) { }
};
- 11. 11
仂亞亳从舒 于弍仂舒 仆亢仆仂亞仂 仄亠仂亟舒
$.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' );
}
};
- 12. 12
亰仂于 仄亠仂亟舒
// 亰于舒亠仄 init 仄亠仂亟
$('div').tooltip();
// 亰于舒亠仄 init 仄亠仂亟 仗舒舒仄亠舒仄亳
$('div').tooltip({ foo : 'bar' });
// 亰于舒亠仄 hide 仄亠仂亟
$('div').tooltip('hide');
// 亰于舒亠仄 update 仄亠仂亟 仗舒舒仄亠仂仄
$('div').tooltip('update', 'This is the new tooltip content!');
- 13. 13
仂亞亳
(function( $ ){ /* 从仂亟 仗仍舒亞亳仆舒 */ })( jQuery );
仂亟亟亠亢亳于舒亶亠 chaining
亠亠亟舒于舒亶亠 仆舒仂亶从亳 亠亠亰 {}
亠亞亟舒 亳仗仂仍亰亶亠 namespace
亟亳仆 namespace 仂亟亳仆 仗仍舒亞亳仆
- 14. 14
仂仗仂?
舒于仍ﾑ从仂于
舒仆亳亳仍
d.pavluchkov@itmozg.ru
![11
仂亞亳从舒 于弍仂舒 仆亢仆仂亞仂 仄亠仂亟舒
$.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' );
}
};](https://image.slidesharecdn.com/itmozgjsschooljquery-120408061434-phpapp01/85/I-tmozg-js_school_jquery-11-320.jpg)
