*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2014年9月21日 星期日

按A就會跑出/隱藏B的互動設置:jQuery



按A就會跑出/隱藏B的互動設置
jQuery 基礎互動寫作
比較細節的內容或資料,一般我們不會馬上就放在頁面上,而是藏起來。
等讀者有感覺了,想看了,再「按一下」 之後的跑出來。以免太多資料內容,把讀者嚇壞 了。



教學示範範例:
海軍官員說,立法院通過近8億元翻修【←click】老舊的海獅級潛艦預算 後,將開國內標,由台船擔任主合約商,再由台船、聯設中心與海軍潛修中心組成維修團 隊。因為台船沒有合適船塢,更換後段船殼工作,將 在海軍乾塢進行,若預算審查順利,預計明年第二季展開維修工程。

官員說,未來潛艦國造將選擇較簡單的構型,暫時擱置絕氣系 統(AIP)。「飛鏢計畫」為荷蘭造海龍級加裝潛射魚叉飛彈工程,首艘已近完成,可望在台灣海域進行試射。

林郁方說,整修海獅級未尋求美方協助,台船與海軍都認為有能力更換船殼,但因應艦殼拆開後,原來貼壁管線可能遭遇無法預期的問題,整修預算已從 4億5000萬元提升到8億元。可提供技術協助的國家,不是只有美 國,也有歐洲國家。



一、影音教學

二、置放 jQuery 主程式
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

說明:
  1. 請將主程式置放於<body>之後。

三、為要「開啟/隱藏」的編輯元素設 ID
  1. 操作程序:選定元素【本例 DIV】 > HTML > 屬性(按二下)>  HTML屬性 > 選擇【ID】 > 內含值
  2. 如一開始要設定隱藏,語法: stye="display: none;" 。

四、設置要互動的寫作元素及互動程式
javascript: $('#a004').slideToggle(800);

說明:
  1. 上列互動語法是要放在「要按下去」的「編輯元素」裡面的,此例是文字。
  2. slideToggle是指:如果開啟的,按下去就會「隱藏」;如果是隱藏的,按下去會「開啟」。程式會自動判斷。
  3. 紅色字體處,是步驟三所設定的ID代碼。800,即藍色字體處,是「速度」。一秒是1000。
  4. 設置的操作:span【本例文字】 > HTML > 屬性【按二下】>  JavaScript事件 > 屬性 >選擇【onclick】> 內含值【程式置入處】
  5. 移過去想跑出滑鼠 icon 的 CSS:style="cursor: pointer;" 。




沒有留言:

張貼留言