Carousel Modal Tooltip Dan Popover

www.siamiruyelindo.ac.
id
Carousel, Modal, Tooltip dan Popover

Pertemuan 7
Tujuan: Mahasiswa dapat memahami teknik membuat carousel, modal, tooltip dan popover
1. Carousel
How To Create a Carousel. The following example shows how to create a basic carousel with indicators and controls:
0 8 1 2 39632 000
<head>
/*letakan script CDN sebelum style*/
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
M a n u e l _ b a ta @ ya hoo .c o. id
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">


<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
Pemrograman Mobile Web


<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<img src="ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>


<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
0 8 1 2 39632 000
Add Captions to Slides
Add elements inside <div class="carousel-caption"> within each <div class="carousel-item"> to create a caption for each
slide:
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
2. Modal
<body>
0 8 1 2 39632 000
<div class="container">
<h2>Modal Example</h2>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>


<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">


<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>


<div class="modal-body">
Modal body..
</div>


<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
Add animation
Use the .fade class to add a fading effect when opening and closing the modal:

0 8 1 2 39632 000
<div class="modal fade"></div>


<div class="modal"></div>
Modal Size
Change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals. Add the
size class to the <div> element with class .modal-dialog:
Small: <div class="modal-dialog modal-sm">

Large: <div class="modal-dialog modal-lg">
Centered Modal
Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class:
<div class="modal-dialog modal-dialog-centered">
0 8 1 2 39632 000
3. Tooltip
<body>
<h3>Tooltip Example</h3>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
Positioning Tooltips
By default, the tooltip will appear on top of the element. Use the data-placement attribute to set the position of the tooltip
on top, bottom, left or the right side of the element:
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
4. Popover
The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The
difference is that the popover can contain much more content. To create a popover, add the data-toggle="popover" attribute
to an element. Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify
the text that should be displayed inside the popover's body:
<body>
<h3>Popover Example</h3>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle
popover</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
0 8 1 2 39632 000
Positioning Popovers
By default, the popover will appear on the right side of the element. Use the data-placement attribute to set the position of
the popover on top, bottom, left or the right side of the element:
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>

<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>

<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Closing Popovers
By default, the popover is closed when you click on the element again. However, you can use the data-trigger="focus"
attribute which will close the popover when clicking outside the element:
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the

document to close this popover">Click me</a>
Tip: If you want the popover to be displayed when you move the mouse pointer over the element, use the data -trigger
attribute with a value of "hover":
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Tugas 7
Buatlah sebuah buku harian online.
Ketentuan:
1. Buku harian tersebut tersebut hanya memiliki 1 halaman utama (index.html)
2. Dalam satu halaman index memiliki minimal 5 modal. Salah satu dari ke-5 modal tersebut harus berisi formulir untuk
menulis catatan harian kamu. Sementara halaman lainnya memuat catatan harian, koleksi foto atau video probadi, artikel
favorit atau jadwal kuliah yang disajikan dalam bentuk tabel. Artikel dalam modal disajikan mengikuti gaya kolom koran.
3. Pada halaman index, Kamu wajib menggunakan semua komponen yang telah dipelajari pada pertemuan 1-7 di antaranya
card, carousel, tabel dan lain-lain
4. Tutorial diunggah di facebook atau di youtube (tautannya di unggah ke facebook). Script pada area body wajib diketik
sementara isi konten website seperti artikel dan berita boleh copy paste.
5. Script pada area body wajib ditulis tangan pada folio bergaris sementara isi konten seperti berita, artikel dan informasi
lain tidak perlu ditulis hanya diberi keterangan saja. Script dan output digunting dan ditempel kembali pada buku folio
bergaris.
6. Dikumpulkan minggu depan saat pertemuan ke 8
0 8 1 2 39632 000
#MasihMudaJanganMalas

Carousel Modal Tooltip Dan Popover

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Carousel Modal Tooltip Dan Popover

Hochgeladen von

Copyright:

Verfügbare Formate

www.siamiruyelindo.ac.

Carousel, Modal, Tooltip dan Popover

Add Captions to Slides

<div class="modal fade"></div>

Small: <div class="modal-dialog modal-sm">

Large: <div class="modal-dialog modal-lg">

on top, bottom, left or the right side of the element:

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>

<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

Das könnte Ihnen auch gefallen