jQuery プラグイン作成入門
- 7. About Me
• WEB Developer / PHP / CakePHP / HTML / CSS / jQuery / PostgreSQL /
MySQL / iPhone / / / / / / / / no more
• BLOG: http://php-tips.com/
• TWITTER: @nojimage
• FACEBOOK: http://www.facebook.com/nojimage
- 11. About jQuery
: http://jquery.com/
• CSS DOM
• DOM Element /
•
•
• GPL/MIT
- 13. Getting started with jQuery
• jQuery
• 1.4.3 (2010/10/30 )
• <script type="text/javascript"
<script>
src="js/jquery-1.4.3.min.js"></script>
- 14. Getting started with jQuery
• jQuery
• 1.4.3 (2010/10/30 )
• <script type="text/javascript"
<script>
src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
/* */
};
// --></script>
- 20. DOM = Document Object Model
title
head
...
html li
h1 ul
body ...
div p
- 24. $('ul');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 25. $('ul');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 27. $('#title');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 28. $('#title');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 30. $('.message');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 31. $('.message');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 33. $('#contents p');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 34. $('#contents p');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</
p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 37. $('#contents').next();
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 38. $('#contents').next();
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 39. $('#contents').next();
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 41. $('#contents').find('p');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 42. $('#contents').find('p');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 43. $('#contents').find('p');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 45. $('li.message').parent('div');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 46. $('li.message').parent('div');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 47. $('li.message').parent('div');
<div id="header">
<p id="title">Foobar Website</p>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</div>
<div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</
p>
<ul>
<li class="message">Hello World.</li>
<li class="message">Let's eat pudding.</li>
</ul>
</div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
- 49. $ is jQuery
$ jQuery
// <div id="contents">
$('#contents').next();
// <div id="contents"> p
$('#contents').find('p');
// <input id="email"/> form
$('input#email').parent('form');
- 50. $ is jQuery
$ jQuery
// <div id="contents">
jQuery('#contents').next();
// <div id="contents"> p
jQuery('#contents').find('p');
// <input id="email"/> form
jQuery('input#email').parent('form');
- 62. Event Handler
•
• change()
• dbclick()
• error()
• focus()
• keydown()
• keypress()
• keyup()
• load()
• mousedown()
• mousemove()
• .....
- 65. Animation
• jQuery
• hide() / show()
• slideUp() / slideDown()
• fadeOut() / fadeIn()
•
- 66. Create Animation
• animate(properties, options)
$('.move-right').click(function(){ // .move-right
$('#box').animate({
'left': '+=50px' // #box 50px
}, {
duration: "slow", //
//
complete: function(){ alert('Move!'); }
});
});
- 69. Plugin?
•
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.plugin_name.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$.pluginName();
});
// --></script>
- 89. Tips 1
• ( )
$.pluginName({foo: true})
- 90. (function($){
$.fn.pluginName = function(params){
// override input params
params = $.extend({}, $.fn.pluginName.defaults, params);
// do something...
};
// default values
$.fn.pluginName.defaults = {
foo: 'hoge',
bar: 'fuga'
};
})(jQuery);
- 91. (function($){
$.fn.pluginName = function(params){
// override input params
params = $.extend({}, $.fn.pluginName.defaults, params);
// do something...
};
// default values
$.fn.pluginName.defaults = {
foo: 'hoge',
bar: 'fuga'
}
};
})(jQuery);
- 92. (function($){
$.fn.pluginName = function(params){
// override input params ↓
params = $.extend({}, $.fn.pluginName.defaults, params);
// do something...
};
// default values
$.fn.pluginName.defaults = {
foo: 'hoge',
bar: 'fuga'
}
};
})(jQuery);
- 94. (function($){
var localFunction = function(params) {
alert('local function');
};
$.fn.pluginName = function(params){
// do something..
localFunction(params);
// do something..
};
})(jQuery);
- 95. (function($){
var localFunction = function(params) {
}
alert('local function');
};
$.fn.pluginName = function(params){
// do something..
localFunction(params);
// do something..
};
})(jQuery);
- 96. (function($){
var localFunction = function(params) {
}
alert('local function');
};
$.fn.pluginName = function(params){
// do something..
localFunction(params); }
// do something..
};
})(jQuery);
- 97. Tips 3
•
• $.pluginName.funcA()
• $.pluginName.funcB()
- 99. (function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
})(jQuery);
- 100. (function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something... } $.pluginName.FuncA()
};
})(jQuery);
- 101. (function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
$.pluginName.FuncB = function(){
// do something...
};
})(jQuery);
- 102. (function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
$.pluginName.FuncB = function(){
// do something...
} $.pluginName.FuncB()
};
})(jQuery);