2016年6月6日 星期一

只抓片段的 .load()

在 jQuery 中,可以透過 .load() 來抓取其他頁面的資料。

一般來說,我可能只會用到  $("#divContent").load("pageB.htm");

但最近發現,.load(url)  裡的 url ,除了可以填入網址外,也可以透過類似 jQuery 的 select 條件,對 url 的內容進行條件篩選。

舉例來說,$("#divContent").load("pageB.htm div");   ,就可以抓取 pageB.htm 的內容,同時過濾資料,只取有 div 的內容。

同樣的,$("#divContent").load("pageB.htm #myDiv"); ,則是只抓取 pageB.htm 裡 ID 為 myDiv 的內容。

假設 pageB.htm 的內容如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    AAAAA<br />
    BBBBB
    </div>
    <div id="myDiv">
    CCCCC
    </div>
    </form>
</body>
</html>

那 $("#divContent").load("pageB.htm #myDiv");  的結果,就只會出現 :CCCCC   了!

參考:
01..load()
02.loading page framents with Jquery AJAX

Bootstrap 上的 Carousel 輪播

每個輪播元件,其實都各有特色。

而 Bootstrap 自己也有提供一個輪播元件,效果還蠻不錯的。


提供了上下頁切換、索引切換、圖片說明等功能。

<!DOCTYPE html>
<html>
<head>
   
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>照片輪播</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

 <meta charset="utf-8" />
</head>
<body>
    <div  id="photoCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
        <!-- 瀏覽控制器-->
        <ol class="carousel-indicators">
            <li data-target="#photoCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#photoCarousel" data-slide-to="1"></li>
            <li data-target="#photoCarousel" data-slide-to="2"></li>
        </ol>


        <!-- 建立相片清單-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://www.discuss.com.hk/attachment.php?aid=2324556&nothumb=yes" />
                <!--加上照片說明-->
                <div class="carousel-caption">
                    <h3>照片說明</h3>
                    <p>這是我們第一次牽手的地方</p>
                </div>
            </div>
            <div class="item">
                <img src="http://image5.tuku.cn/pic/wallpaper/fengjing/zhenhanweimeideziranjingguanbizhi/007.jpg"  />
                <!--加上照片說明-->
                <div class="carousel-caption">
                    <h3>照片說明</h3>
                    <p>這是我們第一次相見的地方</p>
                </div>
            </div>
            <div class="item">
                <img src="http://www.bz55.com/uploads/allimg/120813/1-120Q3092433.jpg" />
                <!--加上照片說明-->
                <div class="carousel-caption">
                    <h3>照片說明</h3>
                    <p>這是我們第一次約會的地方</p>
                </div>
            </div>
        </div>

        <!--上下一張控制-->
        <a class="left carousel-control" href="#photoCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#photoCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

    </div>
</body>
</html>



Carousel 輪播元件的使用,只要在 div 將 class 指定為 carousel slide 就可以了。data-ride="carousel" ,則是讓 Carousel 在頁面上一載入就開始執行輪播。data-interval="3000" 則是設定每3秒換一張圖片。

《瀏覽控制器》,這指的是圖片上會出現的小白點、小圈圈,如果你有四張圖片要輪播,就會有四個小白點。他是透過 <ol> 、 <li> 來完成的。ol 頁籤需要加上 carousel-indicators 樣式類別,而 li 頁籤,則是需要指出 Carousel 元件 ID : data-target="#photoCarousel",輪播順序:data-slide-to="0" ...,而第一個 li 頁籤還需加上  class="active" ,表示是從這裡開始的。

《建立相片清單》,則是實際用來定義照片來源集合的地方。他是由兩層 div 來完成。第一層是容器,第二層則是個別每一張圖片的定義。首先看第一層,僅需加上樣式類別 carousel-inner 即可。接著看第二層,則是加上樣式類別 item,不過,第一個圖片需額外多加一個  active 的樣式類別。

在第二層的 div 裡,可以看到 <img> 頁籤,他的 src 屬性,就是用來指出照片來源 URL。如果還需要對照片加上說明的話,可以在此多加一個具有樣式類別 carousel-caption 的  div:<div class="carousel-caption"> ,在這 div 裡,可以顯示照片說明。

《上下一張控制》,則是在照片的左右邊各產生一個按鈕,讓你可以操作上一頁、下一頁的動作。data-slide="prev" 、data-slide="next" 分別指出了動作行為,而按鈕的形狀,則是用 <span> 以樣式類別 glyphicon glyphicon-chevron-left、glyphicon glyphicon-chevron-right 所產生的圖形來表示。


參考:

01:Bootstrap Carousel Plugin
02:網頁程式設計的16堂課: HTML5‧CSS3‧JavaScript ‧jQuery‧AJAX‧Bootstrap‧Google Maps

2016年6月2日 星期四

讓 Bootstrap 製作的 NavBar 能夠永遠出現在螢幕的上方

當畫面內容漸多時,我們就會透過捲軸來捲動頁面,而原先放在頁面最上面的 NavBar 也就會因為往下捲動而消失。為了讓 NavBar 可以不因捲軸的捲動而消失,永遠停在最上面,其實還蠻簡單的,只要  nav  多加一個樣式 navbar-fixed-top 就可以達到。

<nav class="navbar navbar-default navbar-fixed-top">

但過沒多久,你就會發現,加上 navbar-fixed-top 後,原先的 NavBar 很像浮起來似的,永遠固定在螢幕上面,但麻煩的是,我原先設計在 NavBar 下方緊鄰的內容,會因為被 NavBar 遮蔽而永遠看不到。


正如上圖,項目a ~ 項目c,都會一直被遮住。這問題,我在 twitter bootstrap navbar fixed top overlapping site 找到了答案。只需要將 body 的樣式,加上  padding-top: 70px; 就可以解決。

程式碼如下:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyPage.aspx.cs" Inherits="bot02.MyPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <style> body { padding-top: 70px; }</style>
</head>
<body>
    <form id="form1" runat="server">
        

        <nav class="navbar navbar-default navbar-fixed-top">
           
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">正妹快搜網</a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            
                <div id="myNav" class="collapse navbar-collapse">
                    <ul class="navbar-nav nav">
                        <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-heart"></span> Tour</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Photography</a></li>
                        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> About US <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="glyphicon glyphicon-plane"></span> 經營理念</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-user"></span> 攝影團隊</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 加入我們</a></li>
                            </ul>

                        </li>
                    </ul>
                </div>
           
        </nav>
        <div >
            項目 a<br />
            項目 b<br />
            項目 c<br />
            項目 d<br />
            項目 e<br />
            項目 f<br />
            項目 g<br />
            項目 h<br />
            項目 i<br />
            項目 j<br />
            項目 k<br />
            項目 l<br />
            項目 m<br />
            項目 n<br />
            項目 o<br />
            項目 p<br />
            項目 q<br />
            項目 r<br />
            項目 s<br />
            項目 t<br />
            項目 u<br />
            項目 v<br />
        </div>
    </form>
</body>
</html>



參考:

01:twitter bootstrap navbar fixed top overlapping site

利用 Bootstrap 建立簡易的 NavBar


雖說用來製作 NavBar 的元件其實有很多,但會想試著使用 Bootstrap,實在是他太火紅了,簡直就像是一位專業的美編在你身邊,專業到連他說什麼我都聽不懂,因為他幫我定義好的東西太多了,讓我不得不好好一邊 K文件一邊做筆記。

首先在自己的頁面上,需要先將會引用到的 .css、 .js  加上去,只不過,為了讓手機使用者在瀏覽頁面時不要看得太吃力,所以加上了 @media 來設定 viewport,頁面的開始,就從下面開始說起:
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

   
</head>

第一個 <meta http-equiv="X-UA-Compatible" content="IE=edge"> ,是為了讓 IE 能夠相容而做的設定。

第二個 <meta name="viewport" content="width=device-width, initial-scale=1"> ,則是用來設定 ViewPort,我指定他的寬度跟我設備的寬度一樣,預設的縮放則是設為 1 ,表示使用原尺寸 100%。initial-scale 可以設定從 0 ~ 10.0 的範圍,數值小於 1 表示縮小,大於 1 表示放大。

接下來,則是分別引用了 bootstrap 的 css、jQuery 的 js 以及 bootstrap 的 js 。

而 NavBar 的主角,則是使用  <nav></nav> 來登場。而這裡要注意的,則是有一大堆的 class 要慢慢分清楚並對應到正確的元件上來使用。

這個 <nav class="navbar navbar-default"> ,我們指出是要使用 navbar 的樣式類別,而且是還額外要用 navbar-default 這樣式。

為了讓手機這類小螢幕的裝置可以清楚的顯示,bootsrtap 讓我們可以在當畫面寬度小於 768px 時,自動把 NavBar 以垂直折疊的方式來顯示。


所以我們要用一個 div 來定義所謂的 navbar-header 。

<div class="navbar-header">
 <a href="#" class="navbar-brand">正妹快搜網</a>
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
 </button>
</div>

<a href="#" class="navbar-brand">正妹快搜網</a> ,是我們看到的 Navbar 標題。而後面的 button ,則是透過 三條 橫線來表示,這裡的橫線則是使用 span 並指定他的 class 就可以使用 bootstrap 已經幫我們定義好的樣式直接使用。

關於這個 button 還有幾個可以說明。
class="navbar-toggle",表示這個 button 的樣式是使用 navbar-toggle
data-toggle="collapse",表示按鈕按下的動作是屬於「折疊」的方式
data-target="#myNav",表示這個按鈕對應到表單的哪個元件 ID,#myNav 是接下來要介紹的元件ID。


<div id="myNav" class="collapse navbar-collapse">
 <ul class="navbar-nav nav">
  <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-heart"></span> Tour</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Photography</a></li>
  <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> About US <span class="caret"></span></a>
   <ul class="dropdown-menu">
    <li><a href="#"><span class="glyphicon glyphicon-plane"></span> 經營理念</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 攝影團隊</a></li>
    <li class="divider"></li>
    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 加入我們</a></li>
   </ul>

  </li>
 </ul>
</div>

現在登場的,則是重要的角色,因為 NavBar 裡的所有項目,都是定義在這裡。因為要寫很多,所以很重。

首先,使用  div ,而他的 ID ,就姑且取名為 myNav ,也就是上面提到,要用 #myNav 要找得對象。他則是採用  collapse 樣式類別,額外加上 navbar-collapse 樣式。這個 navbar-collapse 樣式,就是讓 NavBar 在螢幕寬度小於 768px 時會被隱藏的關鍵。

選單清單可以是巢狀式多層的,每一層則是透過  <ul> <li></li> ... </ul> 來完成。

在範例的第一層裡,<ul class="navbar-nav nav"> ,指出 navbar 元件選單的樣式類別是 navbar-nav ,且額外要加上 nav 樣式。

而在 <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>,是把每個清單的項目都放在個別的 li 元件中,超連結 <a href="#"> ,裡面的 href 屬性則是定義了該選單被按下去之後,要跳轉的頁面。

這裡有個很特別的地方,就是 bootstrap 事先將很多常用的小圖 icon 都定義好了,你可以到 glyphicons 找到這些圖示。要使用的時候,僅僅只是使用一個 span 元件,然後指定他的樣式類別為 glyphicon ,而額外的樣式定義,就是那些圖示的名稱。

在一個具有子選單的 li ,它會長成這樣 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> ,class="dropdown-toggle" 表示他的樣式類別是  dropdown-toggle , data-toggle="dropdown" 則表示這是一個下拉選單。

<span class="caret"></span> 則是透過 bootstrap 所定義好的 caret 樣式類別套用到 span 裡, caret 可以讓我們產生一個到三角形的圖示。一般在選單中,也是透過這個倒三角形表示選單裡還有子選單。

第二層的選單,出現了第二個 ul 了。<ul class="dropdown-menu">,他使用的樣式類別為  dropdown-menu 。裡面的 li 基本上也是跟上一層的使用方法是一樣的。唯獨多了一個 <li class="divider"></li>,他主要也是利用 bootstrap 事先定義好的樣式類別 divider 達到在選單中呈現「分隔線」的效果。

完整程式碼如下:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyPage.aspx.cs" Inherits="bot02.MyPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  
</head>
<body>
    <form id="form1" runat="server">        

        <nav class="navbar navbar-default">
           
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">正妹快搜網</a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            
                <div id="myNav" class="collapse navbar-collapse">
                    <ul class="navbar-nav nav">
                        <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-heart"></span> Tour</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Photography</a></li>
                        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> About US <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="glyphicon glyphicon-plane"></span> 經營理念</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-user"></span> 攝影團隊</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 加入我們</a></li>
                            </ul>

                        </li>
                    </ul>
                </div>           
        </nav>

    </form>
</body>
</html>


參考:

01:網頁程式設計的16堂課: HTML5‧CSS3‧JavaScript ‧jQuery‧AJAX‧Bootstrap‧Google Maps
02:https://getbootstrap.com/components/