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)的簡(jiǎ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超簡(jiǎn)單實(shí)現(xiàn)手風(fēng)琴效果的方法
- jquery實(shí)現(xiàn)手風(fēng)琴展開(kāi)效果
相關(guān)文章
由點(diǎn)擊頁(yè)面其它地方隱藏div所想到的jQuery的delegate
在網(wǎng)頁(yè)開(kāi)發(fā)的過(guò)程中經(jīng)常遇到的一個(gè)需求就是點(diǎn)擊一div內(nèi)部做某些操作,而點(diǎn)擊頁(yè)面其它地方隱藏該div。比如很多導(dǎo)航菜單,當(dāng)菜單展開(kāi)的時(shí)候,就會(huì)要求點(diǎn)擊頁(yè)面其它非菜單地方,隱藏該菜單2013-08-08Jquery ajax傳遞復(fù)雜參數(shù)給WebService的實(shí)現(xiàn)代碼
Jquery ajax傳遞復(fù)雜參數(shù)給WebService的實(shí)現(xiàn)代碼,需要的朋友可以參考下。主要是屬性比較多。2011-08-08遍歷json獲得數(shù)據(jù)的幾種方法小結(jié)
下面小編就為大家?guī)?lái)一篇遍歷json獲得數(shù)據(jù)的幾種方法小結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01jQuery文本框(input textare)事件綁定方法教程
jquery​的事件綁定已經(jīng)用on替換了原來(lái)的bind,接下來(lái)為大家分享下bind的使用方法及input textare事件2013-04-04jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫(huà)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫(huà)效果,通過(guò)jquery鏈?zhǔn)讲僮鲗?shí)現(xiàn)頁(yè)面元素的漸變折疊與展開(kāi)功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)輸入框的放大和縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)輸入框的放大和縮小功能,涉及jQuery基于事件響應(yīng)的頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-07-07jQuery Ajax提交表單查詢(xún)獲得數(shù)據(jù)實(shí)例代碼
用戶(hù)輸入一個(gè)表單,輸入準(zhǔn)考證和驗(yàn)證碼,驗(yàn)證用戶(hù)是否輸入表單,點(diǎn)擊查詢(xún)提交,然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來(lái)2012-09-09