AngularJS – Tab 介紹篇

為了方便文章閱讀,本篇將Tab翻譯成頁籤

這個案例的複雜度會比較前面高一些,因為它不僅僅是使用我們一直提到的AngularJS,為了要製作頁面上面的一些互動效果,還加入了Bootstrape這個通常被用來當RWD的框架,不過也僅僅是套用了幾個類別,所以大家也不用太擔心,接下來我們先看一下這個案例最後希望要達成的效果頁面

在看過了目標頁面後,我們先來了解一下需要怎麼樣架構我們的HTML,首先是CSS和Javascript的引入,分別是AngularJS、jQuery、Bootstrap CSS以及Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

在HTML文件中,必須有項目清單標籤ul、li,而在ul標籤中需套用nav nav-pills這兩個css類別,這兩個類別是由Bootstrape的css所提供的,li標籤是包覆著超連結的a標籤,下圖案例是希望可以產生三個頁籤。

AngularJS Part5 Slide1
AngularJS Part5 Slide1

在a標籤中加入ng-click=”tab = 1″、ng-click=”tab = 2″、ng-click=”tab = 3″去設定當使用者按下連結後tab變數會隨著變化,另外為了方便觀察是否成功,在頁面上利用表達式將tab變數顯示出來。

AngularJS Part5 Slide1
AngularJS Part5 Slide2

若一切順利,在我們按下不同的頁籤連結時,畫面上應該會有數字上面的變化。

AngularJS Part5 Slide3
AngularJS Part5 Slide3
AngularJS Part5 Slide4
AngularJS Part5 Slide4

接下來開始製作點選頁籤後的內容頁面,同樣的內容頁面也應該有三個才對,在HTML中產生三個div,其中套用Bootstrape所提供的CSS panel類別,div的內容部分可依照需求置入。

AngularJS Part5 Slide5
AngularJS Part5 Slide5

在div中利用ng-show去判斷tab變數的值來切換顯示。

AngularJS Part5 Slide6
AngularJS Part5 Slide6

完成後,在我們點選不同的連結時,內容的部分也應該會隨著變動。

AngularJS Part5 Slide7
AngularJS Part5 Slide7

接下來我們在section標籤中設定ng-init=”tab=1″的屬性來決定tab變數的初始值。

AngularJS Part5 Slide8
AngularJS Part5 Slide8

接下來在li內新增ng-class的屬性,依tab變數的值來切換active的CSS屬性(該屬性由Bootstrape提供樣式),其中三個連續的等號是判斷該變數與值完全相同的意思。

AngularJS Part5 Slide9
AngularJS Part5 Slide9

這個動作的目的是希望當網友點選之後,可以如下圖所示,清楚的標示目前頁面上所顯示的是第幾個項目。

AngularJS Part5 Slide10
AngularJS Part5 Slide10

到目前為止,大概就完成了我們希望呈現的頁籤效果,大家可以透過JS Bin來測試看看到目前為止的程式碼。

<!DOCTYPE html>
<html ng-app>
<head>
<meta name="description" content="AngularJS Tabs Example 1">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>AngularJS Tabs Example 1</title>
</head>
<body>
  <section ng-init="tab=1">
    
    <ul class="nav nav-pills">
      <li ng-class="{ active: tab===1 }">
        <a href="" ng-click="tab=1">滑鼠墊</a>
      </li>
      <li ng-class="{ active: tab===2 }">
        <a href="" ng-click="tab=2">馬克杯</a>
      </li>
      <li ng-class="{ active: tab===3 }">
        <a href="" ng-click="tab=3">杯墊</a>
      </li>
    </ul>
    
    <div class="panel" ng-show="tab===1">
      <h4>馬老師雲端研究室 滑鼠墊</h4>
      <p>產品介紹...</p>
    </div>
    <div class="panel" ng-show="tab===2">
      <h4>馬老師雲端研究室 馬克杯</h4>
      <p>產品介紹...</p>
    </div>
    <div class="panel" ng-show="tab===3">
      <h4>馬老師雲端研究室 杯墊</h4>
      <p>產品介紹...</p>
    </div>
  
  </section>
</body>
</html>

在看完了上面的案例之後,我們可以觀察到程式邏輯判斷的部分都是直接撰寫在HTML頁面上,那如果我們要把邏輯判斷的部分從HTML拆開寫到Javascript檔又應該要如何處理呢?首先,不用說的當然是必須要有應用程式的建立以及控制器囉!下圖中我們開始新增控制器,並且在section標籤中,輸入ng-controller=”panelController as panel”的屬性,相信在看了前幾篇教學的同學們對於這樣的項目是再熟悉不過了!接下來在控制器中,決定tab變數的初始值,就可以把原來的ng-init屬性刪除了。

AngularJS Part5 Slide11
AngularJS Part5 Slide11

在ng-click後去執行控制器中的selectTab函數,並且針對該函數帶入不同的值,利用帶入的值來改變tab變數值。

AngularJS Part5 Slide12
AngularJS Part5 Slide12

在ng-click後去執行控制器中的isSelected函數,也帶出不同的值給函數,讓函數可以回傳tab===1或2、3這樣的內容給ng-show使用。

AngularJS Part5 Slide13
AngularJS Part5 Slide13

這樣一來我們邏輯判斷的部分就會和網頁內容有所區隔,大家也可以透過JS Bin來測試這樣的程式結構。

<!DOCTYPE html>
<html ng-app="store">
<head>
<meta name="description" content="AngularJS Tabs Example 2">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>AngularJS Tabs Example 2</title>
</head>
<body>
  <section ng-controller="PanelController as panel">
    <ul class="nav nav-pills">
      <li ng-class="{ active: panel.isSelected(1) }">
        <a href="" ng-click="panel.selectTab(1)">滑鼠墊</a>
      </li>
      <li ng-class="{ active: panel.isSelected(2) }">
        <a href="" ng-click="panel.selectTab(2)">馬克杯</a>
      </li>
      <li ng-class="{ active: panel.isSelected(3) }">
        <a href="" ng-click="panel.selectTab(3)">杯墊</a>
      </li>
    </ul>
    <div class="panel" ng-show="panel.isSelected(1)">
      <h4>馬老師雲端研究室 滑鼠墊</h4>
      <p>產品介紹...</p>
    </div>
    <div class="panel" ng-show="panel.isSelected(2)">
      <h4>馬老師雲端研究室 馬克杯</h4>
      <p>產品介紹...</p>
    </div>
    <div class="panel" ng-show="panel.isSelected(3)">
      <h4>馬老師雲端研究室 杯墊</h4>
      <p>產品介紹...</p>
    </div>
  </section>
</body>
</html>
(function(){
  var app = angular.module('store', []);
  
  app.controller('PanelController', function(){
    this.tab = 1;
    
    this.selectTab = function(setTab){
      this.tab = setTab;
    };

    this.isSelected = function(checkTab){
      return this.tab === checkTab;
    };
  });
  
})();

You may also like...

50,804 Responses

  1. spam google表示:

    Aw, this was a very good post. Spending some time and actual effort to generate a really good article… but what can I say… I procrastinate a whole lot and never seem to get anything done.

  2. Mazrnms表示:

    Привет!
    Вопросы и ответы: можно ли быстро купить диплом старого образца?
    genafond.spb.ru/forum/index.php?showtopic=185

  3. Google Genius表示:

    Your insights are invaluable.프라그마틱

  4. google spam表示:

    You have made some really good points there. I checked on the web to learn more about the issue and found most individuals will go along with your views on this site.

  5. Wwibhv表示:

    benemid medication – carbamazepine 200mg over the counter order carbamazepine 200mg without prescription

  6. I love looking through an article that will make people think. Also, thanks for allowing for me to comment.

  7. Jamesric表示:

    tamoxifen alternatives: tamoxifen headache – tamoxifen headache

  8. Dino Game 22表示:

    You need to take part in a contest for one of the finest websites on the internet. I’m going to highly recommend this website!

  9. I really like it when folks come together and share ideas. Great site, stick with it.

  10. DanielTet表示:

    buy cytotec http://lipitor.guru/# lipitor 80 mg cost
    lasix tablet

  11. Mazrvjn表示:

    Здравствуйте!
    Как получить диплом стоматолога быстро и официально
    forum.sevastopol.info/search.php?style=6&st=0&sk=t&sd=d&sr=posts&author_id=178893&start=50

  12. Jamesric表示:

    cytotec pills buy online: purchase cytotec – buy cytotec over the counter

  13. summer guys表示:

    Way cool! Some very valid points! I appreciate you writing this write-up and also the rest of the website is also very good.

  14. Jamesric表示:

    lisinopril 2.5 mg buy online: lisinopril 20 mg discount – zestril 5 mg

  15. You are so awesome! I don’t suppose I’ve truly read through a single thing like this before. So nice to discover somebody with a few original thoughts on this topic. Seriously.. thank you for starting this up. This site is something that’s needed on the web, someone with a little originality.

  16. DanielTet表示:

    Misoprostol 200 mg buy online https://lipitor.guru/# lipitor lowest price
    furosemide 40mg

  17. When I initially left a comment I seem to have clicked the -Notify me when new comments are added- checkbox and now every time a comment is added I recieve 4 emails with the exact same comment. Is there a means you can remove me from that service? Kudos.

  18. Jamesric表示:

    lipitor 20mg: buy lipitor 20mg – canada prescription price lipitor

  19. You’ve made some really good points there. I checked on the web for additional information about the issue and found most individuals will go along with your views on this site.

  20. Mazrgrg表示:

    Добрый день!
    Полезная информация как купить диплом о высшем образовании без рисков
    masters.donntu.ru/2008/fema/but/links/index.htm

  21. best price表示:

    Great site you have got here.. It’s difficult to find good quality writing like yours these days. I really appreciate individuals like you! Take care!!

  22. Way cool! Some extremely valid points! I appreciate you penning this post plus the rest of the website is extremely good.

  23. Free Poker表示:

    Feel free to surf to my web blog Free Poker

  24. Site Poker表示:

    Also visit my site Site Poker

  25. DanielTet表示:

    cytotec online https://tamoxifen.bid/# tamoxifen therapy
    buy lasix online

  26. I could not resist commenting. Well written.

  27. Jamesric表示:

    Cytotec 200mcg price: buy misoprostol tablet – buy cytotec over the counter

  28. Travel表示:

    This blog was… how do you say it? Relevant!! Finally I have found something that helped me. Kudos.

  29. Georgegig表示:

    Интернет-агентство предлагает значительный набор услуг по администрированию на сайте информационная поддержка корпоративного сайта. Работники организации гарантируют бесперебойную работу сайтов и защиту от потенциальных атак.
    Выполняем регулярный контроль и совершенствование ваших сайтов, осуществляем бэкап данных и исправляем технические проблемы. Сотрудники студии всегда готовы незамедлительно и профессионально обработать любые непредвиденные вопросы, чтобы ваш веб-ресурс продолжал быть безопасным и защищенным для посетителей. Предлагаем работы по улучшению производительности веб-сайтов, адаптации их под мобильные устройства и интеграции дополнительных функций.Профессионалы гарантируют улучшение удобства использования и интерфейса вашего проекта, обеспечат его совместимость передовым технологиям и нормам поисковиков.

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。