JQuery第一彈 accordion選單詳解

2021-08-31 08:47:53 字數 1312 閱讀 3943

ps:

1.需要使用者有點jquery核心外掛程式的基礎

2.所有講解都不包含css樣式,只說動態效果,樣式根據自己實際情況修改

一.匯入jquery核心外掛程式

二.匯入與accordion選單相關的ui外掛程式(ui.core.js,ui.accordion.js),

或直接匯入jquery-ui-1.7.2.custom.min.js(不建議,會導致頁面載入時多出沒必要的外掛程式載入)

三.用html標籤定義accordion選單(分靜態和動態):

1.靜態選單:

首先是最外層div,相當於是放accordion選單的容器,

然後是裡面的每個accordion選單項,其中每個項分為標題項和內容項,

title(這裡放標題)

content(這裡放內容)

這樣就做成了只有乙個選單項的accordion選單,若有多個選單,重複即可,如:

title(這裡放標題)

內容1內容2

title(這裡放標題)

內容1內容2

2.動態生成選單

同樣首先定義最外層div,相當於是放accordion選單的容器,

然後通過非同步獲取資料,並返回結果,達到動態生成效果,具體步驟如下:

①在script標籤中定義非同步呼叫的方法:

②新建乙個頁面,用來生成accordion選單的所有內容,這裡以asp頁面為例子:

在後台**的load事件中新增如下類似**:

protected void page_load(object sender, eventargs e)

}//每遍歷出乙個父選單及其下所有子選單,就追加到lt.text上,形成乙個字串格式的內容

lt.text += "" + head + "

" + content + "";}

}//最後將拼接好的字串返回,這裡的返回的lt.text就是上面getaccordionasync方法中成功後得到的資料result

response.write(lt.text);

四.生成accordion選單後,在頁面首次載入時呼叫accordion方法,使之能夠滑動

有以下幾種動態樣式:

1.$("#accordion").accordion();預設樣式

2.$("#accordion").accordion();

選單項是否使用相同高度,false為自動適應內容高度,true為所有選單高度相同,一般使用false

3.$("#accordion").accordion();

滑鼠移上時觸發滑動效果

以上三個位常用的效果,其他還有一些可以參考demo裡的方法

菜鳥部落格第一彈

隨著乙個多月的大學生活結束,今天終於開始了畢業的第一天工作。請了40多天的假,本來以為工作會悲劇的。但到公司同事和領導的關心使我擔心的小心感到了溫暖。早就想實現這個計畫,想在正式工作的時候寫部落格,也就是想記錄下每天的工作和每天的心情。寫博主要是記下這剛開始艱苦的歲月,不求對別人幫助,本人是菜鳥,歡...

oracle學習第一彈

每當我們建立資料庫例項的時候,就會自動的建立三個使用者 sys使用者 超級管理員,許可權最大 system使用者 系統管理員 scott使用者 普通使用者 有三種方式登入oracle資料庫 1.命令列sqlplus 2.sql developer 3.企業管理器,通過web訪問 sql plus是o...

日常翻譯 第一彈

第一題鏈結 題意 夏洛克和華生正在玩乙個遊戲 nim 這個遊戲有n堆石子被標註成piles1,piles2,pilesn n是石子最大堆數 夏洛克總是第乙個,華生跟他交替進行操作 在每一次操作中都有且只有兩種可能的情況 1.選擇一堆並且從中拿走k個石子,k 0 2.從每一堆石子中都拿走k個石子,k ...