初めてのjQueryプラグインを作成してみました
最近、jQueryやBootstrapなどに触れています。把握しきれないくらいたくさんのライブラリやプラグインが作成されていて、圧倒されていたりします。それで、興味が湧いてきて、jQueryプラグインの作成方法について、少し調べて見ました。jQuery公式サイトに載っていて、かなり簡単に作成できるようですので、ひとつ作ってみました。
元にしたjQueryプラグインのひな形
jQuery公式サイトから次のようなひな形をコピペして作成しました。いくつかひな形のパターンがあるようですが、一番使う機会が多そうなパターンにしました。
(function( $ ){ $.fn.tooltip = function( options ) { // Create some defaults, extending them with any options that were provided var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function() { // Tooltip plugin code here }); }; })( jQuery );
$('div').tooltip({ 'location' : 'left' });
作成したjQueryプラグイン
実装方法
次のようなHTMLのDiv要素に対して、CSSで色を付けるようにしました。
<div> Hello, World! </div>
自作したjQueryプラグインです。
(function( $ ){ $.fn.tooltip = function( options ) { // Create some defaults, extending them with any options that were provided var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function() { // Tooltip plugin code here $(this).css('location', settings['location']); $(this).css('background-color', settings['background-color']); }); }; })( jQuery );
プラグインを呼び出している処理です。
$('div').tooltip({ 'location' : 'left', 'background-color' : 'lightgreen' });
非常に簡単に作成できるのですね!