[JS + jquery] ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ๋ง๋ค์ด๋ณด๊ธฐ
2021. 11. 3. 11:04ใHTML + CSS + JS/JS ์๋ฐ์คํฌ๋ฆฝํธ
728x90
1. $.fn.extend() ๋ฉ์๋
$.fn.extend() ๋ฉ์๋๋ ๊ฐ๋ฐ์๊ฐ ์ง์ ์ ์ํ ํจ์๋ฅผ jQuery์ ํ์ฅ์์ผ์ฃผ๋ ์ญํ ์ ํ๋ค.
1๏ธโฃ
$.fn.extend({
ํ์ฅ ํจ์๋ช : function(๋งค๊ฐ๋ณ์1, ๋งค๊ฐ๋ณ์2..) {
$(this);
์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋;
}
});
$("์์ ์ ํ").ํ์ฅ ํจ์๋ช (๋งค๊ฐ๋ณ์1, ๋งค๊ฐ๋ณ์2..);
2๏ธโฃ
$.fn.ํ์ฅํจ์๋ช = function(๋งค๊ฐ๋ณ์1, ๋งค๊ฐ๋ณ์2..) {
..
}
2. 2๏ธโฃ ๋ฐฉ๋ฒ ์ฌ์ฉํด์ ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ๋ง๋ค์ด๋ณด๊ธฐ
3. 1๏ธโฃ ๋ฐฉ๋ฒ ์ฌ์ฉํด์ ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ๋ง๋ค์ด๋ณด๊ธฐ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Plugin </title>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
body{font: 14px Malgun Gothic,"๋ง์๊ณ ๋",sans-serif;color: #555;}
h1{font-size:1em;margin-bottom:10px;}
</style>
<link rel="stylesheet" href="css/faq.css">
<script src="js/jquery.js"></script>
<script>
$(function() {
$.fn.extend({
faq : function(){
var ts = $(this);
$.each(ts, function(i, o){
$("button", o).on("click", tabMenu);
function tabMenu() {
if($(this).parent().next().is(":hidden")) {
$("li>div:visible", o).show();
$(this).parent().next().show();
}else {
$("li>div:visible", o).hide();
}
}
});
}
});
$(".faq").faq();
});
</script>
</head>
<body>
<h1>์ง๋ฌธ ์ ๋ชฉ1</h1>
<div class="faq">
<ul>
<li>
<p><button>Q1. ์์ฃผ ๋ฌป๋ ์ง๋ฌธ ๋ด์ฉ?</button></p>
<div>
<div class="cont">๋ต๋ณ ๋ด์ฉ1</div>
</div>
</li>
<li>
<p><button>Q2. ์์ฃผ ๋ฌป๋ ์ง๋ฌธ ๋ด์ฉ?</button></p>
<div>
<div class="cont">๋ต๋ณ ๋ด์ฉ2</div>
</div>
</li>
</ul>
</div>
<h1>์ง๋ฌธ ์ ๋ชฉ2</h1>
<div class="faq">
<ul>
<li>
<p><button>Q1. ์์ฃผ ๋ฌป๋ ์ง๋ฌธ ๋ด์ฉ?</button></p>
<div>
<div class="cont">๋ต๋ณ ๋ด์ฉ1</div>
</div>
</li>
<li>
<p><button>Q2. ์์ฃผ ๋ฌป๋ ์ง๋ฌธ ๋ด์ฉ?</button></p>
<div>
<div class="cont">๋ต๋ณ ๋ด์ฉ2</div>
</div>
</li>
</ul>
</div>
</body>
</html>
728x90
'HTML + CSS + JS > JS ์๋ฐ์คํฌ๋ฆฝํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JSP] ์ธ์ Session ์์ฑ,์ญ์ , session์ผ๋ก ๋ก๊ทธ์ธํ๊ธฐ (0) | 2021.11.03 |
|---|---|
| [JS + jquery] bxSlider ํ๋ฌ๊ทธ์ธ ์ด์ฉํด์ ๊ฐ๋จํ ๊ฐค๋ฌ๋ฆฌ ๋ง๋ค๊ธฐ (0) | 2021.11.03 |
| [JS + jquery] jquery-cookie ํ๋ฌ๊ทธ์ธ (0) | 2021.11.03 |
| [JS + jquery] bxSlider ํ๋ฌ๊ทธ์ธ (0) | 2021.11.03 |
| [JS + jquery] ์ ์ด์ฟผ๋ฆฌ UI ํ๋ฌ๊ทธ์ธ draggable(), Datepicker() (0) | 2021.11.03 |