您的位置：首页 > Web前端 > JQuery

jquery自定义插件

2015-11-28 22:08 836 查看

自定义插件

#javascript
$(function(){
//调用你的自定义插件
$.fn.accordion = function(options) {
return this.each(function() {
var dts = $(this).children('dt');
dts.click(onClick);
dts.each(reset);
});

function onClick() {
$(this).siblings('dt').each(hide);
$(this).next().slideDown('fast');
return false;
}

function hide() {
$(this).next().slideUp('fast');
}

function reset() {
$(this).next().hide();
}
}
});

$(function(){
$('dl#my-accordion').accordion();
})

#css
.accordion {
width: 500px;
border: 1px solid #ccc;
border-bottom: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.accordion dt,.accordion dd {
border-bottom: 1px solid #ccc;
margin: 0px;
}
.accordion dt {
background: #eaeaea;
cursor: pointer;
padding: 8px 4px;
font-size: 13px;
font-weight: bold;
}
.accordion dd {
padding: 12px 8px;
}

#html
<!DOCTYPE HTML>
<html>
<head>
<title>自定义你的插件</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<dl class="accordion" id="my-accordion">
<dt>Section 1</dt>
<dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
<dt>Section 2</dt>
<dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
<dt>Section 3</dt>
<dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
<dt>Section 4</dt>
<dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航