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標籤,下圖案例是希望可以產生三個頁籤。
在a標籤中加入ng-click=”tab = 1″、ng-click=”tab = 2″、ng-click=”tab = 3″去設定當使用者按下連結後tab變數會隨著變化,另外為了方便觀察是否成功,在頁面上利用表達式將tab變數顯示出來。
若一切順利,在我們按下不同的頁籤連結時,畫面上應該會有數字上面的變化。
接下來開始製作點選頁籤後的內容頁面,同樣的內容頁面也應該有三個才對,在HTML中產生三個div,其中套用Bootstrape所提供的CSS panel類別,div的內容部分可依照需求置入。
在div中利用ng-show去判斷tab變數的值來切換顯示。
完成後,在我們點選不同的連結時,內容的部分也應該會隨著變動。
接下來我們在section標籤中設定ng-init=”tab=1″的屬性來決定tab變數的初始值。
接下來在li內新增ng-class的屬性,依tab變數的值來切換active的CSS屬性(該屬性由Bootstrape提供樣式),其中三個連續的等號是判斷該變數與值完全相同的意思。
這個動作的目的是希望當網友點選之後,可以如下圖所示,清楚的標示目前頁面上所顯示的是第幾個項目。
到目前為止,大概就完成了我們希望呈現的頁籤效果,大家可以透過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屬性刪除了。
在ng-click後去執行控制器中的selectTab函數,並且針對該函數帶入不同的值,利用帶入的值來改變tab變數值。
在ng-click後去執行控制器中的isSelected函數,也帶出不同的值給函數,讓函數可以回傳tab===1或2、3這樣的內容給ng-show使用。
這樣一來我們邏輯判斷的部分就會和網頁內容有所區隔,大家也可以透過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; }; }); })();
Nice post. I learn something new and challenging on blogs I stumbleupon on a daily basis. It’s always interesting to read content from other writers and practice something from other web sites.
Ламинат легко укладывается и не требует особого ухода, что делает его отличным выбором для тех, кто ценит практичность и красоту. Благодаря своей прочности и долговечности, кварцвиниловый ламинат будет радовать вас и вашу семью на протяжении многих лет, сохраняя свой первоначальный вид и качество. https://kvarcvinil5.ru/
Excellent post! We are linking to this great content on our site. Keep up the great writing.
https://pharm24on.com/# nearby pharmacy store
nexium mexico pharmacy
Early to bed and early to rise helps make a gentleman healthy, wealthy and sensible.
I Just stopped by to say your article is great. The clarity in your post is simply spectacular and i can assume you’re an expert on this subject. Fine with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please continue the enjoyable work.
.
Работая с Романом Василенко, я понял, что для него важнее всего честность и прозрачность в бизнесе. Он постоянно стремится к саморазвитию, посещает различные финансовые курсы, чтобы оставаться в курсе новейших тенденций и предлагать своим пайщикам только лучшее. Кооператив “Бест Вей” работает по понятным и прозрачным правилам. Здесь нет скрытых условий или непредвиденных платежей. Все четко и ясно: внести первый взнос, ждать своей очереди и в итоге получить свое жилье. Пайщики знают, что могут доверять Роману, потому что он всегда выполняет свои обещания и делает все возможное для их благополучия.
Have you tried twitterfeed on your blog, i think it would be cool.:**-;
us online pharmacy viagra: protonix pharmacy – australia online pharmacy viagra
https://onlineph24.com/# zyprexa pharmacy online
can you buy viagra in a pharmacy
Feel free to surf to my web page; Daycare Near Me – Find The Best Daycares Near You
DSK Как проходит расстановка. https://rasstanovkiural.ru
I really like this article. You can send any article like this. Playmods
Good site you have got here.. It’s difficult to find quality writing like yours nowadays. I seriously appreciate individuals like you! Take care!!
It¦s in reality a great and helpful piece of information. I¦m satisfied that you shared this helpful information with us. Please stay us up to date like this. Thanks for sharing.
pyridostigmine drug – cost imuran brand imuran
Great site! I recommend it to everyone!realistic dildos
What’s Happening i am new to this, I stumbled upon this I have found It positively useful and it has helped me out loads. I hope to contribute & assist other users like its helped me. Good job.
Having Get Reports Write-up Submission move Product, you can actually shift deeper and even speedier than you’ve ever imagined on the subject of what you can do internet.
I’ve been gone for a while, but now I remember why I used to love this site. Thanks, I will try and check back more often. How often do you update your website?
i wish to have some diamond necklace but they are quite expensive::
Hi this is somewhat of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding skills so I wanted to get advice from someone with experience. Any help would be greatly appreciated.
Absolutely composed written content , thanks for information .
An fascinating discussion may be worth comment. I’m sure that you can write much more about this topic, it will not become a taboo subject but generally individuals are not enough to talk on such topics. An additional. Cheers
OYM Расстановки по Хеллингеру, все о методе семейных расстановок. https://rasstanovkiural.ru
Aw, i thought this was an extremely good post. In notion I must invest writing like that moreover – taking time and actual effort to have a excellent article… but what things can I say… I procrastinate alot through no means find a way to get something done.
Pretty section of content. I just stumbled upon your weblog and in accession capital to assert that I acquire actually enjoyed account your blog posts. Anyway I will be subscribing to your augment and even I achievement you access consistently quickly.
Great site! I recommend it to everyone!anal training kit
i would love to get some free calendars on the internet, are there are sites or company that gives one?,