jquery實(shí)現(xiàn)手風(fēng)琴效果實(shí)例代碼
更新時(shí)間：2013年11月15日 15:09:04 作者：
這篇文章介紹了jquery實(shí)現(xiàn)手風(fēng)琴效果實(shí)例代碼，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
//jquery實(shí)現(xiàn)手風(fēng)琴效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手風(fēng)琴</title>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.18.custom.min.js">
</script>
<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" language="javascript">
$(function(){
$("#accordion").accordion(
{
header: "h3",
event:"mouseover",
icons:{
header:"ui-icon-carat-2-e-w"
},
}
).sortable({
axis:"Y"http://拖動(dòng)效果 上下拖動(dòng) 默認(rèn)為左右拖動(dòng)
});
})
</script>
</head>
<body>
<div id="accordion" style="width:600px; height:600px; border:1px #F00 solid">
<div>
<h3><a href="#">first</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">third</a></h3>
<div>悠悠</div>
</div>
</div>
</body>
</html>
您可能感興趣的文章:
- jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
- jQuery實(shí)現(xiàn)的簡單手風(fēng)琴效果示例
- jquery插件制作 手風(fēng)琴Panel效果實(shí)現(xiàn)
- jQuery制作效果超棒的手風(fēng)琴折疊菜單
- 基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單
- 基于jquery的slideDown和slideUp做手風(fēng)琴
- jquery手風(fēng)琴特效插件
- Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴(折疊面板)示例
- jquery超簡單實(shí)現(xiàn)手風(fēng)琴效果的方法
- jquery實(shí)現(xiàn)手風(fēng)琴展開效果
相關(guān)文章
jQuery的animate函數(shù)實(shí)現(xiàn)圖文切換動(dòng)畫效果
animate()在jquery中作為一個(gè)方法,可用于創(chuàng)建動(dòng)畫效果，jquery中的animate()方法讓那個(gè)頁面增加了很好的視覺效果2015-05-05
jQuery Attributes(屬性)的使用(二、類篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法，我將以實(shí)例方式進(jìn)行講述，以簡單，全面為基礎(chǔ)，不會(huì)涉及很深，我的學(xué)習(xí)方法：先入門，后進(jìn)階！2009-12-12
jQuery實(shí)現(xiàn)仿Alipay支付寶首頁全屏焦點(diǎn)圖切換特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿Alipay支付寶首頁全屏焦點(diǎn)圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關(guān)使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jQuery簡單綁定單個(gè)事件的方法,結(jié)合具體實(shí)例形式分析了jQuery使用bind方法進(jìn)行事件綁定與事件響應(yīng)的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
在QWrap群里討論時(shí)，有同學(xué)問jquery/yui等已做到極致，我們有沒必要再重復(fù)造一個(gè)叫QWrap的輪子？2011-02-02
jQuery利用FormData上傳文件實(shí)現(xiàn)批量上傳
這篇文章主要為大家詳細(xì)介紹了jQuery利用FormData上傳文件實(shí)現(xiàn)批量上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
jquery有很多的API事件，本文小編給大家整理了jquery中最主要的API函數(shù)集合。2017-11-11
這篇文章主要為大家詳細(xì)介紹了jQuery選擇器之屬性過濾選擇器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
jQuery簡單實(shí)現(xiàn)圖片預(yù)加載
我們在做網(wǎng)站的時(shí)候經(jīng)常會(huì)遇到這樣的問題：一個(gè)頁面有大量的圖片導(dǎo)致頁面加載速度緩慢，經(jīng)常會(huì)出現(xiàn)一個(gè)白頁用戶體驗(yàn)很不好。那么如何解決這個(gè)問題呢？下面我來介紹一種在實(shí)際應(yīng)用中經(jīng)常會(huì)使用到的js預(yù)加載的方法。2015-04-04
jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題
本文主要介紹jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題，通過第三方的json2.js做到兼容，需要的朋友可以參考下。2016-05-05