數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

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;" 。




沒有留言:

張貼留言