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 framework7Po 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-cliCLI oznacza Command Line Utility dla Gulp.
Step 2 - Gulp należy zainstalować globalnie za pomocą następującego polecenia.
npm install --global gulpStep 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 installStep 4 - Wersję programistyczną Framework7 można zbudować za pomocą następującego polecenia.
npm buildStep 5- Po utworzeniu wersji deweloperskiej Framework7 zacznij budować aplikację z dist / folder za pomocą następującego polecenia.
npm distStep 6 - Zachowaj folder aplikacji na serwerze i uruchom następujące polecenie do nawigacji między stronami aplikacji.
gulp serverPobierz 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.
|
| 2 | myApp.hideProgressbar (contain er) | Ukrywa pasek postępu.
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | Wyświetla pasek postępu.
|
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 - |
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ść. |
| 2 | pullmove Jest wyzwalany podczas ściągania w celu odświeżenia zawartości. |
Pociągnij, aby odświeżyć zawartość. |
| 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ść. |
| 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ść. |
| 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ść. |
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 -
|
| 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 -
|
| 5 | myMessages.removeMessage(message); Służy do usuwania wiadomości. Ma następujący parametr -
|
| 6 | myMessages.removeMessages(messages); Możesz usunąć wiele wiadomości. Ma następujący parametr -
|
| 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 .
Możesz go zainstalować za pomocą następującego polecenia za pośrednictwem Bower -
Lub
bower install template7Opis
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>