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;
};
});
})();
https://www.monkfishjowls.com/광주은행-영업시간-전국안내
acquistare farmaci senza ricetta: kamagra – farmaci senza ricetta elenco
That is a great tip especially to those fresh to the blogosphere. Brief but very accurate info… Many thanks for sharing this one. A must read post.
Fafabet South Africa
https://fafabet-casino.com
Step into the thrilling universe of Fafabet’s casino, a place pulsating with excitement and brimming with opportunities for big wins! Whether you’re a seasoned gambler or a curious newcomer, this review will guide you through the vibrant selection of top-tier games, enticing bonuses, effective strategies, and seamless mobile play. Get ready to transform your gaming experience and discover why Fafabet is the go-to destination for online casino enthusiasts!
Best Casino Games at Fafabet
brings the excitement of a real casino directly to your screen, featuring a curated selection of games that cater to both new and seasoned players. The focus on popular games such as roulette, blackjack, and poker ensures a varied and engaging experience, providing options for strategic play, quick wins, and everything in between. This selection is not just about variety; it’s tailored to enhance player engagement and retention. The inclusion of games with different levels of complexity and reward strategies meets the diverse needs and preferences of the global online gambling community, making Fafabet a top choice for live casino enthusiasts.
Choose Your Game: Online Roulette, Blackjack, Poker
The heart of Fafabet’s live casino lies in its comprehensive offering of classic games, which are among the most popular and enduring in the gambling world. Let’s focus on the star of the casino floor: Roulette. This game not only attracts players with its simplicity and elegance but also offers various versions to suit different tastes and betting styles.
Benefits of mobile application
pin up casino aviator download apk
Today, it is very popular among gambling companies to create mobile applications for the users who use the phone the most. Many users download a pin-up program to take advantage of this program, which is the functionality of the browser version of the gambling platform.
If you decide to download the Pin-up mobile application, you can use this application. The company’s employees care about the comfort of their users. The program has many fans from the world of gambling. The company has worked hard to develop the program.
the profit
intuitive interface;
attractive design;
Various sporting events and gambling entertainments;
high speed of application;
economical use of Internet traffic;
Fixed access to the application, unlike the browser version.
where to download apps for android
There are several ways to download a pin-up program:
The download file is downloaded directly from the official website of the virtual gambling company. This is the safest and most reliable method because you do not need to be afraid of scammers when downloading from the site;
It is also recommended to download programs from third-party sites, but first you need to make sure that it is the original file, as scammers can offer you the wrong file.
Downloading the file is very fast and simple, even the most inexperienced user can easily install this program. On the official website of the company there are detailed instructions on how to install the file on Android.
Boost kasiino – ametlik kodulehekulg Eestis: taielik ulevaade
big boost casino
on Eesti mangurite seas kiiresti populaarsust kogunud. Kaesolevas artiklis vaatleme, miks Boost casino eesti on saavutanud sellise edu, kasitledes selle peamisi funktsioone ja pakutavaid teenuseid, sealhulgas manguvalikuid, boonuseid ja kasutajasobralikku liidest.
Boostcasino Mangude Ulevaade
Boost Casino pakub laia valikut ponevaid mange, mis meeldivad igale mangijale, alates algajatest kuni kogenud hasartmangusopradeni. Selles jaotises saate teada, milliseid erinevaid mange Boost Casino pakub, sealhulgas populaarseid manguautomaate ja lauamange, samuti live-kasiino voimalusi, mis pakuvad mangijatele toelist kasiinokogemust mugavalt oma kodus.
Slotid ja Lauamangud
Boost Casino’s on esindatud sadu slotimange erinevatelt arendajatelt, nagu NetEnt, Microgaming ja Play’n GO, mis tagab kvaliteetsed graafikad ja sujuva mangukogemuse. Lisaks klassikalistele slotidele leidub laialdaselt lauamange, sealhulgas:
1. Blackjack: Mitu varianti, nagu klassikaline, Euroopa ja Vegas Strip.
2. Rulett: Euroopa, Ameerika ja Prantsuse rulett.
3. Baccarat: Punto Banco ja kiire tempo baccarat.
Nende mangude RTP (Return to Player) maarad on tavaliselt vaga konkurentsivoimelised, mis tostab mangijate voiduvoimalusi. Boost Casino uuendab regulaarselt oma mangude valikut, pakkudes uusi ja ponevaid variante.
Hi there, simply become aware of your blog thru Google, and found that it is truly informative. I’m gonna be careful for brussels. I will be grateful should you continue this in future. Lots of other folks can be benefited out of your writing. Cheers!
ISIS-inspired suspect planned suicide attack at Taylor Swift concert, Austrian authorities say
1xbet new account promo code
Police in Austria have questioned three teenagers suspected of plotting a suicide attack at a Taylor Swift show, sparking renewed concerns over the indoctrination of young people online.
Foreign intelligence agencies helped authorities uncover the alleged scheme, according to the country’s Interior Minister Gerhard Karner. A source familiar told CNN that the US issued a warning to authorities in Vienna.
Organizers canceled three concerts, which were scheduled to take place in the European capital from Thursday to Saturday. CNN has reached out to Swift’s representatives for comment.
Investigators unearthed a stockpile of chemicals, explosive devices, detonators and 21,000 euros in counterfeit cash at the home of the main suspect, a 19-year-old ISIS sympathizer who had been radicalized online, according to authorities.
The young man – who was arrested Wednesday morning in the eastern town of Ternitz – planned to kill himself and “a large number of people,” according to the head of the domestic intelligence agency, Omar Haijawi-Pirchner.
“He said he intended to carry out an attack using explosives and knives,” Haijawi-Pirchner told reporters in Vienna on Thursday. “His aim was to kill himself and a large number of people during the concert, either today or tomorrow.”
Two other suspects were detained, aged 17 and 15. The 17-year-old worked for a facilities company that would have provided services at the concert venue. He was near the stadium when he was arrested and had recently broken up with his girlfriend, according to Haijwai-Pirchner.
Little has been revealed about the 15-year-old. Prosecutors will decide later if he was a witness or directly involved in the alleged plot.
The three are all Austrian-born with either Turkish, North Macedonian or Croatian backgrounds.
A chainsaw amnesty is protecting the rainforest in Borneo
лабфою
Borneo was once covered in lush, dense rainforests, but they are rapidly disappearing. The Southeast Asian island, roughly three times the size of the UK, has lost half its forest cover since the 1930s, destroying precious habitat for wildlife such as the critically endangered orangutan, as well as valuable carbon stores.
A non-profit called Health in Harmony (HIH) is asking farmers to hand in their chainsaws in return for money, and a chance to set up an alternative livelihood.
Borneo is divided between Indonesia, Malaysia and Brunei, and it is estimated that up to 10% of its land is taken up by industrial palm oil and logging operations. But deforestation isn’t just about large-scale tree clearance; some of those behind the logging are small-scale farmers, cutting trees as a sideline to make ends meet.
Buyback and healthcare
HIH launched its chainsaw buyback scheme in 2017, under the group’s Indonesian name, Alam Sehat Lestari (ASRI). Farmers who illegally log and sell the wood to timber companies are given around $200 for their chainsaws, as well as up to $450 in financial support for them to set up an alternative, sustainable livelihood, such as opening a shop, organic farming and even beekeeping.
The scheme also involves addressing the root causes of the problem. According to HIH, many of the farmers who turn to logging do so because they need the money for basics like healthcare.
“They live far from the healthcare clinics, and they see logging as a place where they can get quick cash,” explained Mahardika “Dika” Putra, conservation program manager at HIH. “If they need this amount of money, they cut this amount of trees.
“We asked what solutions they think they need to live in harmony with the forest and they said, ‘high quality, affordable healthcare, and training in organic farming.’”
its great as your other articles : D, regards for posting .
Baji Live Casino Overview
https://bajilive-casino.com
Every casino in the world claims that its uniqueness and originality are the reasons for their existence, but what makes Baji Live casino so special is its unique history and modern technologies. Baji Live Casino is not only a place where you can bet your money on games; it’s also a blending of technology and the user interface that altogether gives an unprecedented gaming experience.
History and Licensing
Baji Live Casino is licensed by the Curacao Gaming Commission, one of the most problematic and legitimate online casino licences in the world. Why they chose Curacao would do Columbus be the most peaceful and the most economically sound. The most important thing is the game poker license of Curacao. It has these kinds of features:
International Rights: Curacao’s gaming license is known for its honesty and transparency. It is accepted in many countries and is a legal way for operators to launch services into a wider spectrum of markets worldwide.
Regulation with Control: Baji Live Casino should stay according to a variety of the different regulations which are the part of the license such as game fairness, user data protection, and the conduct of responsible gaming and security measures.
Audits and Checks: An auditing team is responsible for conducting regular control procedures of the casino. They are bankrolled by eCOGRA, and their ultimate aim is to ensure casino compliance with convenient, fair play and user safety requirements.
Transaction Security: Curacao is the place where special attention is paid to the protection of financial transactions, which is essential to the safety and prevention of fraud among the players as well.
For additional access and to alleviate blockers, our website provides mirror URLs like baji live 365, baji live 999, and baji 888 live. By means of this service, users can make requests as though they are in an unrestricted area and carry out transactions. The whole system, also, gives a high level of trust and security to Baji Live Casino users, which of course makes it really attractive to everybody that wants to either learn or play at an online casino. The stick to such strict licensing standards is the evidence that Baji Live I not only manages, but it is also strengthening its image as a reliable and responsible gambling provider in the market.
Hello! This is my first visit to your blog! We are a group of volunteers and starting a new project in a community in the same niche. Your blog provided us useful information to work on. You have done a outstanding job!
acquistare farmaci senza ricetta: kamagra gel prezzo – Farmacie on line spedizione gratuita
farmacia online: avanafil generico – top farmacia online
Aw, this was an extremely good post. Taking a few minutes and actual effort to generate a really good article… but what can I say… I procrastinate a whole lot and don’t seem to get nearly anything done.
farmacie online sicure: Tadalafil generico migliore – top farmacia online
Good publish, introducing this to my website today, cheers. >
I’m pretty pleased to find this page. I need to to thank you for your time just for this wonderful read!! I definitely savored every little bit of it and I have you book marked to look at new things on your website.
Thank you a lot for giving everyone an extraordinarily special possiblity to check tips from here.
Perfect work you have done, this site is really cool with wonderful info .
pillole per erezioni fortissime: viagra online – gel per erezione in farmacia
Feel free to visit my page … best online poker real Money
Everything is very open with a really clear description of the issues. It was definitely informative. Your site is very helpful. Thank you for sharing!
farmacia online piГ№ conveniente: kamagra – farmacie online affidabili
trileptal cheap – cheap pirfenex levoxyl uk
what’s Happening i’m new to this, I stumbled upon this I’ve found It positively helpful and it has helped me out loads. I hope to contribute & help other users like its aided me. Good job.
Отличный сайт! Всем рекомендую!справочник
https://itshareit.tistory.com/214
Farmacia online piГ№ conveniente: Cialis generico recensioni – farmacie online sicure
Let me start by saying nice post. Im not sure if it has been talked about, but when using Chrome I can never get the entire site to load without refreshing many times. Could just be my computer. Thanks.