2015年3月9日 星期一

[教學] jQuery學習筆記 第三堂(建立閱覽畫面:顯示show、隱藏hide、切換toggle)


第三堂課要建立閱覽畫面,也就是我們可以透過按鍵來顯示、隱藏或切換文章內容。

讓我們先來看看完成的結果

這一堂課會學到的語法包含:

hide( ) / show( ) / toggle ( )

建立閱覽畫面

首先,我們利用div這個HTML標籤,來建立一個如同下圖的網頁。div的意思是division,也就是區塊的意思。


接下來我們想在不同的區塊內,輸入不同的內容,我找了一篇我喜歡的何權峰醫師所寫的文章(原文轉自:天下雜誌)。

等等就要學著在上方的區塊中,分別建立「顯示」、「隱藏」和「切換」這三個之後會使用到的功能列;下方的區塊則放入剛剛我所找的文章。

上方區塊文字建立

一種寫法是直接將我們想要的格式(style)寫在區塊(div)中,如下圖:


另一種寫法是建立id的方式,先把id建立好,接著只要在div的地方引入id就可以了(id的建立方式是使用#,還記得嗎?),如下圖:


下方區塊文字建立

下方的區塊,我們就貼入在網路上找到的文章,貼上文章後,記得要用先前所提的 brp 來整理一下文章的段落。這兩個和前面提的 div 一樣,都是HTML標籤。其中, br 是換行的意思
接著, p 則是段落的意思。也就是說,如果你想要在同一段落<p>裡面,換行的話,就會需要用到<br>。

另外一提的是,大部分的HTML標籤都會有一個開頭,和一個結束,像<p>就是表示段落開始,最後的</p>則表示段落結束。但是<br>比較特別,它就是一個單純的換行符號,所以不需要開頭或結束,在想換行的地方放上去就是了。

我們一樣要用id的方式建立內文的格式,建立好的格式如下圖:


建立假超連結

建立好文字後,我們要讓上方區塊的文字有功能,但又不是要真的進行超連結,這時候,就要來寫假的超連結,寫法就是讓超連結的網址,連到的是「#」:


在style的地方,我們同樣也可以做一些調整,來更改文字的顏色,還有各種不同功能情況下的文字型態,像是文字原本的樣子(link)、拜訪過(visited)、滑鼠移過(hover)、滑鼠按下(active):


利用jQuery讓內文根據指令改變

接下來我們就要利用jQuery來讓內文根據上面的指令動作。
一樣要先完成我們的起手勢,上面那一行是引入jQuery,下面那行是jQuery的基本語法:


第二步,記得上一堂課中我們提到,要先讓HTML裡面的元素都讀取完之後再來進行元素的操作嗎?所以我們同樣需要 $(document).ready(function( ){ } ) 這段作為開頭。



接著要轉換一下,先把每個按鍵加上id


再來就要在jQuery中,根據不同的id做不同的動作,我們使用到的是隱藏(hide)、顯示(show)、切換(toggle)這三種語法(參考jQuery API)。

還記得我們上一堂課有提到,jQuery的基本用法是 $( ).( ),第一個括號裡放的是對象,句點後放的是動作,第二個括號內裡放的是設定

所以這裡我可以先寫 $("#a1").click(function( ){ }) 意思是,當我#a1被點擊的時候,要做什麼...。

在function( ){ }我們就可以放要做什麼的內容,因為我希望當#a1被點擊的時候,我們的內容(#content)可以隱藏起來,所以就寫 $("#content").hide() 如果沒有特別的設定,hide後面的括號內就可以不用放任何東西。


其他的部分以此類推,完成後的語法如下,點a1的按鍵時隱藏內容;a2時顯示內容;a3時切換內容:


我還做了一些簡單的排版,看看完成的結果吧!

程式範例

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>閱覽頁面</title>
    <style>
        #menu{font-weight:bold; font-family:微軟正黑體; text-align:center; font-size:20px}
        #content{width:50%; margin:auto; line-height:20px}
        a:link{text-decoration:none; color:black}/*原本的樣子*/
        a:visited{color:purple}/*拜訪過的樣子*/
        a:hover{color:purple}/*滑鼠移過*/
        a:active{text-decoration:underline}/*滑鼠按下時*/
    </style>
<script src="jquery-1.11.2.min.js"></script>
<script>
    $(document).ready(function(){
        $("#a1").click(function(){
            $("#content").hide()
        })
        $("#a2").click(function(){
            $("#content").show()
        })
        $("#a3").click(function(){
            $("#content").toggle()
        })
    })
</script>
</head>
<body>
<h1 style="font-size:24px; font-family:微軟正黑體; text-align:center">很多時候事情就是這麼簡單,一次只做一件事</h1>
    <h2 style="width:50%; margin:auto; font-size:12px; font-family:微軟正黑體; text-align:right; color:gray">作者:何權峰,文章引用自:<a href="http://www.cw.com.tw/article/article.action?id=5065263" target=_blank>天下雜誌</a></h2>
<div>
    <div id="menu">
        <a id="a1" href="#">隱藏</a> 
        <a id="a2" href="#">顯示</a> 
        <a id="a3" href="#">切換</a></div>
    <div id="content">
<p>你是否覺得自己就如雜要的演員那般,終日勞碌不停?比如邊看電視、邊聊天,同時在滑手機?一邊說電話,同時整理手上郵件,並且把晚餐放進微波爐?
<br>
是否老是神魂遊走,魂不守舍。常因為恍神而打破東西、灑翻水、東西丟三忘四。經常還沒嚐食物的滋味,就已經吞下肚?
<br>
是否總是在想:什麼事要做?接下來還要做什麼事?卻沒注意到,自己現在在做什麼?
</p>
<p>
要讓失焦的生活變專注,最簡單的生活方式就是──「一次只做一件事。」如果讀書,就專心讀書,如果睡覺,就好好睡覺……不要再去想別的事。
<br>
當身體在做一件事時,如果我們的心不在,身心沒有真正整合,往往顧此失彼。當那件事做完時,又會在下一刻想著上一刻有哪些事沒做好,連帶我們下一件事也受影響,結果沒一件事做好。
例如:今天我們花了好幾個鐘頭,擔心明天學校裡一場很重要的考試,就沒辦法專心念書。如果我們躺在床上整晚睡不著覺,煩惱那些沒讀懂或是沒念完的東西,到了明天考試我們一定精疲力竭,結果考試又沒考好。
</p>
<p>
我每天都要寫作,除了報紙與雜誌的固定專欄外,還有一些臨時加進來的稿約和回讀者信。比如我這星期必須寫完三篇,在第一天我就開始想,要寫哪三篇,想到最後,可能一篇都寫不出來,因為三篇的主題、對象不同。後來,我開始一次只思考一個主題,專心寫好了,再去想第二個主題。這樣不但能如期完成,也不再陷入莫名焦慮。
</p>
<p>
想像你參加比賽,必須將兩隻豬抱到一百公尺遠的地方,如果你先抱起一隻,接著又抱起另一隻,那就永遠沒完沒了,因為老是有一隻會從你的臂彎裡溜走。
</p>
<p>
托斯卡尼尼是舉世聞名的指揮家。人生的閱歷豐富,他到過很多地方,指揮過無數的樂團,也見過無數的達官顯要。
當他八十歲時,有一天兒子好奇地問他:「在您一生中,一定有過很多重大的事,您覺得自己做過最重要的事是什麼?」
托斯卡尼尼回答說:「我現在正在做的事,就是我一生中最重大的事,不管是在指揮一個交響樂團,或是在剝一顆橘子。」
<br>
他說得對,如果你無法專心地剝橘子,如果你只想儘快剝來吃的話,你還是無法專心地吃橘子。當你一邊吃著橘子,你還是會一邊想著下一刻要做什麼,對橘子的味道無法細細地品嚐,也失去吃的樂趣。如果你不能專注在此刻,那你任何時刻都不可能專注,你將永遠被下一件事拖著走。
</p>
<p>
你可以隨時用「此刻」這兩個字提醒自己,專注在現在所做的事,「此刻,我正在讀書……,此刻,我正在散步……,此刻,我正在睡覺……,此刻,我正在和朋友聊天……,此刻,我正在品嚐甜點……。」
</p>
<p>
記住,回到此刻,專注在每個當下所做的事,其他的都不重要。

很多時候事情就是這麼簡單,一次只做一件事。

當你全神貫注於手上的事,就不會想著下一步的計畫,或掛念剛才做得好不好;也不會耽擱或擔心還沒做的事,你就可以從繁雜的事物中解脫出來。

當你全然地投入當下所做的事情,結果自會完美呈現。</div>
</div>


</body>
</html>
以上內容均為本人在馬老師雲端研究室學習所整理之筆記
Share:

0 意見:

張貼留言