Υποενότητα 4.3: Αποκάλυψη περιεχομένου

Εισαγωγή

Σε αυτήν την υποενότητα, θα εξετάσουμε τους τρόπους παρουσίασης των πληροφοριών στους χρήστες, αποκαλύπτοντας περιεχόμενο.
Θα εξετάσουμε τον τρόπο με τον οποίο θα προσθέσουμε μηνύματα – tooltips που θα εμφανίζονται όταν ο χρήστης κινεί το ποντίκι πάνω σε μια περιοχή και τα αναδυόμενα παράθυρα -modals που θα εμφανίζονται όταν ο χρήστης κάνει κλικ σε ένα σύνδεσμο ή ένα κουμπί της σελίδας.

Δείτε περισσότερα για τα tooltips

Δείτε περισσότερα για τα popovers

Δείτε περισσότερα για τα modals

Προσθήκη Tooltip

Μεταβείτε στη σελίδα index.html . Θα προσθέσουμε τώρα ένα tooltip σε αυτήν τη σελίδα. Το tooltip θα προστεθεί στο κουμπί "Reserve Table" button που βρίσκεται στο jumbotron.

Θα ενημερώσουμε την ετικέτα  <a>  για το κουμπί ως εξής:

<a type="button" class="btn btn-warning btn-sm btn-block"
  data-toggle="tooltip" data-html="true" 
  title="Or Call us at <br><strong>+ 987 6543 2100</strong>"
  data-placement="bottom" href="#reserve-form">
  Reserve your baskets
</a>

Όπως μπορείτε να δείτε από τον κώδικα, προσθέτουμε  data-toggle, data-placement και title attribute στην <a> tag για να εισαγάγουμε ένα tooltip.
Το tooltip πρέπει να ενεργοποιηθεί προσθέτοντας έναν μικρό κώδικα Javascript στο κάτω μέρος της σελίδας ως εξής:

<script>
  $(function () {
     $('[data-toggle="tooltip"]').tooltip()
   })
 </script>

Το script προστίθεται αμέσως μετά τη γραμμή εισαγωγής του αρχείου  bootstrap.min.js .

Αυτός ο κώδικας θα δημιουργήσει μια σελίδα που εμφανίζεται ως εξής:

Προσθήκη Modal

Στο επόμενο βήμα εισάγουμε το modal στην ιστοσελίδα. Για να ρυθμίσετε το modal, προσθέστε τον ακόλουθο κώδικα αμέσως μετά τη γραμμή πλοήγησης Navbar στο επάνω μέρος της σελίδας.

Modal code:

Στη συνέχεια, εισάγουμε έναν άλλο σύνδεσμο στη δεξιά πλευρά της navbar  για να ενεργοποιήουμε την εμφάνιση του modal. Για να το κάνετε αυτό, προσθέστε τον ακόλουθο κώδικα στη navbar μετά το </ul>

<span class="navbar-text">
  <a data-toggle="modal" data-target="#loginModal">
     <span class="fa fa-sign-in"></span> Login
   </a>
 </span>

Προσθέστε mr-auto class στη <ul> της navbar ως εξής:

<ul class="navbar-nav mr-auto">

Εισαγάγουμε έναν άλλο σύνδεσμο στα δεξιά της  navbar  χρησιμοποιώντας το navbar-text και χρησιμοποιώντας τη mr-auto class στο <ul>. Αυτός περιέχει έναν σύνδεσμο με <a> tag με data-toggle="modal" και data-target="#loginModal" attributes.

Αυτός ο κώδικας θα δημιουργήσει μια σελίδα που εμφανίζεται ως εξής:

Do a Git commit

Κάντε μια  Git commit with the message με το μήνυμα "Tooltip and Modal".

Σε αυτήν την υποενότητα, ερευνήσαμε tooltips και modals ως δύο τρόποι αποκάλυψης περιεχομένου για τον χρήστη κάνοντας κλικ σε ένα κουμπί ή ένα σύνδεσμο.