<!DOCTYPE html>
<html>
<head>
<style>
body { background:yellow; }
button { font-size:12px; margin:2px; }
p { width:150px; border:1px red solid; height:auto }
div { color:red; font-weight:bold; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
(function() {
// Create a new copy of jQuery using sub()
var plugin = jQuery.sub();
// Extend that copy with the new plugin methods
plugin.fn.extend({
open: function() {
return this.show();
},
close: function() {
return this.hide(10000);
}
});
// Add our plugin to the original jQuery
jQuery.fn.myplugin = function() {
this.addClass("plugin");
// Make sure our plugin returns our special plugin version of jQuery
return plugin( this );
};
})();
$(document).ready(function() {
// Call the plugin, open method now exists
$('#main').myplugin().close();
// Note: Calling just $("#main").open() won't work as open doesn't exist!
});
function showMain() {
$("#main").myplugin().open();
}
</script>
</head>
<body>
<button id="main">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
<button id="minaopen">open Paragraph Height</button>
<div> </div>
<p>
Sample paragraph to test height
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
</p>
<script>
function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
$("#getp").click(function () {
showHeight("paragraph", $("p").height());
});
$("#getd").click(function () {
showHeight("document", $(document).height());
});
$("#getw").click(function () {
showHeight("window", $(window).height());
});
$("#minaopen").click(function () {
showMain();
});
</script>
</body>
</html>
'JavaScript > Jquery' 카테고리의 다른 글
| [jQuery] submit handler (폼 전송) (0) | 2014.12.23 |
|---|---|
| [jQuery] ajax 폴링 기법(interval 재귀 호출) (0) | 2014.07.17 |
| [jQuery] JQuery touchslider (0) | 2013.12.31 |
| [jQuery] Prototype.js는 무엇인가? (0) | 2013.11.10 |
| [jQuery] 이미지 슬라이드 (0) | 2012.12.21 |