Framework7 - Krótki przewodnik

Framework7 to darmowa platforma typu open source dla mobilnego kodu HTML. Służy do tworzenia hybrydowych aplikacji mobilnych lub aplikacji internetowych na urządzenia z systemem iOS i Android.

Framework7 został wprowadzony w 2014 roku. Najnowsza wersja 1.4.2 została wydana w lutym 2016 na licencji MIT.

Dlaczego warto korzystać z Framework7?

  • Łatwiej jest tworzyć aplikacje na iOS i Androida.
  • Krzywa uczenia się dla Framework7 jest bardzo łatwa.
  • Ma wiele wstępnie zaprojektowanych widżetów / komponentów.
  • Posiada wbudowane biblioteki pomocnicze.

funkcje

  • Framework7 to open source i darmowy framework.

  • Framework7 ma łatwą i znaną składnię jQuery, aby rozpocząć bez żadnych opóźnień.

  • Aby kontrolować opóźnienie kliknięcia dotykowego interfejsu użytkownika, Framework7 ma wbudowaną bibliotekę FastClick .

  • Framework7 ma wbudowany układ siatki do szybkiego rozmieszczania elementów.

  • Framework7 dynamicznie ładuje strony z szablonów za pośrednictwem elastycznego interfejsu API routera .

Zalety

  • Framework7 nie jest zależny od żadnej biblioteki innej firmy, nawet jeśli chodzi o manipulację DOM. Zamiast tego ma własny niestandardowy DOM7.

  • Framework7 może być również używany z frameworkami Angular i React .

  • Możesz zacząć tworzyć aplikacje, gdy znasz HTML, CSS i kilka podstawowych elementów JavaScript.

  • Obsługuje szybszy rozwój poprzez Bower .

  • Łatwo jest tworzyć aplikacje na iOS i Androida bez nauki.

Niedogodności

  • Framework7 obsługuje tylko platformy takie jak iOS i Android.

  • Wsparcie społeczności online dla Framework7 jest mniejsze w porównaniu do iOS i Andriod.

W tym rozdziale omówimy, jak zainstalować i skonfigurować Framework7.

Możesz pobrać Framework7 na dwa sposoby -

Pobierz z repozytorium Framework7 Github

Możesz zainstalować Framework7, używając Bower, jak pokazano poniżej -

bower install framework7

Po pomyślnej instalacji Framework7, musisz wykonać poniższe kroki, aby użyć Framework7 w swojej aplikacji -

Step 1 - Musisz zainstalować gulp-cli do budowania wersji deweloperskich i dystrybucji Framework7 przy użyciu następującego polecenia.

npm install gulp-cli

CLI oznacza Command Line Utility dla Gulp.

Step 2 - Gulp należy zainstalować globalnie za pomocą następującego polecenia.

npm install --global gulp

Step 3- Następnie zainstaluj menedżera pakietów NodeJS, który instaluje programy węzłów, co ułatwia określanie i łączenie zależności. Następujące polecenie służy do instalowania npm.

npm install

Step 4 - Wersję programistyczną Framework7 można zbudować za pomocą następującego polecenia.

npm build

Step 5- Po utworzeniu wersji deweloperskiej Framework7 zacznij budować aplikację z dist / folder za pomocą następującego polecenia.

npm dist

Step 6 - Zachowaj folder aplikacji na serwerze i uruchom następujące polecenie do nawigacji między stronami aplikacji.

gulp server

Pobierz bibliotekę Framework7 z sieci CDN

CDN lub Content Delivery Network to sieć serwerów zaprojektowanych do udostępniania plików użytkownikom. Jeśli używasz łącza CDN na swojej stronie internetowej, przenosi to odpowiedzialność za hosting plików z własnych serwerów na szereg serwerów zewnętrznych. Daje to również tę zaletę, że jeśli odwiedzający twoją stronę internetową pobrał już kopię Framework7 z tej samej CDN, nie będzie musiał być ponownie pobierany. Do dokumentu HTML można dołączyć następujące pliki CDN.

Następujące sieci CDN są używane w iOS App layout -

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />

Służy do dołączania biblioteki CSS Framework7 iOS do aplikacji.

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />

Służy do dołączania do aplikacji stylów kolorów powiązanych z Framework7 iOS.

Następujące sieci CDN są używane w programie Android/Material App Layout -

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

Służy do dołączania biblioteki JS Framework7 do Twojej aplikacji.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>

Służy do dołączania stylizacji Framework7 Material do twojej aplikacji.

W tym samouczku używamy wersji biblioteki CDN. Używamy AMPPS (AMPPS to stos WAMP, MAMP i LAMP Apache, MySQL, MongoDB, PHP, Perl i Python) do wykonywania wszystkich naszych przykładów.

Przykład

Poniższy przykład demonstruje użycie prostej aplikacji w Framework7, która wyświetli okno alertu z dostosowanym komunikatem po kliknięciu paska nawigacyjnego.

<!DOCTYPE html>
<html>
   
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>My App</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      //you can control the background color of the Status bar
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</div>
                  <div class = "right">
                     <a href = "#" class = "link icon-only open-panel">
                        <i class = "icon icon-bars"></i>
                     </a>
                  </div>
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "envirmnt_about.html" class = "">
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Blog</div>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
         
            //get page data from event data
            var page = e.detail.page;

            if (page.name === 'blog') {
            
               // you will get below message in alert box when page with data-page attribute is equal to "about"
               myApp.alert('Here its your About page');
            }
         })
      </script>
   </body>

</html>

Następnie utwórz jeszcze jedną stronę HTML, tj envirmnt_about.html jak pokazano poniżej -

envirmnt_about.html

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left">
         <a href = "#" class = "back link">
            <i class = "icon icon-back"></i>
            <span>Back</span>
         </a>
      </div>
      
      <div class = "center sliding">My Blog</div>
      <div class = "right">
         <a href = "#" class = "link icon-only open-panel">
            <i class = "icon icon-bars"></i>
         </a>
      </div>
   </div>
</div>

<div class = "pages">
   <div data-page = "blog" class = "page">
      <div class = "page-content">
         <div class = "content-block">
            <h2>My Blog</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div>
      </div>
   </div>
</div>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako framework7_environment.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/framework7_environment.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Po kliknięciu paska nawigacji wyświetli się okno alertu z dostosowaną wiadomością.

Opis

Framework7 zapewnia różne typy układów dla Twojej aplikacji. Obsługuje trzy typy układów paska nawigacyjnego / paska narzędzi -

S.Nr Typy i opis układu
1 Układ statyczny

Układ statyczny jest najczęściej używanym typem układu i obejmuje pasek nawigacyjny i pasek narzędzi, które mogą być przewijalną zawartością strony, a każda strona zawiera własny pasek nawigacyjny i pasek narzędzi.

2 Układ stały

Stały układ obejmuje własny pasek nawigacyjny i pasek narzędzi, które mogą być widoczne na ekranie i nie mogą być przewijane na stronie.

3 Przez układ

W tym układzie pasek nawigacyjny i pasek narzędzi wydają się stałe dla wszystkich stron w jednym widoku.

4 Układ mieszany

W jednym widoku można mieszać różne typy układów.

Brak paska nawigacyjnego / paska narzędzi

Jeśli nie chcesz korzystać z paska nawigacyjnego i paska narzędzi, a następnie nie zawierają odpowiednich klas ( navbar utrwalonych , navbar-through , Pasek utrwalonych , Pasek-through ) do strony / stron / widoku.

Opis

W tym rozdziale przeanalizujmy navbar . Zwykle jest umieszczony na górze ekranu zawierającego tytuł strony i elementy nawigacyjne.

Pasek nawigacyjny składa się z trzech części, z których każda może zawierać dowolną zawartość HTML, ale zaleca się użycie ich w sposób podany poniżej -

  • Left- Jest przeznaczony do umieszczania ikon linków zwrotnych lub pojedynczego łącza tekstowego.

  • Center - Służy do wyświetlania tytułu strony lub linków do zakładek.

  • Right- Ta część jest podobna do lewej części.

Poniższa tabela szczegółowo przedstawia użycie paska nawigacyjnego -

S.Nr Typy i opis paska nawigacyjnego
1 Podstawowy pasek nawigacyjny

Podstawowy pasek nawigacyjny można utworzyć za pomocą klas navbar , navbar-inner , left , center i right .

2 Pasek nawigacyjny z linkami

Aby użyć linków w lewej i prawej części paska nawigacyjnego, po prostu dodaj tag <a> z linkiem do klasy .

3 Wiele linków

Aby użyć wielu linków, po prostu dodaj kilka dodatkowych <a class = "link"> do wybranej części.

4 Linki z tekstem i ikonami

Linki mogą być wyposażone w ikony i teksty poprzez dodanie klas dla ikon i zawijanie tekstu linku do elementu <span> .

5 Linki zawierające tylko ikony

Linki paska nawigacyjnego mogą być świadczone tylko przez dodanie ikony ikon tylko klasę linki.

6 Powiązana aplikacja i metody wyświetlania

Podczas inicjowania widoku framework7 umożliwia użycie metod dostępnych dla navbar.

7 Ukryj pasek nawigacyjny automatycznie

Pasek nawigacyjny może być ukrywany / pokazywany automatycznie dla niektórych załadowanych stron Ajax, na których pasek nawigacyjny nie jest wymagany.

Opis

Pasek narzędzi zapewnia łatwy dostęp do innych stron za pomocą elementów nawigacyjnych u dołu ekranu.

Możesz użyć paska narzędzi na dwa sposoby, jak określono w tabeli -

S.Nr Typy i opis pasków narzędzi
1 Ukryj pasek narzędzi

Możesz automatycznie ukryć pasek narzędzi po załadowaniu stron za pomocą no-toolbar klasa do załadowanej strony.

2 Dolny pasek narzędzi

Umieść pasek narzędzi na dole strony, używając toolbar-bottom klasa.

Metody paska narzędzi

Następujące dostępne metody mogą być używane z paskami narzędzi -

S.Nr Metody i opis paska narzędzi
1

myApp.hideToolbar(toolbar)

Ukrywa określony pasek narzędzi.

2

myApp.showToolbar(toolbar)

Pokazuje określony pasek narzędzi.

3

view.hideToolbar()

Ukrywa określony pasek narzędzi w widoku.

4

view.showToolbar()

Pokazuje określony pasek narzędzi w widoku.

Przykład

Poniższy przykład demonstruje użycie układu paska narzędzi w Framework7.

Najpierw utworzymy jedną stronę HTML o nazwie toolbar.html jak pokazano poniżej -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Toolbar Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Toolbar Layout</div>
               </div>
            </div>
            
            <div class = "pages navbar-through">
               <div data-page = "index" class = "page with-subnavbar">
                  <div class = "page-content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                     Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                     sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                     Sed posuere a orci id imperdiet.</p>
                     
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                     Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                     sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                     Sed posuere a orci id imperdiet.</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">Link 1</a>
                  <a href = "#" class = "link">Link 2</a>
                  <a href = "#" class = "link">Link 3</a>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
         
            // enable the dynamic navbar for this view
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

Teraz zainicjuj swoją aplikację i widoki w niestandardowym pliku JS toolbar.js.

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako toolbar.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/toolbar.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

Opis

Framework 7 umożliwia wyszukiwanie elementów przy użyciu klasy searchbar .

Parametry paska wyszukiwania

S.Nr Parametry i opis Rodzaj Domyślna
1

searchList

Przeszukuje selektor CSS lub element HTML listy.

string lub element HTML -
2

searchIn

Możesz przeszukiwać elementy widoku listy selektorów CSS, przeszukuje również elementy, przekazując klasy .item-title , .item-text .

strunowy '.Nazwa przedmiotu'
3

found

Przeszukuje selektor CSS lub element HTML za pomocą elementu „znaleziony”. Ponadto używa elementu .searchbar-found , jeśli nie określono żadnego elementu.

string lub element HTML -
4

notfound

Przeszukuje selektor CSS lub element HTML za pomocą elementu „nie znaleziono”. Ponadto używa elementu .searchbar-not-found , jeśli nie określono żadnego elementu.

string lub element HTML -
5

overlay

Przeszukuje selektor CSS lub element HTML za pomocą elementu „searchbar overlay” i używa elementu .searchbar-overlay , jeśli nie określono żadnego elementu.

string lub element HTML -
6

ignore

Możesz zignorować selektor CSS dla elementów, używając paska wyszukiwania.

strunowy „.searchbar-ignore”
7

customSearch

Gdy jest włączony, pasek wyszukiwania nie będzie przeszukiwał żadnego z bloków listy, które są określone przez searchList, a będziesz mógł korzystać z funkcji wyszukiwania niestandardowego.

boolean fałszywy
8

removeDiacritics

Podczas wyszukiwania elementu usuń znaki diakrytyczne, włączając ten parametr.

boolean fałszywy
9

hideDividers

Ten parametr ukryje separatory elementów i tytuł grupy, jeśli nie ma elementów.

boolean prawdziwe
10

hideGroups

Ten parametr spowoduje ukrycie grup, jeśli w grupach widoku listy nie ma żadnych elementów.

boolean prawdziwe

Pasek wyszukiwania wywołań zwrotnych

S.Nr Callback i opis Rodzaj Domyślna
1

onSearch

Ta metoda wywoła funkcję zwrotną podczas wyszukiwania.

Funkcje) -
2

onEnable

Ta metoda uruchomi funkcję zwrotną, gdy pasek wyszukiwania stanie się aktywny.

Funkcje) -
3

onDisable

Ta metoda uruchomi funkcję zwrotną, gdy pasek wyszukiwania stanie się nieaktywny.

Funkcje) -
4

onClear

Ta metoda wywoła funkcję zwrotną po kliknięciu elementu „wyczyść”.

Funkcje) -

Właściwości paska wyszukiwania

S.Nr Właściwości i opis
1

mySearchbar.params

Reprezentuje zainicjowane parametry przekazane za pomocą obiektu.

2

mySearchbar.query

Przeszukuje bieżące zapytanie.

3

mySearchbar.searchList

Definiuje blok listy wyszukiwania.

4

mySearchbar.container

Definiuje kontener paska wyszukiwania z elementem HTML.

5

mySearchbar.input

Definiuje wejście paska wyszukiwania za pomocą elementu HTML.

6

mySearchbar.active

Określa, czy pasek wyszukiwania jest włączony, czy wyłączony.

Metody paska wyszukiwania

S.Nr Metody i opis
1

mySearchbar.search(query);

Ta metoda przeszukuje przekazane zapytanie.

2

mySearchbar.enable();

Włącza pasek wyszukiwania.

3

mySearchbar.disable();

Wyłącza pasek wyszukiwania.

4

mySearchbar.clear();

Możesz wyczyścić zapytanie i wyniki wyszukiwania.

5

mySearchbar.destroy();

Niszczy instancję paska wyszukiwania.

Pasek wyszukiwania Zdarzenia JavaScript

S.Nr Opis wydarzenia Cel
1

search

Możesz uruchomić to zdarzenie podczas wyszukiwania elementów.

<div class = "list-block">
2

clearSearch

To zdarzenie zostanie uruchomione, gdy użytkownik kliknie element clearSearch.

<div class = "list-block">
3

enableSearch

Gdy pasek wyszukiwania zostanie włączony, to zdarzenie zostanie uruchomione.

<div class = "list-block">
4

disableSearch

Gdy pasek wyszukiwania zostanie wyłączony, a użytkownik kliknie przycisk anulowania lub element „nakładka paska wyszukiwania”, to zdarzenie zostanie uruchomione.

<div class = "list-block">

Przykład

Poniższy przykład demonstruje użycie paska wyszukiwania podczas przewijania w Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Search Bar Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages navbar-fixed">
               <div data-page = "home" class = "page">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center sliding">Search Bar Layout</div>
                     </div>
                  </div>
                  
                  <form data-search-list = ".list-block-search" data-search-in = ".item-title" 
                     class = "searchbar searchbar-init">
                     <div class = "searchbar-input">
                        <input type = "search" placeholder = "Search"><a href = "#" 
                           class = "searchbar-clear"></a>
                     </div>
                     <a href = "#" class = "searchbar-cancel">Cancel</a>
                  </form>
                  
                  <div class = "searchbar-overlay"></div>
                  
                  <div class = "page-content">
                     <div class = "content-block searchbar-not-found">
                        <div class = "content-block-inner">No element found...</div>
                     </div>
                     
                     <div class = "list-block list-block-search searchbar-found">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">India</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Argentina</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Belgium</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Brazil</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Canada</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Colombia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Denmark</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Ecuador</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">France</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Germany</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Greece</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Haiti</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Hong Kong</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Iceland</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Ireland</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Jamaica</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Japan</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Kenya</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Kuwait</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Libya</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Liberia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Malaysia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Mauritius</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Mexico</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Namibia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">New Zealand</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Oman</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Paraguay</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Philippines</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Russia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Singapore</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">South Africa</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Thailand</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">United Kingdom</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Vatican City</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Zimbabwe</div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML search_bar.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/search_bar.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Jeśli element znajdujący się na liście zostanie wpisany w pasku wyszukiwania, wyświetla ten konkretny element z listy.

  • Jeśli wprowadzony zostanie inny element niż elementy zawarte na liście, to nie zostanie znaleziony żaden element.

Opis

IOS 7+ umożliwia tworzenie aplikacji pełnoekranowych, które mogą powodować problemy, gdy pasek stanu nachodzi na aplikację. Framework7 rozwiązuje ten problem, wykrywając, czy Twoja aplikacja jest w trybie pełnoekranowym, czy nie. Jeśli twoja aplikacja jest w trybie pełnoekranowym, Framework7 automatycznie doda klasę z nakładką statusbar-overlay do <html> (lub usunie, jeśli aplikacja nie jest w trybie pełnego ekranu) i musisz dodać klasę nakładki statusbar-overlay w <body> jak pokazano w poniższym kodzie -

<html class = "with-statusbar-overlay">
...
   <body>
      <div class = "statusbar-overlay"></div>
      ...

Domyślnie <div> będzie zawsze ukryte i naprawione na górze ekranu. Będzie widoczne tylko wtedy, gdy aplikacja jest w trybie pełnoekranowym, a klasa z nakładką-statusbar-overlay zostanie dodana do <html> .

Przykład

Poniższy przykład demonstruje użycie paska stanu w Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>My App</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</div>
                  
                  <div class = "right">
                     <a href = "#" class = "link icon-only open-panel"><i class = "icon icon-bars"></i></a>
                  </div>
                  
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <p>page contents goes here!!!</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
            //get page data from event data
            var page = e.detail.page;
         })
      </script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod html jako status_bar.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/status_bar.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

Przykład pokazuje użycie statusbar-overlay, który umożliwia tworzenie aplikacji pełnoekranowych, gdy pasek stanu nakłada się na aplikację.

Opis

W panelu bocznym przesuwa się do lewej lub prawej stronie ekranu, aby wyświetlić zawartość. Framework7 umożliwia dołączenie do aplikacji do 2 paneli (prawy panel boczny i lewy panel boczny). Musisz dodać panele na początku <body>, a następnie wybrać efekt otwarcia, stosując następujące wymienione klasy -

  • panel-reveal - Spowoduje to usunięcie całej zawartości aplikacji.

  • panel-cover - Spowoduje to nałożenie panelu na zawartość aplikacji.

Na przykład poniższy kod pokazuje, jak używać powyższych klas -

<body>
   <!-- First add Panel's overlay which will overlays app while panel is opened -->
   <div class = "panel-overlay"></div>
 
   <!-- Left panel -->
   <div class = "panel panel-left panel-cover">
      panel's content
   </div>
 
   <!-- Right panel -->
   <div class = "panel panel-right panel-reveal">
      panel's content
   </div>
 
</body>

Poniższa tabela przedstawia typy paneli obsługiwane przez Framework77 -

S.Nr Typ i opis
1 Otwieranie i zamykanie paneli

Po dodaniu panelu i efektów musimy dodać funkcję otwierania i zamykania paneli.

2 Wydarzenia panelowe

Aby wykryć, w jaki sposób użytkownik współdziała z panelem, możesz użyć zdarzeń panelu.

3 Otwórz panele za pomocą machnięcia

Framework7 zapewnia funkcję otwierania panelu za pomocą gestu machnięcia .

4 Panel jest otwarty?

Możemy określić, czy panel jest otwarty, czy nie, za pomocą with-panel[position]-[effect] reguła.

Opis

Bloki treści mogą służyć do dodawania dodatkowej zawartości w innym formacie.

Przykład

Poniższy przykład demonstruje użycie bloku zawartości w Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Content Block</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Content Block</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <p>This is out side of content block!!!</p>
                     
                     <div class = "content-block">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
                        et quasi architecto beatae vitae dicta sunt explicabo.</p>
                     </div>
                     
                     <div class = "content-block">
                        <div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Title</div>
                     
                     <div class = "content-block">
                        <p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur 
                        magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. 
                        Integer blandit varius nisi quis consectetur.</p>
                     </div>
                     
                     <div class = "content-block-title">This is another long content block title</div>
                     
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
                           inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Inset</div>
                     
                     <div class = "content-block inset">
                        <div class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. 
                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, 
                           vulputate turpis vel, sagittis felis. </p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Tablet Inset</div>
                     
                     <div class = "content-block tablet-inset">
                        <div class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, 
                           vulputate turpis vel, sagittis felis. </p>
                        </div>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako content_block.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/content_block.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Kod dodaje dodatkowe formatowanie i wymagane odstępy dla treści tekstowej.

Opis

Framework7 zapewnia różne typy typów siatek, aby umieścić zawartość zgodnie z potrzebami użytkownika.

Siatka układu zapewnia różne typy rozmiarów kolumn, zgodnie z opisem w poniższej tabeli -

S.Nr Klasa Klasa tabeli Szerokość
1 col-5 tablet-5 5%
2 col-10 tablet-10 10%
3 col-15 tablet-15 15%
4 col-20 tablet-20 20%
5 col-25 tablet-25 25%
6 col-30 tablet-30 30%
7 col-33 tablet-33 33, 3%
8 col-35 tablet-35 35%
9 col-40 tablet-40 40%
10 col-45 tablet-45 45%
11 col-50 tablet-50 50%
12 col-55 tablet-55 55%
13 col-60 tablet-60 60%
14 col-65 tablet-65 65%
15 col-66 tablet-66 66,6%
16 col-70 tablet-70 70%
17 col-75 tablet-75 75%
18 col-80 tablet-80 80%
19 col-85 tablet-85 85%
20 col-90 tablet-90 90%
21 col-95 tablet-95 95%
21 col-100 tablet-100 100%
22 col-auto tablet-auto Jednakowa szerokość

Przykład

Poniższy przykład przedstawia układ siatki do umieszczania zawartości zgodnie z potrzebami w Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Layout Grid</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
         
      <style>
         div[class* = "col-"] {
            background: #fff;
            text-align: center;
            color: #000;
            border: 1px solid #D8D8D8;
         }
         .row {
            margin-bottom: 10px;
         }
      </style>
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Layout Grid</div>
               </div>
            </div>
            
            <div class = "pages">
               <div data-page = "index" class = "page navbar-fixed">
                  <div class = "page-content">
                     <div class = "content-block-title">Columns with gutter</div>
                     
                     <div class = "content-block">
                        <div class = "row">
                           <div class = "col-50">col 1</div>
                           <div class = "col-50">col 2</div>
                        </div>
                        
                        <div class = "row">
                           <div class = "col-25">col 1</div>
                           <div class = "col-25">col 2</div>
                           <div class = "col-25">col 3</div>
                           <div class = "col-25">col 4</div>
                        </div>
                        
                        <div class = "row">
                           <div class = "col-33">col 1</div>
                           <div class = "col-33">col 2</div>
                           <div class = "col-33">col 3</div>
                        </div>
                        
                        <div class = "content-block-title">Columns without gutter</div>
                        
                        <div class = "content-block">
                           <div class = "row no-gutter">
                              <div class = "col-50">col 1</div>
                              <div class = "col-50">col 2</div>
                           </div>
                           
                           <div class = "row no-gutter">
                              <div class = "col-25">col 1</div>
                              <div class = "col-25">col 2</div>
                              <div class = "col-25">col 3</div>
                              <div class = "col-25">col 4</div>
                           </div>
                           
                           <div class = "row no-gutter">
                              <div class = "col-33">col 1</div>
                              <div class = "col-33">col 2</div>
                              <div class = "col-33">col 3</div>
                           </div>
                        </div>
                     
                        <div class = "content-block-title">Nested Columns</div>
                        <div class = "content-block">
                           <div class = "row">
                              
                              <div class = "col-50">
                                 col 1
                                 <div class = "row">
                                    <div class = "col-40">col 2</div>
                                    <div class = "col-60">col 3</div>
                                 </div>
                              </div>
                                 
                              <div class = "col-50">
                                 col 1
                                 <div class = "row">
                                    <div class = "col-75">col 2</div>
                                    <div class = "col-25">col 3</div>
                                 </div>
                              </div>
                                 
                           </div>
                        </div>
                           
                        <div class = "content-block-title">Columns With Different Equal Width</div>
                           
                        <div class = "content-block">
                           <div class = "row">
                              <div class = "col-100 tablet-50">col 1</div>
                              <div class = "col-100 tablet-50">col 2</div>
                           </div>
                              
                           <div class = "row">
                              <div class = "col-50 tablet-25">col 1</div>
                              <div class = "col-50 tablet-25">col 2</div>
                              <div class = "col-50 tablet-25">col 3</div>
                              <div class = "col-50 tablet-25">col 4</div>
                           </div>
                              
                           <div class = "row">
                              <div class = "col-100 tablet-40">col 1</div>
                              <div class = "col-50 tablet-60">col 2</div>
                              <div class = "col-50 tablet-60">col 3</div>
                              <div class = "col-100 tablet-40">col 4</div>
                           </div>
                        </div>
                           
                        <div class = "content-block-title">Columns With Equal Width</div>
                           
                        <div class = "content-block">
                           <div class = "row">
                              <div class = "col-auto">col-1</div>
                              <div class = "col-auto">col-2</div>
                              <div class = "col-auto">col-3</div>
                              <div class = "col-auto">col-4</div>
                           </div>
                              
                           <div class = "row no-gutter">
                              <div class = "col-auto">col-1</div>
                              <div class = "col-auto">col-2</div>
                              <div class = "col-auto">col-3</div>
                              <div class = "col-auto">col-4</div>
                           </div>
                        </div>
                           
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako layout_grid.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/layout_grid.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Ten kod zapewnia różne typy typów siatek do umieszczania zawartości zgodnie z potrzebami użytkownika.

Opis

Framework7 zapewnia różne rodzaje nakładek do płynnej pracy z aplikacjami. Poniższa tabela zawiera listę niektórych nakładek Framework7 -

S.Nr Typ i opis nakładki
1 Modalny

Modalne to małe okno, które wyświetla zawartość z oddzielnych źródeł bez opuszczania okna nadrzędnego.

2 Popup

Popup to wyskakujące okienko, które wyświetla treść, gdy użytkownik kliknie element.

3 Popover

Do zarządzania prezentacją zawartości tymczasowej można użyć komponentu popover.

4 Arkusz akcji

Arkusz Akcja służy do przedstawienia użytkownikowi zestawu możliwości, jak obsługiwać danego zadania.

5 Ekran logowania

Ekran logowania nakładki służy do wyświetlania formatu ekranu logowania, którego można używać na stronie, w wyskakującym okienku lub jako samodzielna nakładka.

6 Picker Modal

Modał selektora służy do wybierania niestandardowej zawartości, która jest podobna do selektora kalendarza.

Opis

Preloader w Framework7 jest wykonany ze skalowalnej grafiki wektorowej (SVG) i animowany za pomocą CSS, dzięki czemu można go łatwo zmieniać. Preloader jest dostępny w dwóch kolorach -

  • Domyślnie jest to jasne tło
  • inny to ciemne tło

Możesz użyć klasy modułu wstępnego ładowania w swoim kodzie HTML, jak pokazano poniżej -

Przykład

Poniższy przykład demonstruje użycie modułu wstępnego ładowania w Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Panel Events</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Framework7 Preloader</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block row">
                        <div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
                        <div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
                        <div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
                        <div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
      </script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako preloader.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/preloader.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Ten kod wyświetla wskaźnik modułu wstępnego ładowania, który jest tworzony za pomocą SVG i animowany za pomocą CSS.

Opis

Paski postępu mogą służyć do pokazywania użytkownikom ładowania zasobów lub postępu zadania. Możesz określić pasek postępu za pomocą klasy progressbar . Gdy użytkownik nie wie, jak długo będzie trwać proces ładowania żądania, możesz użyć klasy progressbar-infinite .

Progress Bar JavaScript API

Pasek postępu może być używany wraz z interfejsem API JavaScript do określania właściwości pokazywania , ukrywania i postępu przy użyciu następujących metod -

S.Nr Metody Opis i parametry
1 myApp.setProgressbar (container , progress, speed)

Ustawia pasek postępu postępu zadania.

  • container - Jest to ciąg znaków lub element HTML, który definiuje kontener elementu paska postępu.

  • progress - Reprezentuje w formacie liczb całkowitych i określa postęp zadania.

  • speed - Przedstawia w formacie liczb całkowitych i określa czas trwania postępu zadania.

2 myApp.hideProgressbar (contain er)

Ukrywa pasek postępu.

  • container - Jest to ciąg znaków lub element HTML, który definiuje kontener elementu paska postępu.

3 myApp.showProgressbar (contai ner, progress, color)

Wyświetla pasek postępu.

  • container - Jest to ciąg znaków lub element HTML, który definiuje kontener elementu paska postępu.

  • progress - Reprezentuje w formacie liczb całkowitych i określa postęp zadania.

  • speed - Przedstawia w formacie liczb całkowitych i określa czas trwania postępu zadania.

Przykład

Poniższy przykład wyświetla animowane określone i nieokreślone paski postępu, aby wskazać aktywność w Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Progress Bar</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center">Progress Bar</div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Determinate Progress Bar</div>
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Inline determinate progress bar:</p>
                           
                           <div class = "progressbar-inline">
                              <p><span data-progress = "10" class = "progressbar"></span></p>
                              
                              <p class = "buttons-row">
                                 <a href = "#" data-progress = "25" class = "button button-raised">25%</a>
                                 <a href = "#" data-progress = "50" class = "button button-raised">50%</a>
                                 <a href = "#" data-progress = "75" class = "button button-raised">75%</a>
                                 <a href = "#" data-progress = "100" class = "button button-raised">100%</a>
                              </p>
                           </div>
                           
                           <p>Loads and hides the determinate progress bar:</p>
                           <div class = "progressbar-load-hide">
                              <p><a href = "#" class = "button button-raised">Start Loading</a></p>
                           </div>
                           
                           <p>Displays the determinate progress bar on top:</p>
                           <p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Infinite Progress Bar</div>
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Inline infinite progress bar:</p>
                           
                           <p><span class = "progressbar-infinite"></span></p>
                           
                           <p>Displays the infinite progress bar in multiple colors:</p>
                           
                           <p><span class = "progressbar-infinite color-multi"></span></p>
                           
                           <p>Displays the infinite progress bar on top:</p>
                           
                           <p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                           
                           <p>Displays the infinite progress bar in multiple colors on top:</p>
                           
                           <p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Different types of colored progress bars:</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "5" class = "progressbar color-red"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "10" class = "progressbar color-pink"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "20" class = "progressbar color-deeppurple"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "30" class = "progressbar color-blue"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "40" class = "progressbar color-cyan"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "50" class = "progressbar color-green"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "60" class = "progressbar color-lime"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "70" class = "progressbar color-amber"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "80" class = "progressbar color-deeporange"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "90" class = "progressbar color-gray"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "100" class = "progressbar color-black"></div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7({
            material: true
         });
         
         var $$ = Dom7;

         $$('.progressbar-inline .button').on('click', function () {
            var progress = $$(this).attr('data-progress');
            var progressbar = $$('.progressbar-inline .progressbar');
            myApp.setProgressbar(progressbar, progress);
         });
         
         $$('.progressbar-load-hide .button').on('click', function () {
            var container = $$('.progressbar-load-hide p:first-child');
            
            //it doesn't load if another progresbar is loading
            if (container.children('.progressbar').length) return;

            myApp.showProgressbar(container, 0);

            var progress = 0;
            function simulateLoading() {
               setTimeout(function () {
                  var progressBefore = progress;
                  progress += Math.random() * 20;
                  myApp.setProgressbar(container, progress);
                  if (progressBefore < 100) {
                     simulateLoading();
                  }
                  else myApp.hideProgressbar(container);
               }, Math.random() * 200 + 200);
            }
            simulateLoading();
         });
         
         $$('.progressbar-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
            myApp.showProgressbar(container, 0, 'orange');
            var progress = 0;
            
            function simulateLoading() {
               setTimeout(function () {
                  var progressBefore = progress;
                  progress += Math.random() * 20;
                  myApp.setProgressbar(container, progress);
                  if (progressBefore < 100) {
                     simulateLoading();
                  }
                  //hides the progressbar
                  else myApp.hideProgressbar(container);
               }, Math.random() * 200 + 200);
            }
            simulateLoading();
         });
         
         $$('.progressbar-infinite-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
            myApp.showProgressbar(container, 'yellow');
            setTimeout(function () {
               myApp.hideProgressbar();
            }, 3000);
         });
         
         $$('.progressbar-infinite-multi-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
               myApp.showProgressbar(container, 'multi');
               setTimeout(function () {
               myApp.hideProgressbar();
            }, 3000);
         });
      </script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako progress_bar.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/progress_bar.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • W przykładzie wyświetlany jest pasek postępu, który wskazuje, jak długo operacja zajmie ukończenie procesu, i wyświetla różne typy pasków postępu, aby wskazać aktywność.

Opis

Widoki list to zaawansowane składniki interfejsu użytkownika, które przedstawiają dane na przewijalnej liście zawierającej wiele wierszy. Framework7 zapewnia różne typy widoku listy do pracy z aplikacją. W poniższej tabeli wymieniono niektóre z widoku listy Framework7 -

S.Nr Rodzaje i opis
1 Widok listy

Widoki list to zaawansowane komponenty interfejsu użytkownika, które przedstawiają dane na przewijanej liście zawierającej wiele wierszy.

2 Lista kontaktów

Lista kontaktów to rodzaj widoku listy, w którym można wyświetlić listę kontaktów osób.

3 Widok listy multimediów

Widok listy mediów służy do wyświetlania skomplikowanych struktur danych, takich jak produkty, usługi, informacje o użytkownikach.

4 Swipeout

Swipeout pozwala odsłonić ukryte działania menu, przesuwając nad elementami listy.

5 Lista sortowalna

Lista z możliwością sortowania to typ widoku listy, który sortuje elementy widoku listy.

6 Lista wirtualna

Lista wirtualna to rodzaj widoku listy, który obejmuje listy dużej liczby elementów danych bez obniżania ich wydajności.

Opis

Akordeon to graficzny element sterujący wyświetlany jako skumulowana lista elementów. Każdy akordeon można rozwinąć lub rozciągnąć, aby odsłonić zawartość związaną z tym akordeonem.

Składany układ

Kiedy używasz pojedynczego, oddzielnego elementu zwijanego, musisz pominąć element opakowujący listę harmonijkową .

Poniżej znajduje się struktura składanego układu -

<!-- Single collapsible element ------>
<div class = "accordion-item">
   <div class = "accordion-item-toggle"></div>
   <div class = "accordion-item-content"></div>
</div>

<!-- Separate collapsible element -->
<div class = "accordion-item">
   <div class = "accordion-item-toggle"></div>
   <div class = "accordion-item-content"></div>
</div>

Następujące klasy są używane dla akordeonu w Framework7 -

S.Nr Klasy i opis
1

accordion-list

Jest to klasa opcjonalna, która zawiera listę elementów akordeonu.

2

accordion-item

Jest to klasa wymagana dla pojedynczego przedmiotu na akordeonie.

3

accordion-item-toggle

Jest to klasa wymagana do rozszerzenia zawartości elementu harmonijki.

4

accordion-item-content

Jest to klasa wymagana dla ukrytej zawartości elementu harmonijki.

5

accordion-item-expanded

Jest to pojedynczy element rozszerzonego akordeonu.

Accordion JavaScript API

Metody JavaScript API służą do programowego otwierania i zamykania akordeonu.

Zawiera następujące metody JavaScript API -

  • myApp.accordionOpen(item) - Używany do otwierania akordeonu.

  • myApp.accordionClose(item) - Używany do zamykania akordeonu.

  • myApp.accordionToggle(item) - Służy do przełączania akordeonu.

Wszystkie metody zawierają parametr o nazwie item, który jest elementem HTML lub stringiem elementu akordeonowego.

Wydarzenia na akordeonie

Akordeon zawiera cztery zdarzenia wymienione w poniższej tabeli -

S.Nr Zdarzenie Cel i opis
1 otwarty

Accordion item

Po otwarciu animacji to zdarzenie zostanie uruchomione.

2 otwierany

Accordion item

Po zakończeniu otwierania animacji to zdarzenie zostanie uruchomione.

3 blisko

Accordion item

Gdy zamkniesz animację, to zdarzenie zostanie uruchomione.

4 Zamknięte

Accordion item

Po zakończeniu animacji zdarzenie zostanie uruchomione.

Widok listy akordeonów

W widoku listy harmonijki zamiast przełączania harmonijki można użyć elementu łącza do elementu .

<div class = "list-block accordion-list">
   <ul>
      <li class = "accordion-item">
         <a href = "" class = "item-link item-content">
            <div class = "item-inner">
               <div class = "item-title">1st Item</div>
            </div>
         </a>
         <div class = "accordion-item-content">Content for 1st Item...</div>
      </li>
      
      <li class = "accordion-item">
         <a href = "" class = "item-link item-content">
            <div class = "item-inner">
               <div class = "item-title">2nd Item</div>
            </div>
         </a>
         <div class = "accordion-item-content">Content for 2nd Item...</div>
      </li>
   </ul>
</div>

Przykład

Poniższy przykład demonstruje użycie akordeonu w Framework7 -

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>Accordion</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <body>
      <div class="views">
         <div class="view view-main">
            <div class="pages">
               <div data-page="home" class="page navbar-fixed">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="left"> </div>
                        <div class="center">Accordion</div>
                        <div class="right"> </div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block-title">List of Programming Lagauges</div>
                     <div class="list-block accordion-list">
                        <ul>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C++</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
                                       This reference will take you through simple and practical approach while learning C++ Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">Java</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
                                       This reference will take you through simple and practical approach while learning Java Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     <div class="content-block-title">Separate Collapsibles</div>
                     <div class="list-block">
                        <ul>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p >C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C++</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
                                       This reference will take you through simple and practical approach while learning C++ Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">Java</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
                                       This reference will take you through simple and practical approach while learning Java Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     <div class="content-block-title">Custom Accordion</div>
                     <div class="content-block accordion-list custom-accordion">
                        <div class="accordion-item">
                           <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></div>
                           <div class="accordion-item-content">
                              <p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
                           </div>
                        </div>
                        <div class="accordion-item">
                           <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></div>
                           <div class="accordion-item-content">
                              <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
                                 This reference will take you through simple and practical approach while learning C++ Programming language.
                              </p>
                           </div>
                        </div>
                        <div class="accordion-item">
                           <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></div>
                           <div class="accordion-item-content">
                              <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
                                 This reference will take you through simple and practical approach while learning Java Programming language.
                              </p>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      <style>.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-plus,.custom-accordion .icon-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style>
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
         // enable the dynamic navbar for this view:
         dynamicNavbar: true
         });
      </script>
   </body>
</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako accordion.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/accordion.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • W przykładzie przedstawiono zwijany układ, który można rozwinąć, aby wyświetlić zawartość skojarzoną z harmonijką.

Opis

Karty zawierają uporządkowane informacje związane z jednym tematem, takie jak zdjęcie, link i tekst. Poniższa tabela przedstawia typy kart Framework7 -

S.Nr Rodzaje i opis
1 Układ HTML karty

Podstawowy układ HTML karty wykorzystuje klasy karty do porządkowania elementów.

2 Widok listy z kartami

Możesz używać kart jako elementów widoku listy, dodając klasę listy kart do <div class = "list-block"> .

Opis

Chip to mały blok encji, który może zawierać zdjęcie, mały ciąg tytułu i krótkie informacje.

Układ scalony HTML

Poniższy kod przedstawia podstawowy układ HTML chipa używany w Framework7 -

<div class = "chip">
   <div class = "chip-media">
      <img src = "http://lorempixel.com/100/100/people/9/">
   </div>
   
   <div class = "chip-label">Jane Doe</div>
   <a href = "#" class = "chip-delete"></a>
</div>

Powyższy układ HTML zawiera wiele klas wymienionych poniżej -

  • chips - To pojemnik na wióry.

  • chip-media- To jest element multimedialny z chipem, który może zawierać obrazy, awatar lub ikonę. Jest to opcjonalne.

  • card-label - To jest etykieta tekstowa chipa.

  • card-delete - Jest to opcjonalne łącze do ikony usuwania chipa.

Przykład

Poniższy przykład przedstawia elementy, takie jak albumy, elementy karty itp. Wraz ze zdjęciem i krótkimi informacjami -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Chips HTML Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               
               <div class = "page navbar-fixed">
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center">Chips HTML Layout</div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Chips With Text</div>
                     <div class = "content-block">
                        <div class = "chip">
                           <div class = "chip-label">Chip one</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-label">Chip two</div>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Chips with icons</div>
                     
                     <div class = "content-block">
                        <div class = "chip">
                           <div class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></div>
                           <div class = "chip-label">Set Date</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
                           <div class = "chip-label">Sent Mail</div>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Contact Chips</div>
                     
                     <div class = "content-block">
                        <div class = "chip">
                           <div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
                           <div class = "chip-label">James Willsmith</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media"><img src = "/framework7/images/pic2.jpg"></div>
                           <div class = "chip-label">Sunil Narayan</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-pink">R</div>
                           <div class = "chip-label">Raghav</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-teal">S</div>
                           <div class = "chip-label">Sharma</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-red">Z</div>
                           <div class = "chip-label">Zien</div>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Deletable Chips</div>
                     
                     <div class = "content-block">
                        <div class = "chip">
                           <div class = "chip-label">Chip one</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-teal">S</div>
                           <div class = "chip-label">Sharma</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
                           <div class = "chip-label">Sent</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
                           <div class = "chip-label">James Willsmith</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-label">Chip two</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-green">R</div>
                           <div class = "chip-label">Raghav</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <style>
      </style>
      
      <script>
         var myApp = new Framework7 ({
            material: true
         });
         
         var $$ = Dom7;
         $$('.chip-delete').on('click', function (e) {
            e.preventDefault();
            var chip = $$(this).parents('.chip');
             
            myApp.confirm('Do you want to delete this Chip?', function () {
               chip.remove();
            });
         });
      </script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako cards_html_layout.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/cards_html_layout.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Przykład przedstawia złożone jednostki w małych blokach, takich jak albumy, elementy kart, opublikowany obraz, który zawiera zdjęcie, tytuł i krótkie informacje.

Opis

Framework7 zapewnia grupę gotowych do użycia przycisków, po prostu dodając odpowiednie klasy do łączy lub przycisków wejściowych.

S.Nr Rodzaje i opis
1 Przyciski motywów iOS

Framework7 udostępnia wiele przycisków motywów iOS, których można używać, stosując odpowiednie klasy.

2 Przyciski tematyczne materiałów

Motyw materiału udostępnia wiele przycisków do użycia w aplikacji przy użyciu odpowiednich klas.

Opis

Framework7 zapewnia pływający przycisk akcji dla promowanej akcji. Pojawiają się jako pływająca ikona z kółkiem nad interfejsem użytkownika. Ma zachowania ruchowe, które obejmują morfowanie , uruchamianie i przenoszenie punktu kotwiczenia .

Pływający przycisk akcji jest obsługiwany tylko w motywie Material.

Poniższa tabela zawiera listę typów przycisków akcji używanych w Framework7 -

S.Nr Rodzaje i opis
1 Układ pływających przycisków akcji

To bardzo proste; wystarczy umieścić go jako element podrzędny strony lub widoku .

2 Morph To Popover

Jeśli chcesz otworzyć popover po kliknięciu pływającego przycisku akcji, możesz użyć klasy pływającego przycisku do popover .

3 Szybkie wybieranie

Możesz wywołać powiązane akcje, klikając pływający przycisk akcji, używając szybkiego wybierania .

Opis

Formularze służą do interakcji z użytkownikami i gromadzą dane od internautów za pomocą pól tekstowych, pól wyboru, przycisków opcji itp.

Framework7 zapewnia różne typy elementów formularza do płynnej pracy z aplikacjami, jak określono w poniższej tabeli -

S.Nr Typ i opis nakładki
1 Elementy formularza

Elementy formularza służą do tworzenia dobrze wyglądających układów formularzy.

2 Pola wyboru i radia

Rozszerzenie widoku listy umożliwia tworzenie pól wyboru i wejść radiowych w Framework7.

3 Inteligentny wybór

Inteligentne zaznaczanie to łatwy sposób zmiany zaznaczeń formularza na strony dynamiczne za pomocą grup pól wyboru i wejść radiowych.

4 Wyłączone elementy

Elementy można wyłączyć, stosując wyłączoną klasę do elementu lub dodając wyłączone atrybuty dla elementu formularza.

5 Tworzyć dane

Framework7 ma bardzo mało przydatnych metod, co ułatwia pracę z formularzami.

6 Przechowywanie formularzy

Dzięki pamięci formularzy można łatwo przechowywać i analizować dane formularzy na stronach załadowanych do Ajax.

7 Przesyłanie formularza Ajax

Framework7 umożliwia automatyczne wysyłanie danych za pomocą Ajax.

Opis

Karty to zbiory logicznie pogrupowanych treści, które pozwalają nam szybko przełączać się między nimi i oszczędzać miejsce jak akordeony.

Układ kart

Poniższy kod definiuje układ zakładek -

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

Gdzie -

  • <div class = "tabs">- Jest to wymagane opakowanie dla wszystkich zakładek. Jeśli tego przegapimy, zakładki w ogóle nie będą działać.

  • <div class = "tab"> - To pojedyncza zakładka, która powinna mieć unique id atrybut.

  • <div class = "tab active">- Jest to pojedyncza aktywna karta, która używa dodatkowej aktywnej klasy, aby karta była widoczna (aktywna).

Przełączanie między kartami

Możesz użyć kontrolera w układzie zakładek, aby użytkownik mógł przełączać się między nimi.

W tym celu musisz utworzyć linki (znaczniki <a>) z klasą tab-link i atrybutem href równym atrybutowi id zakładki docelowej -

<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1)  -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>

<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2)  -->
<a href = "#tab2" class = "tab-link">Tab 2</a>

<a href = "#tab3" class = "tab-link">Tab 3</a>

Przełącz wiele kart

Jeśli używasz łącza pojedynczej karty do przełączania się między wieloma kartami, możesz użyć klas zamiast używać identyfikatora i atrybutu karty danych .

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

Danych zakładka atrybutem Zakładka-link zawiera selektor CSS docelowych karcie / kartach.

Możemy korzystać z różnych sposobów zakładania, są one określone w poniższej tabeli -

S.Nr Typy i opis kart
1 Wbudowane zakładki

Wbudowane karty to zestawy zgrupowanych w wierszu, które umożliwiają szybkie przełączanie się między nimi.

2 Przełącz karty z paska nawigacyjnego

W pasku nawigacyjnym możemy umieszczać zakładki, które pozwalają na przełączanie się między nimi.

3 Przełącz widoki z paska kart

Pojedyncza karta może służyć do przełączania się między widokami z własną nawigacją i układem.

4 Animowane karty

Możesz użyć prostego przejścia (animacji) do przełączania kart.

5 Przewijane karty

Możesz tworzyć przesuwane karty z prostym przejściem, używając klasy tabs-swipeable-wrap dla tych kart.

6 Karty Zdarzenia JavaScript

Zdarzenia JavaScript mogą być używane podczas pracy z kodem JavaScript dla kart.

7 Pokaż kartę za pomocą JavaScript

Możesz przełączyć lub wyświetlić kartę za pomocą metod JavaScript.

Opis

Suwak to najpotężniejszy i najbardziej nowoczesny suwak dotykowy, dostępny w Framework7 z wieloma funkcjami.

Poniższy układ HTML pokazuje suwak -

<!-- Container class for slider -->
<div class = "swiper-container">
   <!-- Wrapper class for slider -->
   <div class = "swiper-wrapper">
      <!-- Slides -->
      <div class = "swiper-slide">Slide 1</div>
      <div class = "swiper-slide">Slide 2</div>
      <div class = "swiper-slide">Slide 3</div>
      ... other slides ...
   </div>
   
   <!-- Define pagination, if it is required -->
   <div class = "swiper-pagination"></div>
</div>

Następujące klasy są używane dla suwaka -

  • swiper-container - Jest to element wymagany do głównego kontenera slidera i służy do slajdu i paginacji.

  • Swiper-wrapper - Wymagany element do dodatkowych prowadnic owijających.

  • swiper-slide - Jest to pojedynczy element slajdu i może zawierać dowolny kod HTML w środku.

  • swiper-pagination - W przypadku punktorów paginacji jest opcjonalne i są tworzone automatycznie.

Możesz zainicjować swiper za pomocą JavaScript, używając powiązanych metod -

myApp.swiper(swiperContainer,parameters)

LUB

new Swiper(swiperContainer, parameters)

Obie metody służą do inicjalizacji suwaka z opcjami.

Powyższe metody zawierają następujące parametry -

  • swiperContainer- Jest to HTMLElement lub ciąg kontenera zgarniającego i jest wymagany.

  • parameters - Są to opcjonalne elementy zawierające obiekt z parametrami swiper.

Na przykład -

var mySwiper = app.swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

Możliwe jest uzyskanie dostępu do instancji swipera, a właściwość swiper kontenera suwaka ma następujący element HTML -

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

W poniższej tabeli możesz zobaczyć różne sposoby i typy machnięcia -

S.Nr Typy i opis suwaków
1 Domyślny suwak z paginacją

Jest to nowoczesny suwak dotykowy, a suwak domyślnie przesuwa poziomo.

2 Zamiatarka pionowa

Ten działa również jako domyślny suwak, ale przesuwa się pionowo.

3 Z Przestrzenią Między Slajdami

Ten suwak służy do zapewnienia odstępu między dwoma slajdami.

4 Wiele suwaków

Ten suwak używa więcej niż jednego suwaka na jednej stronie.

5 Zagnieżdżone suwaki

Jest to połączenie slajdów pionowych i poziomych.

6 Kontrole niestandardowe

Służy do niestandardowych elementów sterujących do wybierania lub przesuwania dowolnego slajdu.

7 Powolne ładowanie

Może być używany do plików multimedialnych, których ładowanie zajmuje trochę czasu.

Opis

Przeglądarka zdjęć jest podobna do komponentu przeglądarki zdjęć w systemie iOS i służy do wyświetlania grupy obrazów, które można powiększać i przesuwać. Aby przesuwać się między obrazami, przeglądarka zdjęć używa suwaka suwaka .

Poniższa tabela przedstawia typy przeglądarek zdjęć używanych w programie Framework7 -

S.Nr Typy i opis przeglądarki zdjęć
1 Utwórz instancję przeglądarki zdjęć

Przeglądarkę zdjęć można utworzyć i uruchomić tylko za pomocą JavaScript.

2 Parametry przeglądarki zdjęć

Framework7 zawiera listę parametrów, które są używane w przeglądarce zdjęć.

3 Metody i właściwości przeglądarki zdjęć

Po zainicjowaniu przeglądarki zdjęć otrzymasz zainicjowaną zmienną instancji umożliwiającą użycie metod i właściwości przeglądarki zdjęć.

4 Zdjęcia Array

Podczas inicjalizacji przeglądarki zdjęć należy podać parametr tablica ze zdjęciami / filmami w zdjęciach .

5 Szablony przeglądarki zdjęć

Framework7 udostępnia wiele szablonów przeglądarki zdjęć, które możesz przekazać podczas inicjalizacji przeglądarki zdjęć.

Opis

Autouzupełnianie jest przyjaznym dla urządzeń mobilnych i zoptymalizowanym pod kątem dotyku komponentem Framework7, który może być rozwijany lub samodzielny. Możesz utworzyć i zainicjować wystąpienie autouzupełniania za pomocą metody JavaScript -

myApp.autocomplete(parameters)

Gdzie parametry są wymaganymi obiektami używanymi do zainicjowania wystąpienia autouzupełniania.

Parametry autouzupełniania

W poniższej tabeli wymieniono dostępne parametry autouzupełniania w Framework7 -

S.Nr Parametry i opis Rodzaj Domyślna
1

openIn

Definiuje, jak otworzyć autouzupełnianie, które może służyć jako menu rozwijane, wyskakujące okienko lub strona.

strunowy strona
2

source

Używa instancji autouzupełniania, zapytania wyszukiwania i renderowania funkcji do przekazywania dopasowanych elementów z tablicą.

funkcja (autouzupełnianie, zapytanie, renderowanie) -
3

valueProperty

Określa wartość pozycji klucza dopasowanego obiektu pozycji.

strunowy ID
4

limit

Wyświetla ograniczoną liczbę elementów autouzupełniania na zapytanie.

numer -
5

preloader

Preloader może służyć do określenia układu autouzupełniania, ustawiając go na true.

boolean fałszywy
6

preloaderColor

Określa kolor modułu wstępnego ładowania. Domyślny kolor to „czarny”.

strunowy -
7

value

Definiuje tablicę z domyślnymi wybranymi wartościami.

szyk -
8

textProperty

Określa wartość pozycji klucza dopasowanego obiektu pozycji, której można użyć jako tytułu wyświetlanych opcji.

strunowy tekst

Samodzielne parametry autouzupełniania

Poniższa tabela zawiera listę dostępnych autonomicznych parametrów autouzupełniania w Framework7 -

S.Nr Parametry i opis Rodzaj Domyślna
1

opener

Jest to parametr ciągu lub elementu HTML, który otworzy samodzielną stronę autouzupełniania.

string lub HTMLElement -
2

popupCloseText

Służy do zamykania wyskakującego okienka autouzupełniania.

strunowy 'Blisko'
3

backText

Udostępnia odsyłacz zwrotny, gdy autouzupełnianie jest otwierane jako strona.

strunowy 'Plecy'
4

pageTitle

Określa tytuł strony autouzupełniania.

strunowy -
5

searchbarPlaceholderText

Określa tekst zastępczy paska wyszukiwania.

strunowy 'Szukaj'
6

searchbarCancelText

Definiuje tekst przycisku anulowania paska wyszukiwania.

strunowy 'Anuluj'
7

notFoundText

Wyświetla tekst, gdy nie znaleziono dopasowanego elementu.

strunowy 'Nic nie znaleziono'
8

multiple

Pozwala na wybór wielokrotnego wyboru, ustawiając go na true.

boolean fałszywy
9

navbarTheme

Określa motyw kolorystyczny paska nawigacyjnego.

strunowy -
10

backOnSelect

Gdy użytkownik wybierze wartość, autouzupełnianie zostanie zamknięte przez ustawienie wartości true.

boolean fałszywy
11

formTheme

Określa motyw kolorystyczny dla formularza.

strunowy -

Rozwijane parametry autouzupełniania

Poniższa tabela zawiera listę dostępnych parametrów autouzupełniania rozwijanego w Framework7 -

S.Nr Parametry i opis Rodzaj Domyślna
1

input

Jest to ciąg znaków lub element HTML używany do wprowadzania tekstu.

string lub HTMLElement -
2

dropdownPlaceholderText

Określa tekst zastępczy listy rozwijanej.

strunowy -
3

updateInputValueOnSelect

Możesz zaktualizować wartość wejściową w select, ustawiając ją na true.

boolean prawdziwe
4

expandInput

Możesz rozszerzyć wprowadzany tekst w widoku listy, aby wyświetlić pełny ekran podczas rozwijania, ustawiając element-wprowadzanie na wartość true.

boolean fałszywy

Funkcje autouzupełniania wywołań zwrotnych

Poniższa tabela zawiera listę dostępnych parametrów autouzupełniania rozwijanego w Framework7 -

S.Nr Parametry i opis Rodzaj Domyślna
1

onChange

Za każdym razem, gdy wartość autouzupełniania zostanie zmieniona, ta funkcja zwrotna zostanie wykonana.

funkcja (autouzupełnianie, wartość) -
2

onOpen

Za każdym razem, gdy zostanie otwarte autouzupełnianie, zostanie wykonana ta funkcja zwrotna.

funkcja (autouzupełnianie) -
3

onClose

Za każdym razem, gdy autouzupełnianie zostanie zamknięte, zostanie wykonana ta funkcja zwrotna.

funkcja (autouzupełnianie) -

Szablony autouzupełniania

Poniższa tabela zawiera listę dostępnych parametrów autouzupełniania rozwijanego w Framework7 -

S.Nr Parametry i opis Rodzaj Domyślna
1

navbarTemplate

Jest to samodzielny szablon paska nawigacyjnego z autouzupełnianiem.

strunowy -
2

itemTemplate

Jest to samodzielny element formularza template7.

strunowy -
3

dropdownTemplate

Jest to szablon listy rozwijanej template7.

strunowy -
4

dropdownItemTemplate

Jest to pozycja listy rozwijanej template7.

strunowy -
5

dropdownPlaceholderTemplate

Jest to element zastępczy rozwijanego menu template7.

strunowy -

Szablony domyślne

Poniżej znajdują się domyślne fragmenty kodu szablonu dla zdefiniowanych powyżej parametrów szablonów -

navbarTemplate

<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
   <div class = "navbar-inner">
      <div class = "left sliding">
         {{#if material}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
               <i class = "icon icon-back"></i>
            </a>
         {{else}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
               <i class = "icon icon-back"></i>
               {{#if inPopup}}
                  <span>{{popupCloseText}}</span>
               {{else}}
                  <span>{{backText}}</span>
               {{/if}}
            </a>
         {{/if}}
      </div>

      <div class = "center sliding">{{pageTitle}}</div>
      {{#if preloader}}
         <div class = "right">
            <div class = "autocomplete-preloader preloader 
               {{#if preloaderColor}}
                  preloader-{{preloaderColor}}
               {{/if}}">
            </div>
         </div>
      {{/if}}
   </div>
</div>

itemTemplate

<li>
    <label class = "label-{{inputType}} item-content">
        <input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
        {{#if material}}
            <div class = "item-media">
                <i class = "icon icon-form-{{inputType}}"></i>
            </div>
            
            <div class = "item-inner">
                <div class = "item-title">{{text}}</div>
            </div>
        {{else}}
            {{#if checkbox}}
               <div class = "item-media">
                  <i class = "icon icon-form-checkbox"></i>
               </div>
            {{/if}}
            
            <div class = "item-inner">
                <div class = "item-title">{{text}}</div>
            </div>
        {{/if}}
    </label>
</li>

dropdownTemplate

<div class = "autocomplete-dropdown">
   <div class = "autocomplete-dropdown-inner">
      <div class = "list-block">
         <ul></ul>
      </div>
   </div>
   
   {{#if preloader}}
      <div class = "autocomplete-preloader preloader 
         {{#if preloaderColor}}
            preloader-{{preloaderColor}}
         {{/if}}">
         {{#if material}}
            {{materialPreloaderHtml}}
         {{/if}}
      </div>
   {{/if}}
</div>

dropdownItemTemplate

<li>
   <label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
      <div class = "item-inner">
         <div class = "item-title">{{text}}</div>
      </div>
   </label>
</li>

dropdownPlaceholderTemplate

<li class = "autocomplete-dropdown-placeholder">
   <div class = "item-content">
      <div class = "item-inner">
         <div class = "item-title">{{text}}</div>
      </div>
   </label>
</li>

Metody autouzupełniania

Poniższa tabela określa metody autouzupełniania dostępne w Framework7 -

S.Nr Metody i opis
1

myAutocomplete.params

Definiuje parametry inicjalizacji, które są przekazywane z obiektem.

2

myAutocomplete.value

Definiuje tablicę z wybranymi wartościami.

3

myAutocomplete.opened

Otwiera autouzupełnianie, jeśli jest ustawione na prawda.

4

myAutocomplete.dropdown

Określa wystąpienie listy rozwijanej autouzupełniania.

5

myAutocomplete.popup

Określa wystąpienie wyskakującego okienka autouzupełniania.

6

myAutocomplete.page

Określa instancję strony autouzupełniania.

7

myAutocomplete.pageData

Definiuje dane strony autouzupełniania.

8

myAutocomplete.searchbar

Definiuje instancję autouzupełniania paska wyszukiwania.

Właściwości autouzupełniania

Poniższa tabela określa metody autouzupełniania dostępne w Framework7 -

S.Nr Właściwości i opis
1

myAutocomplete.open()

Otwiera autouzupełnianie, którego można użyć jako menu rozwijanego, wyskakującego okienka lub strony.

2

myAutocomplete.close()

Zamyka autouzupełnianie.

3

myAutocomplete.showPreloader()

Pokazuje moduł ładowania wstępnego autouzupełniania.

4

myAutocomplete.hidePreloader()

Ukrywa moduł ładowania wstępnego autouzupełniania.

5

myAutocomplete.destroy()

Niszczy instancję modułu ładowania wstępnego autouzupełniania i usuwa wszystkie zdarzenia.

Przykład

Poniższy przykład demonstruje użycie parametrów autouzupełniania ukrytych w Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Autocomplete</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Autcomplete</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
               
                  <div class = "page-content">
                     <div class = "content-block-title">Simple Dropdown Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With Input Expand</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With All Values</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With Placeholder</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Simple Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Country</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Popup Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Country</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Countries</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div> 
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type  =  "text/javascript" 
         src  =  "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp  =  new Framework7();
         var $$  =  Dom7;
         var mainView  =  myApp.addView('.view-main');
         
         // Countries data array
         var countries  =  ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');

         // Simple Dropdown
         var autocompleteDropdownSimple  =  myApp.autocomplete ({
            input: '#autocomplete-dropdown',
            openIn: 'dropdown',
            
            source: function (autocomplete, query, render) {
               var results  =  [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with input expand
         var autocompleteDropdownExpand = myApp.autocomplete ({
            input: '#autocomplete-dropdown-expand',
            openIn: 'dropdown',
            expandInput: true,   // expandInput used as item-input in List View will be expanded to full screen wide
                                 //during dropdown
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               // Find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with all values
         var autocompleteDropdownAll = myApp.autocomplete ({
            input: '#autocomplete-dropdown-all',
            openIn: 'dropdown',
            
            source: function (autocomplete, query, render) {
               var results = [];
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with placeholder
         var autocompleteDropdownPlaceholder = myApp.autocomplete ({
            input: '#autocomplete-dropdown-placeholder',
            openIn: 'dropdown',
            dropdownPlaceholderText: 'Type as "India"',
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
                  
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Simple Standalone
         var autocompleteStandaloneSimple = myApp.autocomplete ({
            openIn: 'page', //open in page
            opener: $$('#autocomplete-standalone'), //link that opens autocomplete
            backOnSelect: true, //go back after we select something
            
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            },
               
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$('#autocomplete-standalone').find('.item-after').text(value[0]);
               
               // You can add item value to input value
               $$('#autocomplete-standalone').find('input').val(value[0]);
            }
         });

         // Standalone Popup
         var autocompleteStandalonePopup = myApp.autocomplete ({
            openIn: 'popup', // Opens the Autocomplete in page
            opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup
            backOnSelect: true, //After selecting item, then go back to page
            source: function (autocomplete, query, render) {
            var results = [];
            if (query.length === 0) {
               render(results);
               return;
            }
            
            // You can find matched items
            for (var i = 0; i < countries.length; i++) {
               if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
            }
            
            // Display the items by passing array with result items
               render(results);
            },
            
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
               
               // You can add item value to input value
               $$('#autocomplete-standalone-popup').find('input').val(value[0]);
            }
         });

         // Multiple Standalone
         var autocompleteStandaloneMultiple = myApp.autocomplete ({
            openIn: 'page', //Opens the Autocomplete in page
            opener: $$('#autocomplete-standalone-multiple'), //link that opens autocomplete
            multiple: true, //Allow multiple values
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
               }
               
               // Display the items by passing array with result items
               render(results);
            },
            
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
               
               // You can add item value to input value
               $$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
            }
         });
      </script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako autocomplete.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/autocomplete.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Przykład zapewnia autouzupełnianie wartości w prostym menu rozwijanym, rozwijaniu ze wszystkimi wartościami, rozwijaniu z symbolem zastępczym, autonomicznym autouzupełnianiu itp.

Opis

Picker wygląda jak natywny selektor iOS i jest potężnym komponentem, który pozwala wybierać dowolne wartości z listy, a także służy do tworzenia niestandardowych selektorów nakładek. Możesz użyć Picker jako komponentu wbudowanego lub jako nakładki. Selektor nakładek zostanie automatycznie przekonwertowany na Popover na tabletach (iPad).

Korzystając z następującej metody aplikacji, możesz utworzyć i zainicjować metodę JavaScript -

myApp.picker(parameters)

Gdzie parametry są obiektami wymaganymi, używanymi do zainicjowania instancji selektora i jest to metoda wymagana.

Parametry selektora

Poniższa tabela określa dostępne parametry w selektorach -

S.Nr Parametry i opis Rodzaj Domyślna
1

container

Ciąg z selektorem CSS lub HTMLElement używany do generowania kodu HTML Picker dla selektorów wbudowanych.

string lub HTMLElement -
2

input

Powiązany element wejściowy umieszczony z ciągiem z selektorem CSS lub HTMLElement.

string lub HTMLElement -
3

scrollToInput

Służy do przewijania widocznego obszaru (zawartości strony) wejścia, gdy jest otwarty selektor.

boolean prawdziwe
4

inputReadOnly

Służy do ustawiania atrybutu „tylko do odczytu” na określonym wejściu.

boolean prawdziwe
5

convertToPopover

Służy do konwersji modalu selektora do Popover na dużych ekranach, takich jak iPad.

boolean prawdziwe
6

onlyOnPopover

Możesz otworzyć selektor w Popover, włączając go.

boolean prawdziwe
7

cssClass

Aby wybrać tryb modalny, możesz użyć dodatkowej nazwy klasy CSS.

strunowy -
8

closeByOutsideClick

Możesz zamknąć selektor, klikając poza selektorem lub elementem wejściowym, włączając tę ​​metodę.

boolean fałszywy
9

toolbar

Służy do włączania modalnego paska narzędzi selektora.

boolean prawdziwe
10

toolbarCloseText

Służy do przycisku paska narzędzi Gotowe / Zamknij.

strunowy 'Gotowe'
11

toolbarTemplate

Jest to szablon HTML paska narzędzi, domyślnie jest to ciąg znaków HTML z następującym szablonem -

<div class = "toolbar">
  <div class = "toolbar-inner">
    <div class = "left"></div>
    <div class = "right">
      <a href = "#" class = "link close-picker">
         {{closeText}}
      </a>
    </div>
  </div>
</div>
strunowy -

Określone parametry selektora

W poniższej tabeli wymieniono dostępne określone parametry selektora -

S.Nr Parametry i opis Rodzaj Domyślna
1

rotateEffect

Umożliwia efekt obrotu 3D w selektorze.

boolean fałszywy
2

momentumRatio

Kiedy puszczasz selektor po szybkim dotknięciu i ruchu, daje to większy rozpęd.

numer 7
3

updateValuesOnMomentum

Służy do aktualizowania selektorów i wartości wejściowych podczas rozpędu.

boolean fałszywy
4

updateValuesOnTouchmove

Służy do aktualizacji selektorów i wartości wejściowych podczas ruchu dotykowego.

boolean prawdziwe
5

value

Tablica ma swoje wartości początkowe, a także każdy element tablicy reprezentuje wartość powiązanej kolumny.

szyk -
6

formatValue

Funkcja służy do formatowania wartości wejściowej i powinna zwracać nową / sformatowaną wartość ciągu. Te wartości i displayValues jest szereg związanych z kolumny.

funkcja (p, wartości, displayValues) -
7

cols

Każdy element tablicy reprezentuje obiekt z parametrami kolumn.

szyk -

Wywołania zwrotne parametrów selektora

Poniższa tabela przedstawia listy funkcji oddzwaniania dostępnych w selektorach -

S.Nr Callback i opis Rodzaj Domyślna
1

onChange

Funkcja wywołania zwrotnego zostanie wykonana za każdym razem, gdy zmieni się wartość selektora, a wartości i displayValues będą tablicami powiązanej kolumny.

funkcja (p, wartości, displayValues) -
2

onOpen

Funkcja wywołania zwrotnego będzie wykonywana po każdym otwarciu selektora.

funkcja (p) -
3

onClose

Funkcja wywołania zwrotnego będzie wykonywana po zamknięciu selektora.

funkcja (p) -

Parametry kolumny

W momencie konfiguracji Pickera musimy przekazać parametr cols . Jest reprezentowany jako tablica, w której każdy element jest obiektem z parametrami kolumny -

S.Nr Parametry i opis Rodzaj Domyślna
1

values

Możesz określić wartości kolumn łańcuchowych za pomocą tablicy.

szyk -
2

displayValues

Ma tablicę z wartościami kolumn łańcuchowych i wyświetli wartość z parametru wartości , gdy nie jest określony.

szyk -
3

cssClass

Nazwa klasy CSS używana do ustawienia kontenera HTML kolumny.

strunowy -
4

textAlign

Służy do ustawiania wyrównania tekstu wartości kolumn i może być „do lewej”, „do środka” lub „do prawej” .

strunowy -
5

width

Domyślnie szerokość jest obliczana automatycznie. Jeśli chcesz naprawić szerokości kolumn w selektorze z kolumnami zależnymi, które powinny być w pikselach .

numer -
6

divider

Służy do kolumny, która powinna być wizualnym rozdzielaczem, nie ma żadnych wartości.

boolean fałszywy
7

content

Służy do określenia kolumny dzielącej (divider: true) z zawartością kolumny.

strunowy -

Parametr wywołań zwrotnych kolumn

S.Nr Callback i opis Rodzaj Domyślna
1

onChange

Za każdym razem, gdy wartość kolumny zmieni się w tym czasie, zostanie wykonana funkcja zwrotna. Wartość i displayValue reprezentują bieżącej kolumnie wartości i displayValue .

funkcja (p, wartość, displayValue) -

Właściwości selektora

Zmienna Picker ma wiele właściwości, które podano w poniższej tabeli -

S.Nr Właściwości i opis
1

myPicker.params

Możesz zainicjować przekazane parametry za pomocą obiektu.

2

myPicker.value

Wybrana wartość dla każdej kolumny jest reprezentowana przez tablicę elementów.

3

myPicker.displayValue

Wybrana wartość wyświetlana dla każdej kolumny jest reprezentowana przez tablicę elementów.

4

myPicker.opened

Po otwarciu selektora ustawia wartość true .

5

myPicker.inline

Gdy picker jest wbudowany, ustawia wartość true .

6

myPicker.cols

Kolumny Picker mają własne metody i właściwości.

7

myPicker.container

Instancja Dom7 jest używana jako kontener HTML.

Metody selekcji

Zmienna selektora ma pomocne metody, które podano w poniższej tabeli -

S.Nr Metody i opis
1

myPicker.setValue(values, duration)

Służy do ustawiania nowej wartości selektora. Wartości są w tablicy, gdzie każdy element reprezentuje wartość dla każdej kolumny. duration - czas przejścia w ms.

2

myPicker.open()

Służy do otwierania selektora.

3

myPicker.close()

Użyj, aby zamknąć Picker.

4

myPicker.destroy()

Służy do niszczenia instancji Picker i usuwania wszystkich zdarzeń.

Właściwości kolumny

Każda kolumna w tablicy myPicker.cols ma również swoje własne przydatne właściwości, które podano w poniższej tabeli -

//Get first column
var col = myPicker.cols[0];
S.Nr Właściwości i opis
1

col.container

Możesz utworzyć instancję z kolumnowym kontenerem HTML.

2

col.items

Możesz utworzyć instancję z elementami HTML elementów kolumny.

3

col.value

Służy do wybierania bieżącej wartości kolumny.

4

col.displayValue

Służy do wyboru bieżącej wartości wyświetlanej kolumny.

5

col.activeIndex

Podaj aktualny numer indeksu, który jest wybrany / aktywny.

Metody kolumnowe

Przydatne metody kolumn podano w poniższej tabeli -

S.Nr Metody i opis
1

col.setValue(value, duration)

Służy do ustawiania nowej wartości dla bieżącej kolumny. Wartość musi być nową wartość, a czas trwania jest czas przejścia podane w ms.

2

col.replaceValues(values, displayValues)

Służy do zastępowania wartości kolumn i displayValues ​​nowymi.

Służy do uzyskiwania dostępu do instancji Picker z jego kontenera HTML, za każdym razem, gdy inicjujesz Picker jako wbudowany Picker.

var myPicker = $$('.picker-inline')[0].f7Picker;

Istnieją różne typy zbieraczy, jak określono w poniższej tabeli -

S.Nr Typy i opis kart
1 Próbnik z pojedynczą wartością

Jest to potężny komponent, który pozwala wybrać dowolne wartości z listy.

2 Dwie wartości i efekt obrotu 3D

W selektorze możesz użyć efektu obrotu 3D.

3 Wartości zależne

Wartości są od siebie zależne dla określonego elementu.

4 Niestandardowy pasek narzędzi

Możesz użyć co najmniej jednego selektora na jednej stronie, aby dostosować.

5 Wbudowany selektor / data-godzina

Możesz wybrać liczbę wartości w selektorze liniowym, podobnie jak data , miesiąc, rok i czas mają godziny, minuty, sekundy.

Opis

Komponent Kalendarz pozwala łatwo obsługiwać daty i może być używany jako element wbudowany lub nakładany. Nakładka kalendarza zostanie automatycznie przekonwertowana na popover na tabletach.

Kalendarz można utworzyć i zainicjować tylko przy użyciu JavaScript. Musisz użyć metody powiązanej aplikacji, jak pokazano poniżej -

  • myApp.calendar(parameters)- Ta metoda zwraca zainicjowane wystąpienie kalendarza. Akceptuje obiekt jako parametry.

Poniższa tabela przedstawia użycie kalendarza w programie Framework7 -

S.Nr Wykorzystanie i opis kalendarza
1 Parametry kalendarza

Framework7 zawiera listę parametrów, które są używane z kalendarzem.

2 Metody i właściwości kalendarza

Po zainicjowaniu kalendarza otrzymasz zainicjowaną zmienną wystąpienia umożliwiającą użycie metod i właściwości kalendarza.

3 Dostęp do instancji Kalendarza

Istnieje możliwość uzyskania dostępu do wystąpienia kalendarza z jego kontenera HTML po zainicjowaniu kalendarza jako wbudowanego.

Opis

Jest to specjalny komponent używany do odświeżania (przeładowywania) zawartości strony poprzez jej ściągnięcie.

Poniższy kod pokazuje, jak odświeżyć zawartość strony -

<div class = "page">
   <!-- Page content should have additional "pull-to-refresh-content" class -->
   <div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
      <!-- Default pull to refresh layer-->
      <div class = "pull-to-refresh-layer">
         <div class = "preloader"></div>
      <div class = "pull-to-refresh-arrow"></div>
   </div>

   <!-- usual content below -->
   <div class = "list-block">
      ...
   </div>
</div>

Następujące klasy są używane w odświeżaniu -

  • page-content- Ma dodatkową klasę zawartości typu pull-to-refresh-content i jest wymagana do włączenia pull to refresh.

  • pull-to-refresh-layer- Jest to ukryta warstwa, która służy do ściągania w celu odświeżenia elementu wizualnego i jest to tylko preloader i strzałka.

  • data-ptr-distance = "55" - Jest to dodatkowy atrybut, który pozwala ustawić niestandardową odległość wyzwalania „pociągnij, aby odświeżyć”, a jego domyślna wartość to 44 piksele.

Pociągnij, aby odświeżyć wydarzenia

W opcji „Pull to Refresh” znajdują się zdarzenia JavaScript, które podano w poniższej tabeli -

S.Nr Opis wydarzenia Cel
1

pullstart

Zostanie uruchomiony za każdym razem, gdy zaczniesz ściągać, aby odświeżyć zawartość.

Pociągnij, aby odświeżyć zawartość.

<div class = "pull-to-refresh-content">
2

pullmove

Jest wyzwalany podczas ściągania w celu odświeżenia zawartości.

Pociągnij, aby odświeżyć zawartość.

<div class="pull-to-refresh-content">
3

pullend

Będzie uruchamiany za każdym razem, gdy zwolnisz ściągnięcie, aby odświeżyć zawartość.

Pociągnij, aby odświeżyć zawartość.

<div class="pull-to-refresh-content">
4

refresh

To zdarzenie zostanie wywołane, gdy ściąganie odświeżania przejdzie w stan „odświeżania” .

Pociągnij, aby odświeżyć zawartość.

<div class="pull-to-refresh-content">
5

refreshdone

Zostanie uruchomiony po odświeżeniu i powrocie do stanu początkowego. Zostanie to zrobione po wywołaniu metody pullToRefreshDone .

Pociągnij, aby odświeżyć zawartość.

<div class="pull-to-refresh-content">

Istnieją metody aplikacji, których można używać z ciągnięciem w celu odświeżenia.

S.Nr Metody i opis aplikacji
1

myApp.pullToRefreshDone(ptrContent)

Służy do resetowania zawartości typu pull-to-refresh .

2

myApp.pullToRefreshTrigger(ptrContent)

Służy do wyzwalania odświeżania przy określonym ściągnięciu w celu odświeżenia zawartości .

3

myApp.destroyPullToRefresh(ptrContent)

Służy do niszczenia / wyłączania ściągania w celu odświeżenia przy określonym ściągnięciu w celu odświeżenia zawartości .

4

myApp.initPullToRefresh(ptrContent)

Służy do inicjowania / włączania ściągania w celu odświeżenia zawartości .

Gdzie ptrContent jest używany do HTMLElement lub string do ściągnięcia, aby odświeżyć zawartość, aby zresetować / wyzwolić lub wyłączyć / włączyć.

Przykład

Poniższy przykład demonstruje użycie składnika odświeżającego, który inicjuje odświeżanie zawartości strony -

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>Pull To Refresh</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <div class="views">
      <div class="view view-main">
         <div class="pages">
            <div data-page="home" class="page navbar-fixed">
               <div class="navbar">
                  <div class="navbar-inner">
                     <div class="left"> </div>
                     <div class="center">Pull To Refresh</div>
                     <div class="right"> </div>
                  </div>
               </div>
               <div class="page-content pull-to-refresh-content">
                  <div class="pull-to-refresh-layer">
                     <div class="preloader"></div>
                     <div class="pull-to-refresh-arrow"></div>
                  </div>
                  <div class="list-block media-list">
                     <ul>
                        <li class="item-content">
                           <div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
                           <div class="item-inner">
                              <div class="item-title-row">
                                 <div class="item-title">apple</div>
                              </div>
                           </div>
                        </li>
                        <li class="item-content">
                           <div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
                           <div class="item-inner">
                              <div class="item-title-row">
                                 <div class="item-title">strawberry</div>
                              </div>
                           </div>
                        </li>
                        <li class="item-content">
                           <div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
                           <div class="item-inner">
                              <div class="item-title-row">
                                 <div class="item-title">Mango</div>
                              </div>
                           </div>
                        </li>
                     </ul>
                     <div class="list-block-label">
                        <p>Just pull page down to let the magic happen.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
   <script>
      var myApp = new Framework7();

      var $$ = Dom7;

      // Dummy Content
      var fruits = ['mango', 'orange', 'watermelon', 'banana'];
      // Pull to refresh content
      var ptrContent = $$('.pull-to-refresh-content');
      // Add 'refresh' listener on it
      ptrContent.on('refresh', function (e) {
         // Emulate 2s loading
         setTimeout(function () {
            var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
            var fruit = fruits[Math.floor(Math.random() * fruits.length)];
            var itemHTML = '<li class="item-content">' +
               '<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
               '<div class="item-inner">' +
               '<div class="item-title-row">' +
               '<div class="item-title">' + fruit + '</div>' +
                  '</div>' + '</div>' + '</li>';
            // Prepend new list element
            ptrContent.find('ul').prepend(itemHTML);
				
            // When loading done, we need to reset it
            myApp.pullToRefreshDone();
         }, 2000);
      });
   </script>
</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako pull_to_refresh.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/pull_to_refresh.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Kiedy użytkownik ściąga w dół, strona zostanie odświeżona z zawartością.

Opis

Nieskończony przewijanie umożliwia załadowanie dodatkowej zawartości i wykonuje wymagane czynności, gdy strona znajduje się blisko dołu.

Poniższy układ HTML przedstawia nieskończone przewijanie -

<div class = "page">
   <div class = "page-content infinite-scroll" data-distance = "100">
      ...
   </div>
</div>

Powyższy układ zawiera następujące klasy -

  • page-content infinite-scroll - Jest używany do kontenera z nieskończonym przewijaniem.

  • data-distance - Ten atrybut umożliwia skonfigurowanie odległości od dołu strony (w pikselach) w celu wywołania zdarzenia nieskończonego przewijania, a jego domyślna wartość to 50px.

Jeśli chcesz używać nieskończonego przewijania u góry strony, musisz dodać dodatkową klasę „infinite-scroll-top” do „page-content” -

<div class = "page">
   <div class = "page-content infinite-scroll infinite-scroll-top">
      ...
   </div>
</div>

Nieskończone zdarzenia przewijania

infinite- Jest używany do wyzwalania, gdy przewijanie strony osiągnie określoną odległość do dołu. Będzie kierowany przez div class = "page-content infinite-scroll" .

Istnieją dwie metody aplikacji, których można używać z kontenerem nieskończonego przewijania -

Aby dodać detektor zdarzeń nieskończonego przewijania do określonego kontenera HTML, użyj następującej metody -

myApp.attachInfiniteScroll(container)

Możesz usunąć nieskończony odbiornik zdarzeń przewijania z określonego kontenera HTML, używając następującej metody -

myApp.detachInfiniteScroll(container)

Tam, gdzie parametry są wymagane, opcje używane jako HTMLElement lub ciąg znaków dla kontenera nieskończonego przewijania.

Przykład

Poniższy przykład ilustruje nieskończone przewijanie, które ładuje dodatkową zawartość, gdy przewijanie strony znajduje się blisko dołu -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>infinite_scroll</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "left"> </div>
                  <div class = "center sliding">Infinite Scroll</div>
                  <div class = "right"> </div>
               </div>
            </div>
         
            <div class = "pages navbar-through">
               <div data-page = "home" class = "page">
                  <div class = "page-content infinite-scroll">
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 1</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 2</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 3</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 4</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 5</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 6</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 7</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 8</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 9</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 10</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 11</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 12</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 13</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 14</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 15</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 16</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 17</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 18</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 19</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 20</div>
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "infinite-scroll-preloader">
                        <div class = "preloader"></div>
                     </div>
                  </div>
               </div>
            </div>
         
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <style>
         .infinite-scroll-preloader {
            margin-top:-20px;
            margin-bottom:10px;
            text-align:center;
         }
         
         .infinite-scroll-preloader .preloader {
            width:34px;
            height:34px;
         }
      </style>
      
      <script>
         var myApp = new Framework7();
         var $$ = Dom7;

         // Loading flag
         var loading = false;

         // Last loaded index
         var lastIndex = $$('.list-block li').length;

         // Max items to load
         var maxItems = 60;

         // Append items per load
         var itemsPerLoad = 20;

         // Attach 'infinite' event handler
         $$('.infinite-scroll').on('infinite', function () {

            // Exit, if loading in progress
            if (loading) return;

            // Set loading flag
            loading = true;

            // Emulate 1s loading
            setTimeout(function () {
               // Reset loading flag
               loading = false;

               if (lastIndex >= maxItems) {
                  // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
                  myApp.detachInfiniteScroll($$('.infinite-scroll'));
                  
                  // Remove preloader
                  $$('.infinite-scroll-preloader').remove();
                  return;
               }

               // Generate new items HTML
               var html = '';
               for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
                  html += '<li class = "item-content">
                     <div class = "item-inner">
                        <div class = "item-title">
                           Item ' + i + '
                        </div>
                     </div>
                  </li>';
               }

               // Append new items
               $$('.list-block ul').append(html);

               // Update last loaded index
               lastIndex = $$('.list-block li').length;
            }, 1000);
         });
      </script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako infinite_scroll.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/infinite_scroll.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Przykład umożliwia ładowanie dodatkowej treści, gdy przewijanie strony osiągnie określoną odległość do dołu.

Opis

Wiadomości są składnikiem Framework7, który umożliwia wizualizację komentarzy i systemu przesyłania wiadomości w aplikacji.

Układ wiadomości

Framework7 ma następującą strukturę układu komunikatów -

<div class = "page">
<div class = "page-content messages-content">
   <div class = "messages">
      <!-- Defines the date stamp -->
      <div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
      
      <!-- Displays the sent message and by default, it will be in green color on right side -->
      <div class = "message message-sent">
         <!-- Define the text with bubble type -->
         <div class = "message-text">Hello</div>
      </div>
      
      <!-- Displays the another sent message -->
      <div class = "message message-sent">
         <!-- Define the text with bubble type -->
         <div class = "message-text">How are you?</div>
      </div>
      
      <!-- Displays the received message and by default, it will be in grey color on left side -->
      <div class = "message message-with-avatar message-received">
         <!-- Provides sender name -->
         <div class = "message-name">Smith</div>
         <!--  Define the text with bubble type -->
         <div class = "message-text">I am fine, thanks</div>
         <!-- Defines the another date stamp -->
         <div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
      </div>
      
   </div>
</div>

Układ zawiera następujące klasy w różnych obszarach -

Układ strony wiadomości

Poniższa tabela przedstawia klasy układu strony komunikatów wraz z opisem.

S.Nr Klasy i opis
1

messages-content

Jest to wymagana dodatkowa klasa dodawana do "zawartości strony" i używana do pakowania wiadomości.

2

messages

Jest to element wymagany dla dymków wiadomości.

3

messages-date

Używa kontenera datownika do wyświetlania daty i godziny wysłania lub odebrania wiadomości.

4

message

Jest to pojedyncza wiadomość do wyświetlenia.

Części wewnętrzne pojedynczej wiadomości

Poniższa tabela przedstawia klasy prostych części wewnętrznych komunikatów wraz z opisem.

S.Nr Klasy i opis
1

message-name

Zawiera nazwę nadawcy.

2

message-text

Zdefiniuj tekst za pomocą typu bąbelkowego.

3

message-avatar

Określa awatar nadawcy.

4

message-label

Określa etykietę tekstową poniżej bąbelka.

Dodatkowe klasy dla pojedynczego kontenera wiadomości

W poniższej tabeli przedstawiono dodatkowe klasy dla opisu kontenera z pojedynczą wiadomością.

S.Nr Klasy i opis
1

message-sent

Określa, że ​​wiadomość została wysłana przez użytkownika i jest wyświetlana z zielonym tłem po prawej stronie.

2

message-received

Służy do wyświetlenia pojedynczej wiadomości wskazującej, że wiadomość została odebrana przez użytkownika i pozostaje po lewej stronie na szarym tle.

3

message-pic

Jest to dodatkowa klasa do wyświetlania obrazu z pojedynczym komunikatem.

4

message-with-avatar

Jest to dodatkowa klasa do wyświetlania pojedynczej wiadomości (odebranej lub wysłanej) z awatarem.

5

message-with-tail

Możesz dodać dymek do pojedynczej wiadomości (odebranej lub wysłanej).

Dodatkowe dostępne klasy dla pojedynczej wiadomości

Poniższa tabela przedstawia dostępne klasy dla pojedynczej wiadomości wraz z opisem.

S.Nr Klasy i opis
1

message-hide-name

Jest to dodatkowa klasa do ukrywania nazwy wiadomości dla pojedynczej wiadomości (odebranej lub wysłanej).

2

message-hide-avatar

Jest to dodatkowa klasa do ukrywania awatara wiadomości dla pojedynczej wiadomości (odebranej lub wysłanej).

3

message-hide-label

Jest to dodatkowa klasa do ukrywania etykiety wiadomości dla pojedynczej wiadomości (odebranej lub wysłanej).

4

message-last

Możesz użyć tej klasy, aby wskazać ostatnią otrzymaną lub wysłaną wiadomość w bieżącej rozmowie przez jednego nadawcę dla pojedynczej wiadomości (odebranej lub wysłanej).

5

message-first

Możesz użyć tej klasy do wskazania pierwszej otrzymanej lub pierwszej wysłanej wiadomości w bieżącej rozmowie przez jednego nadawcę dla pojedynczej wiadomości (odebranej lub wysłanej).

Inicjowanie wiadomości za pomocą JavaScript

Możesz zainicjować wiadomości za pomocą JavaScript, używając następującej metody -

myApp.messages(messagesContainer, parameters)

Metoda ma dwie opcje -

  • messagesContainer - Jest to wymagany element HTML lub ciąg znaków zawierający element HTML kontenera wiadomości.

  • parameters - Określa obiekt z parametrami wiadomości.

Parametry komunikatów

Poniższa tabela przedstawia parametry komunikatów wraz z opisem.

S.Nr Parametr i opis Rodzaj Domyślna
1

autoLayout

Dodaje dodatkowe wymagane klasy do każdej wiadomości, włączając ją.

boolean prawdziwe
2

newMessagesFirst

Możesz wyświetlać wiadomość na górze zamiast na dole, włączając ją.

boolean fałszywy
3

messages

Wyświetla tablicę komunikatów, w których każda wiadomość powinna być reprezentowana jako obiekt z parametrami wiadomości.

szyk -
4

messageTemplate

Wyświetla pojedynczy szablon wiadomości.

strunowy -

Właściwości wiadomości

Poniższa tabela przedstawia właściwości komunikatów wraz z opisem.

S.Nr Właściwość i opis
1

myMessages.params

Możesz zainicjować przekazane parametry za pomocą obiektu.

2

myMessages.container

Definiuje element DOM7 z kontenerem HTML paska komunikatów.

Metody wiadomości

Poniższa tabela przedstawia metody komunikatów wraz z opisem.

S.Nr Metoda i opis
1

myMessages.addMessage(messageParameters, method, animate);

Wiadomość można dodać na początku lub na końcu za pomocą parametru method.

Ma następujące parametry -

  • messageParameters - Zawiera parametry wiadomości do dodania.

  • method - Jest to ciąg znaków, który dodaje wiadomość na początku lub na końcu kontenera wiadomości.

  • animate- Jest to typ boolowski, który dodaje wiadomość bez żadnej animacji przejścia lub przewijania, ustawiając ją na fałsz. Domyślnie będzie to prawda.

2

myMessages.appendMessage(messageParameters, animate);

Dodaje wiadomość na koniec kontenera wiadomości.

3

myMessages.prependMessage(messageParameters, animate);

Dodaje wiadomość na początek kontenera wiadomości.

4

myMessages.addMessages(messages, method, animate);

Możesz dodać wiele wiadomości jednocześnie.

Ma następujący parametr -

  • messages - Zapewnia tablicę wiadomości do dodania, które powinny być reprezentowane jako obiekt z parametrami wiadomości.

5

myMessages.removeMessage(message);

Służy do usuwania wiadomości.

Ma następujący parametr -

  • message - Jest to wymagany element HTML lub ciąg znaków, który usuwa element wiadomości.

6

myMessages.removeMessages(messages);

Możesz usunąć wiele wiadomości.

Ma następujący parametr -

  • messages - Jest to wymagana tablica z elementami HTML lub ciągiem znaków, która usuwa wiadomości.

7

myMessages.scrollMessages();

Wiadomości można przewijać od góry do dołu i odwrotnie, w zależności od pierwszego parametru nowej wiadomości.

8

myMessages.layout();

Do wiadomości można zastosować układ automatyczny.

9

myMessages.clean();

Służy do czyszczenia wiadomości.

10

myMessages.destroy();

Służy do niszczenia wiadomości.

Parametry pojedynczej wiadomości

Poniższa tabela przedstawia parametry pojedynczej wiadomości wraz z opisem.

S.Nr Parametr i opis Rodzaj Domyślna
1

text

Definiuje tekst wiadomości, który może być łańcuchem HTML.

strunowy -
2

name

Określa nazwę nadawcy.

strunowy -
3

avatar

Określa ciąg adresu URL awatara nadawcy.

strunowy -
4

time

Określa ciąg czasu wiadomości, np. „9:45”, „18:35”.

strunowy -
5

type

Podaje rodzaj wiadomości, czy może ona zostać wysłana, czy odebrana.

strunowy wysłane
6

label

Określa etykietę wiadomości.

strunowy -
7

day

Podaje ciąg dnia wiadomości, taki jak „niedziela”, „poniedziałek”, „wczoraj” itp.

strunowy -

Inicjowanie wiadomości za pomocą HTML

Możesz zainicjować wiadomości za pomocą HTML bez JavaScript, używając dodatkowej klasy messages-init do wiadomości i użyj atrybutów data- do przekazania wymaganych parametrów, jak pokazano we fragmencie kodu podanym poniżej -

...
   <div class = "page-content messages-content">
      <!-- Initialize the messages using additional "messages-init" class-->
      <div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
         ...

      </div>
   </div>
...

Przykład

Poniższy przykład demonstruje użycie komunikatów w Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Messages</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed toolbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Messages</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "toolbar messagebar">
                     <div class = "toolbar-inner">
                        <textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
                     </div>
                  </div>
                  
                  <div class = "page-content messages-content">
                     <div class = "messages">
                        <div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
                        <div class = "message message-sent">
                           <div class = "message-text">Hello</div>
                        </div>
                        
                        <div class = "message message-sent">
                           <div class = "message-text">Happy Birthday</div>
                        </div>
                        
                        <div class = "message message-received">
                           <div class = "message-name">Smith</div>
                           <div class = "message-text">Thank you</div>
                           <div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
                        </div>
                        
                        <div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
                        <div class = "message message-sent">
                           <div class = "message-text">Good Morning...</div>
                        </div>
                        
                        <div class = "message message-sent">
                           <div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
                           <div class = "message-label">Delivered</div>
                        </div>
                        
                        <div class = "message message-received">
                           <div class = "message-name">Smith</div>
                           <div class = "message-text">Very Good Morning...</div>
                           <div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
                        </div>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var $$ = Dom7;

         // It indicates conversation flag
         var conversationStarted = false;

         // Here initiliaze the messages
         var myMessages = myApp.messages('.messages', {
            autoLayout:true
         });

         // Initiliaze the messagebar
         var myMessagebar = myApp.messagebar('.messagebar');

         // Displays the text after clicking the button
         $$('.messagebar .link').on('click', function () {
         
            // specifies the message text
            var messageText = myMessagebar.value().trim();
            
            // If there is no message, then exit from there
            if (messageText.length === 0) return;

            // Specifies the empty messagebar
            myMessagebar.clear()

            // Defines the random message type
            var messageType = (['sent', 'received'])[Math.round(Math.random())];

            // Provides the avatar and name for the received message
            var avatar, name;
            
            if(messageType === 'received') {
               name = 'Smith';
            }
            
            // It adds the message
            myMessages.addMessage ({
            
               // It provides the message text
               text: messageText,
            
               // It displays the random message type
               type: messageType,
            
               // Specifies the avatar and name of the sender
               avatar: avatar,
               name: name,
            
               // Displays the day, date and time of the message
               day: !conversationStarted ? 'Today' : false,
               time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
            })

            // Here you can update the conversation flag
            conversationStarted = true;
         });

      </script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako messages.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/messages.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Po wpisaniu wiadomości w polu wiadomości i kliknięciu przycisku Wyślij określa, że ​​wiadomość została wysłana i jest wyświetlana z zielonym tłem po prawej stronie.

  • Otrzymana wiadomość pojawi się po lewej stronie na szarym tle wraz z nazwą nadawcy.

Opis

Framework7 zapewnia specjalny pasek narzędzi z możliwością zmiany rozmiaru do pracy z systemem przesyłania wiadomości w aplikacji.

Poniższy kod przedstawia układ paska komunikatów -

<div clas = "toolbar messagebar">
   <div clas = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" clas = "link">Send</a>
   </div>
</div>

Na pasku komunikatów wnętrze „strony” jest bardzo ważne i znajduje się na prawo od „treści wiadomości” -

<div class = "page toolbar-fixed">
   <!-- messagebar -->
   <div class = "toolbar messagebar">
      <div class = "toolbar-inner">
         <textarea placeholder = "Message"></textarea>
         <a href = "#" class = "link">Send</a>
      </div>
   </div>
   
   <!-- messages-content -->
   <div class = "page-content messages-content">
      <div class = "messages">
         ... messages
      </div>
   </div>
</div>

Możesz użyć następującej metody inicjalizacji paska komunikatów za pomocą JavaScript -

myApp.messagesbar(messagesbarContainer, parameters)

Metoda ma dwie opcje -

  • messagesbarContainer - Jest to wymagany element HTML lub ciąg znaków zawierający element HTML kontenera paska wiadomości.

  • parameters - Określa obiekt z parametrami paska komunikatów.

Na przykład -

var myMessagebar = app.messagebar('.messagebar', {
   maxHeight: 200
});

Parametr paska komunikatów

maxHeight- Służy do ustawiania maksymalnej wysokości obszaru tekstu i będzie zmieniany w zależności od ilości tekstu. Typ parametru to liczba, a wartość domyślna to null .

Właściwości paska komunikatów

W poniższej tabeli przedstawiono właściwości paska komunikatów -

S.Nr Właściwości i opis
1

myMessagebar.params

Możesz określić obiekt z przekazanymi parametrami inicjalizacyjnymi.

2

myMessagebar.container

Możesz określić element dom7 z elementem HTML kontenera paska wiadomości.

3

myMessagebar.textarea

Możesz określić element dom7 z elementem HTML messagebar textarea.

Metody paska komunikatów

W poniższej tabeli przedstawiono metody paska komunikatów -

S.Nr Metody i opis
1

myMessagebar.value(newValue);

Ustawia wartość / tekst paska wiadomości i zwraca wartość textarea paska wiadomości, jeśli newValue nie jest określony.

2

myMessagebar.clear();

Czyści obszar tekstu i aktualizuje / resetuje rozmiar.

3

myMessagebar.destroy();

Niszczy instancję paska komunikatów.

Zainicjuj pasek wiadomości za pomocą HTML

Możesz zainicjować pasek komunikatów przy użyciu HTML bez metod i właściwości JavaScript, dodając klasę messagebar -init do .messagebar i przekazując wymagane parametry za pomocą atrybutów data- .

Poniższy kod określa inicjalizację paska komunikatów za pomocą HTML -

<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
   <div class = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" class = "link">Send</a>
   </div>
</div>

Dostęp do instancji paska komunikatów

Dostęp do instancji paska komunikatów jest możliwy, jeśli zainicjujesz go za pomocą HTML; osiąga się to poprzez użycie właściwości paska komunikatów f7 elementu kontenera.

var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');

Możesz zobaczyć przykład paska komunikatów, który jest wyjaśniony w tym linku

Opis

Powiadomienia służą do wyświetlania wymaganych wiadomości, które wyglądają jak powiadomienia push (lub lokalne) iOS.

Poniższa tabela szczegółowo przedstawia wykorzystanie powiadomień -

S.Nr Użycie i opis powiadomień
1 Notifications JavaScript API

Powiadomienia można również dodawać lub zamykać za pomocą JavaScript przy użyciu powiązanych metod aplikacji.

2 Układ powiadomień

Powiadomienia Framework7 zostaną dodane za pomocą JavaScript.

3 Przykład iOS

Framework7 umożliwia korzystanie z różnych typów powiadomień w układzie iOS.

4 Przykładowy materiał

Powiadomienia Framework7 mogą być również używane w układzie materiału.

Opis

Leniwe ładowanie opóźnia proces ładowania obrazu na danej stronie. Leniwe ładowanie poprawia wydajność przewijania, przyspiesza ładowanie strony i oszczędza ruch.

Elementy i obrazy wczytywania z opóźnieniem muszą znajdować się wewnątrz przewijalnego elementu <div class = "page-content">, aby działał poprawnie.

Poniższa tabela przedstawia użycie leniwego ładowania -

S.Nr Leniwe ładowanie i opis
1 Stosowanie

Leniwe obciążenie można zastosować do obrazów, obrazów tła i z efektem zanikania.

2 Inituj leniwe ładowanie ręcznie

Po zainicjowaniu strony, jeśli ręcznie dodasz obrazy ładowania z opóźnieniem, ładowanie z opóźnieniem nie będzie działać i musisz użyć metod, aby je zainicjować.

Jest to możliwe do uruchomienia obrazu załadunku ręcznie za pomocą lazy zdarzenie na leniwe obrazu / elementu, jak pokazano poniżej -

$$('img.lazy').trigger('lazy');

$$('div.lazy').trigger('lazy');

Przykład

Poniższy przykład demonstruje użycie leniwego ładowania w Framework7 -

<!DOCTYPE html>
<html class = "with-statusbar-overlay">

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Lazy Load</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Lazy Load</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p> <img data-src = "/framework7/images/pic4.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                           
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                           nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
                           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                           pariatur.</p>
                           
                           <p> <img data-src = "/framework7/images/pic5.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Sed ut perspiciatis unde omnis iste natus error sit 
                           voluptatem accusantium doloremque laudantium, totam rem aperiam, 
                           eaque ipsa quae ab illo inventore veritatis et quasi architecto 
                           beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
                           voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur 
                           magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                           
                           <p> <img data-src = "/framework7/images/background.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                           nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
                           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                           pariatur.</p>
                           
                           <p> <img data-src = "/framework7/images/pic6.jpg"
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab 
                           illo inventore veritatis et quasi architecto beatae vitae dicta sunt 
                           explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut 
                           odit aut fugit, sed quia consequuntur magni dolores eos qui ratione 
                           voluptatem sequi nesciunt.</p>
                           
                           <p> <img data-src = "/framework7/images/pic7.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                           nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
                           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                           pariatur.</p>
                           
                           <p> <img data-src = "/framework7/images/pic8.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                           Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus 
                           id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus. 
                           Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor 
                           tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est 
                           sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
                           
                           <p><b>Using as background image:</b></p>
                           
                           <div data-background = "/framework7/images/pic7.jpg" 
                              style = "background: #aaa; height:60vw; background-size-cover" 
                              class = "lazy lazy-fadeIn">
                           </div>
                           
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab 
                           illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
                           Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
                           sed quia consequuntur magni dolores eos qui ratione voluptatem sequi 
                           nesciunt.</p>
                        </div>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>var myApp = new Framework7();</script>
   </body>

</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako framework7_lazy_load.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/framework7_lazy_load.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Przykład określa leniwe ładowanie obrazów, w przypadku których obrazy będą ładowane na stronie po ich przewinięciu w dół.

Opis

Framework7 zapewnia różne motywy kolorów dla twoich aplikacji.

Motyw kolorystyczny zapewnia różne typy kolorów motywu używanych do płynnej pracy z aplikacjami, jak określono w poniższej tabeli -

S.Nr Typ i opis motywu
1 Kolory motywów iOS

Możesz użyć 10 różnych domyślnych motywów kolorystycznych iOS dla aplikacji.

2 Materialne kolory motywu

Framework7 zapewnia 22 różne domyślne motywy kolorów materiałów dla aplikacji.

Stosowanie motywów kolorystycznych

Framework7 pozwala na zastosowanie motywów kolorystycznych na różnych elementach, takich jak strona, blok listy, pasek nawigacyjny, rząd przycisków itp., Używając klasy theme- [color] do elementu nadrzędnego.

Przykład

...
</body>

<div class = "page theme-gray">
   ...
</div>

<div class = "list-block theme-blue">
   ...
</div>

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

Motywy układu

Możesz użyć domyślnego motywu układu dla swojej aplikacji, używając dwóch motywów: białego i ciemnego . Motywy można zastosować za pomocą klasy layout- [theme] do elementu nadrzędnego.

Przykład

...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

Klasy pomocnicze

Framework7 zapewnia dodatkowe klasy pomocnicze, których można używać poza motywami lub bez nich, jak podano poniżej -

  • color-[color] - Może służyć do zmiany koloru tekstu bloku lub koloru przycisku, linku, ikony itp.

  • bg-[color] - Ustawia predefiniowany kolor tła bloku lub elementu.

  • border-[color] - Ustawia predefiniowany kolor obramowania bloku lub elementu.

Opis

Hairline to klasa, która dodaje obramowanie 1 piks. Wokół obrazów za pomocą klasy border. Wraz z wydaniem 1.x, hairlines poprawiły działanie z pseudoelementami : after i : before zamiast używać granic CSS.

Hairlines zawiera następujące zasady -

  • :after- Ten pseudoelement jest używany dla dolnych i prawych cienkich linii.

  • :before- Ten pseudoelement jest używany dla górnej i lewej cienkiej linii.

Poniższy fragment kodu przedstawia użycie : after element.

.navbar:after {
   background-color: red;
}

Poniższy fragment kodu usuwa dolny pasek narzędzi z włosami -

.navbar:after {
   display:none;
}

.toolbar:before {
   display:none;
}

klasa bez granic

Linia włosa zostanie usunięta przy użyciu klasy bez obramowania i jest obsługiwana na pasku nawigacyjnym, pasku narzędzi, karcie i jej elementach.

Poniższy kod służy do usuwania linii włosów z paska nawigacyjnego -

<div class = "navbar no-border">
   ...
</div>

Opis

Template7 to lekki, mobilny silnik JavaScript, który reprezentuje Ajax i strony dynamiczne jako szablony Template7 z określonym kontekstem i nie wymaga żadnych dodatkowych skryptów. Template7 jest powiązany z Framework7 jako domyślny, lekki silnik szablonów, który działa szybciej w przypadku aplikacji.

Wydajność

Proces kompilacji stringa do funkcji JS jest najwolniejszym segmentem template7. Dlatego nie trzeba wielokrotnie kompilować szablonu, wystarczy jeden raz.

//Here initialize the app
var myApp = new Framework7();

// After initializing compile templates on app
var searchTemplate = $('script#search-template').html();
var compiledSearchTemplate = Template7.compile(searchTemplate);

var listTemplate = $('script#list-template').html();
var compiledListTemplate = Template7.compile(listTemplate);

// Execute the compiled templates with required context using onPageInit() method
myApp.onPageInit('search', function (page) {

   // Execute the compiled templates with required content
   var html = compiledSearchTemplate({/*...some data...*/});

   // Do stuff with html
});

Template7 to lekki silnik szablonów używany jako samodzielna biblioteka bez Framework7. Pliki Template7 można zainstalować na dwa sposoby -

  • Możesz pobrać z repozytorium Template7 na github .

  • Lub

  • Możesz go zainstalować za pomocą następującego polecenia za pośrednictwem Bower -

bower install template7

Opis

W Template7 możesz skompilować swoje szablony automatycznie, określając specjalne atrybuty w tagu <script>.

Poniższy kod przedstawia układ automatycznej kompilacji -

<script type = "text/template7" id = "myTemplate">
   <p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>

Możesz użyć następujących atrybutów do zainicjowania automatycznej kompilacji -

  • type = "text/template7" - Służy do informowania Template7 o automatycznej kompilacji i jest to wymagany typ skryptu.

  • id = "myTemplate" - Szablon jest dostępny poprzez id i jest to wymagany identyfikator szablonu.

W przypadku automatycznej kompilacji musisz włączyć inicjalizację aplikacji, przekazując następujący parametr -

var myApp = new Framework7 ({
   //It is used to compile templates on app init in Framework7
   precompileTemplates: true,
});

Template7.templates / myApp.templates

Dostęp do automatycznie skompilowanych szablonów można uzyskać jako właściwości Template7.templates po zainicjowaniu aplikacji. Jest również znany jako myApp.templates, gdzie myApp jest zainicjowaną instancją aplikacji.

Możesz użyć następujących szablonów w naszym pliku index.html -

<script type = "text/template7" id = "personTemplate">
   <p>Hello, my name is {{name}} and i am {{age}} years old</p>
   <p>I work as {{position}} at {{company}}</p>
</script>
 
<script type = "text/template7" id = "carTemplate">
   <p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
   <p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script>

Możesz także uzyskać dostęp do szablonów w JavaScript po zainicjowaniu aplikacji -

var myApp = new Framework7 ({
   //Tell Framework7 to compile templates on app init
    precompileTemplates: true
});
 
// Render person template to HTML, its template is already compiled and accessible as 
//Template7.templates.personTemplate
var personHTML = Template7.templates.personTemplate ({
   name: 'King Amit',
   age: 27,
   position: 'Developer',
   company: 'AngularJs'
});
 
// Compile car template to HTML, its template is already compiled and accessible as 
//Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
   vendor: 'Honda',
   model: 'city',
   power: 1200hp,
   speed: 300
});

Opis

Template7 jest mobilnym mechanizmem szablonów JavaScript ze składnią handlebars.js . Jest to bardzo lekki i niesamowicie szybki domyślny silnik szablonów w Framework7.

Najpierw musimy przekazać następujący parametr podczas inicjalizacji aplikacji, który renderuje wszystkie strony Ajax i dynamiczne jako szablon Template7 -

var myApp = new Framework7 ({
   template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});
S.Nr Szablon7 Użycie i opis stron
1 Dane szablonów / stron

Możesz przekazać wymagane dane / kontekst dla określonych stron, określając dane wszystkich stron w parametrze template7Data , wysyłanym podczas inicjowania aplikacji.

2 Przekaż niestandardowy kontekst

Framework7 umożliwia przekazywanie niestandardowego kontekstu do dowolnej strony dynamicznej lub dowolnego załadowanego Ajax.

3 Wczytaj szablony bezpośrednio

Możesz renderować i ładować szablony w locie jako strony dynamiczne.

4 Zapytanie URL

Jeśli używasz Template7 do renderowania stron Ajax, jego kontekst zawsze zostanie rozszerzony o specjalną właściwość url_query .

Przykład

Poniższy przykład zawiera linki, które wyświetlają informacje o użytkowniku, takie jak szczegóły użytkownika, polubienia użytkowników itp. Po kliknięciu tych łączy.

index.html

<!DOCTYPE html>
<html>

   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Framework7</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Template7 Pages</div>
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <div class = "list-block">
                        <ul>
                           <li>
                              //plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
                              <a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
                                 <div class = "item-inner">
                                    //provides link as 'About'
                                    <div class = "item-title">About</div>
                                 </div>
                              </a>
                           </li>
                           
                           <li>
                              //a context name for this link we pass context path from template7Data root
                              <a href = "/framework7/src/likes.html" class = "item-link item-content">
                                 <div class = "item-inner">
                                    //provides link as 'Likes'
                                    <div class = "item-title">Likes</div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/template7" id = "about">
         <div class = "navbar">
            <div class = "navbar-inner">
               <div class = "left sliding">
                  <a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
               </div>
            
               <div class = "center sliding">About Me</div>
               <div class = "right">
                  <a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
               </div>
            </div>
         </div>
         
         <div class = "pages">
            <div data-page = "about" class = "page">
               <div class = "page-content">
                  <div class = "content-block">
                     <div class = "content-block-inner">
                        //displays the details of the user by using the 'my-app.js' file
                        <p>Hello, i am <b>{{firstname}} {{lastname}}</b>, 
                           <b>{{age}}</b> years old and working as 
                           <b>{{position}}</b> at <b>{{company}}</b>.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </script>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script type = "text/javascript" 
         src = "/framework7/src/js/my-app.js">
      </script>
   </body>

</html>

my-app.js

// Initialize your app
var myApp = new Framework7 ({
   animateNavBackIcon: true,
   
   // Enable templates auto precompilation
   precompileTemplates: true,
   
   // Enabled rendering pages using Template7
   template7Pages: true,
   
   // Specify Template7 data for pages
   template7Data: {
      //provides the url for different page with data-page = "likes"
      'url:likes.html': {
         likes: [
            {
               title: 'Nelson Mandela',
               description: 'Champion of Freedom'
            },
            
            {
               title: 'Srinivasa Ramanujan',
               description: 'The Man Who Knew Infinity'
            },
            
            {
               title: 'James Cameron',
               description: 'Famous Filmmaker'
            }
         ]
      },
      about: {
         firstname: 'William ',
         lastname: 'Root',
         age: 27,
         position: 'Developer',
         company: 'TechShell',
      }
   }
});

// Add main View
var mainView = myApp.addView('.view-main', {
   // Enable dynamic Navbar
   dynamicNavbar: true
});

lubi.html

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left sliding">
         <a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
      </div>
      
      <div class = "center sliding">Likes</div>
      <div class = "right">
         <a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
      </div>
   </div>
</div>

<div class = "pages">
   <div data-page = "likes" class = "page">
      <div class = "page-content">
         <div class = "content-block-title">My Likes</div>
         <div class = "list-block media-list">
         
            //iterate through likes
            <ul>
               {{#each likes}}
                  <li class = "item-content">
                     <div class = "item-inner">
                        <div class = "item-title-row">
                           //displays the title and description by using the 'my-app.js' file
                           <div class = "item-title">{{title}}</div>
                        </div>
                        <div class = "item-subtitle">{{description}}</div>
                     </div>
                  </li>
               {{/each}}
            </ul>
         </div>
      </div>
   </div>
</div>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod HTML jako index.html plik w folderze głównym serwera.

  • Otwórz ten plik HTML jako http: //localhost/index.html, a dane wyjściowe zostaną wyświetlone, jak pokazano poniżej.

  • Przykład zawiera linki, które wyświetlają informacje o użytkowniku, takie jak dane użytkownika, lubiane przez użytkownika po kliknięciu tych łączy.

Opis

Po dotknięciu łączy i przycisków są one podświetlane. Odbywa się to przez stan aktywny w Framework7.

  • Zachowuje się jak aplikacja natywna, a nie jak aplikacja internetowa.
  • Ma wbudowaną bibliotekę szybkich kliknięć i powinna być włączona.
  • Active-state klasy jest taka sama jak w CSS : aktywne selektora.
  • Stan aktywny jest włączany przez dodanie klasy watch-active-state do elementu <html> .

Poniższy kod jest używany dla stanu aktywnego w stylu CSS -

/* Usual state */
.my-button {
   color: red;
}

/* Active/tapped state */
.my-button.active-state {
   color: blue;
}

Poniższy kod przedstawia zgodność rezerwową, gdy stan aktywny lub szybkie kliknięcia są wyłączone -

/* Usual state */
.my-button {
   color: red;
}

/* Active/tapped state */
.my-button.active-state {
   color: blue;
}

/* Fallback, when active state is disabled */
html:not(.watch-active-state) .my-button:active {
   color: blue;
}

Opis

Zdarzenie przytrzymania dotknięcia służy do wyzwalania (włączania) zdarzenia po utrzymaniu i zakończeniu zdarzenia dotykowego, więc tylko nazywane jest zdarzeniem wstrzymania dotknięcia . Tab Trzymaj jest wbudowanyFast Clicks biblioteka.

Następujące parametry są używane do wyłączania lub włączania i konfigurowania domyślnie -

S.Nr Parametr i opis Rodzaj Domyślna
1

tapHold

Aby włączyć zdarzenia wstrzymania dotknięcia, gdy jest ustawione na prawda.

boolean fałszywy
2

tapHoldDelay

Określa czas przytrzymania dotknięcia przed wyzwoleniem zdarzenia taphold na elemencie docelowym.

numer 750
3

tapHoldPreventClicks

Zdarzenie dotknięcia nie zostanie uruchomione po kliknięciu zdarzenia.

boolean prawdziwe

Poniższy kod służy do włączania zdarzeń wstrzymania dotknięcia -

var myApp = new Framework7 ({
   tapHold: true //enable tap hold events
});
 
var $$ = Dom7;
 
$$('.some-link').on('taphold', function () {
   myApp.alert('Tap hold fired!');
});

Opis

Tętnienie dotykowe to efekt obsługiwany tylko w motywie materiału Framework7. Domyślnie jest on włączony w motywie materialnym i można go wyłączyć za pomocą parametru materialRipple: false .

Ripple Elements

Możesz włączyć elementy ripple, aby dopasować niektóre selektory CSS, takie jak -

  • ripple
  • a.link
  • a.item-link
  • .button
  • .tab-link
  • .label-radio
  • .label-checkbox itp.

Są one określone w parametrze materialRippleElements . Musisz włączyć ripple dotykowe , dodać selektor elementu do parametru materialRippleElements , aby skorzystać z efektu ripple, lub po prostu użyć klasy ripple .

Kolor fali tętnienia

Kolor ripple można zmienić na elemencie, dodając klasę ripple- [color] do elementu.

Na przykład -

<a href = "#" class = "button ripple-orange">Ripple Button</a>

lub możesz zdefiniować kolor fali tętnienia za pomocą CSS, jak pokazano poniżej -

.button .ripple-wave {
   background-color: #FFFF00;
}

Wyłącz elementy falujące

Możesz wyłączyć ripple dla niektórych określonych elementów, dodając klasę no-ripple do tych elementów. Na przykład -

<a href = "#" class = "button no-ripple">Ripple Button</a>