Framework7 - คู่มือฉบับย่อ
Framework7 เป็นเฟรมเวิร์กโอเพ่นซอร์สฟรีสำหรับมือถือ HTML ใช้สำหรับพัฒนาแอพมือถือแบบไฮบริดหรือเว็บแอพสำหรับอุปกรณ์ iOS และ Android
Framework7 เปิดตัวในปี 2014 เวอร์ชันล่าสุด 1.4.2 เปิดตัวในเดือนกุมภาพันธ์ 2016 ได้รับอนุญาตภายใต้ MIT
เหตุใดจึงต้องใช้ Framework7
- การพัฒนาแอพสำหรับ iOS และ Android ทำได้ง่ายกว่า
- เส้นโค้งการเรียนรู้สำหรับ Framework7 นั้นง่ายมาก
- มีวิดเจ็ต / ส่วนประกอบแบบสำเร็จรูปมากมาย
- มีไลบรารีตัวช่วยในตัว
คุณสมบัติ
Framework7 เป็นเฟรมเวิร์กโอเพ่นซอร์สและใช้งานได้ฟรี
Framework7 มีไวยากรณ์ jQuery ที่ง่ายและคุ้นเคยเพื่อเริ่มต้นใช้งานโดยไม่ชักช้า
ในการควบคุมความล่าช้าในการคลิกสำหรับ UI ของระบบสัมผัส Framework7 มีไลบรารีFastClickในตัว
Framework7 มีเค้าโครงระบบกริดในตัวสำหรับการจัดเรียงองค์ประกอบของคุณอย่างตอบสนอง
Framework7 หน้าโหลดแบบไดนามิกจากแม่ผ่านทางAPI เราเตอร์ที่มีความยืดหยุ่น
ข้อดี
Framework7 ไม่ขึ้นอยู่กับไลบรารีของบุคคลที่สามใด ๆ แม้แต่การจัดการ DOM แต่กลับมี DOM7 ที่กำหนดเอง
Framework7 ยังสามารถใช้กับAngularและReact frameworks
คุณสามารถเริ่มสร้างแอปได้เมื่อคุณรู้จัก HTML, CSS และ JavaScript พื้นฐานแล้ว
จะสนับสนุนการพัฒนาได้เร็วขึ้นผ่านซุ้ม
การพัฒนาแอปสำหรับ iOS และ Android ทำได้ง่ายโดยไม่ต้องเรียนรู้
ข้อเสีย
Framework7 รองรับเฉพาะแพลตฟอร์มเช่น iOS และ Android
ชุมชนออนไลน์รองรับ Framework7 Framework น้อยกว่าเมื่อเทียบกับ iOS และ Andriod
ในบทนี้เราจะพูดถึงวิธีการติดตั้งและตั้งค่า Framework7
คุณสามารถดาวน์โหลด Framework7 ได้สองวิธี -
ดาวน์โหลดจากที่เก็บ Framework7 Github
คุณสามารถติดตั้ง Framework7 โดยใช้ Bower ดังที่แสดงด้านล่าง -
bower install framework7หลังจากติดตั้ง Framework7 สำเร็จคุณต้องทำตามขั้นตอนด้านล่างเพื่อใช้ประโยชน์จาก Framework7 ในแอปพลิเคชันของคุณ -
Step 1 - คุณต้องติดตั้ง gulp-cli เพื่อสร้าง Framework7 เวอร์ชันการพัฒนาและ dist โดยใช้คำสั่งต่อไปนี้
npm install gulp-cliCLIยืนสำหรับอรรถประโยชน์บรรทัดคำสั่งสำหรับอึก
Step 2 - ต้องติดตั้ง Gulp ทั่วโลกโดยใช้คำสั่งต่อไปนี้
npm install --global gulpStep 3- จากนั้นติดตั้ง NodeJS package manager ซึ่งจะติดตั้งโปรแกรมโหนดที่ช่วยให้ระบุและเชื่อมโยงการอ้างอิงได้ง่ายขึ้น คำสั่งต่อไปนี้ใช้เพื่อติดตั้ง npm
npm installStep 4 - Framework7 เวอร์ชันพัฒนาสามารถสร้างได้โดยใช้คำสั่งต่อไปนี้
npm buildStep 5- เมื่อคุณสร้าง Framework7 เวอร์ชันพัฒนาแล้วให้เริ่มสร้างแอปจากdist /โฟลเดอร์โดยใช้คำสั่งต่อไปนี้
npm distStep 6 - เก็บโฟลเดอร์แอพของคุณไว้ในเซิร์ฟเวอร์และเรียกใช้คำสั่งต่อไปนี้สำหรับการนำทางระหว่างหน้าของแอพของคุณ
gulp serverดาวน์โหลด Framework7 Library จาก CDNs
CDN หรือ Content Delivery Network คือเครือข่ายเซิร์ฟเวอร์ที่ออกแบบมาเพื่อให้บริการไฟล์แก่ผู้ใช้ หากคุณใช้ลิงก์ CDN ในหน้าเว็บของคุณจะเป็นการย้ายความรับผิดชอบในการโฮสต์ไฟล์จากเซิร์ฟเวอร์ของคุณไปยังชุดไฟล์ภายนอก นอกจากนี้ยังมีข้อดีคือหากผู้เยี่ยมชมหน้าเว็บของคุณได้ดาวน์โหลดสำเนาของ Framework7 จาก CDN เดียวกันแล้วจะไม่ต้องดาวน์โหลดซ้ำ คุณสามารถรวมไฟล์ CDN ต่อไปนี้ลงในเอกสาร HTML
CDN ต่อไปนี้ใช้ในไฟล์ iOS App layout -
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />ใช้เพื่อรวม Framework7 iOS CSS Library ไว้ในแอปพลิเคชันของคุณ
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />ใช้เพื่อรวมรูปแบบสีที่เกี่ยวข้องกับ Framework7 iOS เข้ากับแอปพลิเคชันของคุณ
ใช้ CDN ต่อไปนี้ใน Android/Material App Layout -
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>ใช้เพื่อรวมไลบรารี Framework7 JS เข้ากับแอปพลิเคชันของคุณ
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>ใช้เพื่อรวมสไตล์วัสดุ Framework7 เข้ากับแอปพลิเคชันของคุณ
เรากำลังใช้ไลบรารีเวอร์ชัน CDN ตลอดบทช่วยสอนนี้ เราใช้ AMPPS (AMPPS คือ WAMP, MAMP และ LAMP stack ของเซิร์ฟเวอร์ Apache, MySQL, MongoDB, PHP, Perl & Python) เพื่อดำเนินการตามตัวอย่างทั้งหมดของเรา
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานแอปพลิเคชันอย่างง่ายใน 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>
//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>จากนั้นสร้างหน้า HTML ขึ้นมาอีกหนึ่งหน้าเช่น envirmnt_about.html ดังแสดงด้านล่าง -
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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ด้านบนเป็น framework7_environment.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/framework7_environment.html และเอาต์พุตจะแสดงดังที่แสดงด้านล่าง
เมื่อคุณคลิกที่แถบนำทางมันจะแสดงกล่องแจ้งเตือนพร้อมข้อความที่กำหนดเอง
คำอธิบาย
Framework7 มีเค้าโครงประเภทต่างๆสำหรับแอปพลิเคชันของคุณ รองรับเลย์เอาต์ Navbar / Toolbar สามประเภท -
| ส. เลขที่ | ประเภทเค้าโครงและคำอธิบาย |
|---|---|
| 1 | เค้าโครงแบบคงที่ เค้าโครงแบบคงที่มักจะใช้ประเภทเค้าโครงและรวมถึงแถบนำทางและแถบเครื่องมือซึ่งอาจเป็นเนื้อหาของหน้าที่เลื่อนได้และแต่ละหน้าจะมีแถบนำทางและแถบเครื่องมือของตัวเอง |
| 2 | เค้าโครงคงที่ เค้าโครงคงที่ประกอบด้วยแถบนำทางและแถบเครื่องมือของตัวเองซึ่งสามารถมองเห็นได้บนหน้าจอและไม่สามารถเลื่อนบนหน้าได้ |
| 3 | ผ่านเค้าโครง ในเค้าโครงนี้แถบนำทางและแถบเครื่องมือจะปรากฏขึ้นสำหรับทุกหน้าภายในมุมมองเดียว |
| 4 | เค้าโครงผสม คุณสามารถผสมผสานการออกแบบประเภทต่างๆในมุมมองเดียว |
ไม่มี Navbar / Toolbar
หากคุณไม่ต้องการใช้แถบนำทางและแถบเครื่องมืออย่ารวมคลาสที่เหมาะสม ( navbar-fixed , navbar-through , toolbar-fixed , toolbar-through ) ไปที่ page / pages / view
คำอธิบาย
ในบทนี้ให้เราศึกษาเกี่ยวกับnavbar โดยปกติจะวางไว้ที่ด้านบนของหน้าจอที่มีชื่อของหน้าและองค์ประกอบการนำทาง
Navbar ประกอบด้วยสามส่วนซึ่งแต่ละส่วนอาจมีเนื้อหา HTML แต่ขอแนะนำให้คุณใช้สิ่งเหล่านี้ตามวิธีที่ระบุด้านล่าง -
Left- ออกแบบมาเพื่อวางไอคอนลิงก์ย้อนกลับหรือลิงก์ข้อความเดียว
Center - ใช้เพื่อแสดงชื่อของลิงก์ของเพจหรือแท็บ
Right- ส่วนนี้คล้ายกับส่วนด้านซ้าย
ตารางต่อไปนี้สาธิตการใช้navbarโดยละเอียด -
| ส. เลขที่ | ประเภทและคำอธิบายของ Navbar |
|---|---|
| 1 | แถบนำทางพื้นฐาน สามารถสร้างแถบนำทางพื้นฐานได้โดยใช้คลาสnavbar , navbar-inner , left , centerและright |
| 2 | Navbar พร้อมลิงก์ ที่จะใช้การเชื่อมโยงในด้านซ้ายและด้านขวาเป็นส่วนหนึ่งของแถบนำทางของคุณเพียงแค่เพิ่ม<a>แท็กที่มีระดับการเชื่อมโยง |
| 3 | หลายลิงค์ หากต้องการใช้ลิงก์หลายลิงก์เพียงเพิ่ม<a class = "link">อีกสองสามรายการในส่วนที่คุณเลือก |
| 4 | เชื่อมโยงกับข้อความและไอคอน ลิงก์สามารถให้ไอคอนและข้อความได้โดยเพิ่มคลาสสำหรับไอคอนและตัดข้อความลิงก์ด้วย<span>องค์ประกอบ |
| 5 | ลิงก์ที่มีไอคอนเท่านั้น ลิงก์ Navbar สามารถจัดให้มีเฉพาะไอคอนโดยการเพิ่มคลาสไอคอนเท่านั้นให้กับลิงก์ |
| 6 | แอพที่เกี่ยวข้องและดูวิธีการ ในการเตรียมใช้งานView framework7 ช่วยให้คุณสามารถใช้เมธอดที่มีให้สำหรับ navbar |
| 7 | ซ่อนแถบนำทางโดยอัตโนมัติ navbar สามารถซ่อน / แสดงโดยอัตโนมัติสำหรับเพจที่โหลด Ajax บางเพจที่ไม่จำเป็นต้องใช้ navbar |
คำอธิบาย
Toolbar ช่วยให้เข้าถึงหน้าอื่น ๆ ได้ง่ายโดยใช้องค์ประกอบการนำทางที่ด้านล่างของหน้าจอ
คุณสามารถใช้แถบเครื่องมือได้สองวิธีตามที่ระบุในตาราง -
| ส. เลขที่ | ประเภทแถบเครื่องมือและคำอธิบาย |
|---|---|
| 1 | ซ่อน Toolbar คุณสามารถซ่อนแถบเครื่องมือโดยอัตโนมัติเมื่อคุณโหลดหน้าโดยใช้ไฟล์ no-toolbar คลาสเพื่อโหลดหน้า |
| 2 | แถบเครื่องมือด้านล่าง วางแถบเครื่องมือที่ด้านล่างของหน้าโดยใช้ toolbar-bottom ชั้นเรียน |
วิธีการของ Toolbar
สามารถใช้วิธีการต่อไปนี้กับแถบเครื่องมือ -
| ส. เลขที่ | วิธีการและคำอธิบายแถบเครื่องมือ |
|---|---|
| 1 | myApp.hideToolbar(toolbar) มันซ่อนแถบเครื่องมือที่ระบุ |
| 2 | myApp.showToolbar(toolbar) แสดงแถบเครื่องมือที่ระบุ |
| 3 | view.hideToolbar() มันซ่อนแถบเครื่องมือที่ระบุในมุมมอง |
| 4 | view.showToolbar() แสดงแถบเครื่องมือที่ระบุในมุมมอง |
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เค้าโครงแถบเครื่องมือใน Framework7
ขั้นแรกเราจะสร้างหน้า HTML หนึ่งหน้าชื่อว่า toolbar.html ดังแสดงด้านล่าง -
<!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>ตอนนี้เริ่มต้นแอปและมุมมองของคุณในไฟล์ JS ที่กำหนดเอง toolbar.js.
เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น toolbar.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/toolbar.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
คำอธิบาย
กรอบ 7 ช่วยให้การค้นหาองค์ประกอบโดยใช้searchbarระดับ
พารามิเตอร์แถบค้นหา
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | searchList ค้นหาตัวเลือก CSS หรือองค์ประกอบ HTML ของรายการ |
สตริงหรือองค์ประกอบ HTML | - |
| 2 | searchIn คุณสามารถค้นหาองค์ประกอบมุมมองรายการของตัวเลือก CSS และค้นหาองค์ประกอบโดยส่งคลาส. item-title , .item-text |
สตริง | ".item-title" |
| 3 | found มันค้นหาตัวเลือก CSS หรือองค์ประกอบ HTML โดยใช้องค์ประกอบ "พบ" นอกจากนี้ยังใช้องค์ประกอบที่พบ. แถบค้นหาหากไม่มีองค์ประกอบที่ระบุ |
สตริงหรือองค์ประกอบ HTML | - |
| 4 | notfound มันค้นหาตัวเลือก CSS หรือองค์ประกอบ HTML โดยใช้องค์ประกอบ "ไม่พบ" นอกจากนี้ยังใช้องค์ประกอบ. searchbar-not-foundหากไม่มีการระบุองค์ประกอบ |
สตริงหรือองค์ประกอบ HTML | - |
| 5 | overlay มันค้นหาตัวเลือก CSS หรือองค์ประกอบ HTML โดยใช้องค์ประกอบ "การวางซ้อนแถบค้นหา" และใช้องค์ประกอบ. Searchbar-overlayหากไม่มีการระบุองค์ประกอบ |
สตริงหรือองค์ประกอบ HTML | - |
| 6 | ignore คุณสามารถละเว้นตัวเลือก CSS สำหรับรายการได้โดยใช้แถบค้นหา |
สตริง | ".searchbar- ละเว้น" |
| 7 | customSearch เมื่อเปิดใช้งานแถบค้นหาจะไม่ค้นหาผ่านบล็อกรายการใด ๆ ซึ่งระบุโดยsearchListและคุณจะได้รับอนุญาตให้ใช้ฟังก์ชันการค้นหาแบบกำหนดเอง |
บูลีน | เท็จ |
| 8 | removeDiacritics เมื่อค้นหาองค์ประกอบให้ลบตัวกำกับเสียงโดยเปิดใช้งานพารามิเตอร์นี้ |
บูลีน | เท็จ |
| 9 | hideDividers พารามิเตอร์นี้จะซ่อนตัวแบ่งรายการและชื่อกลุ่มหากไม่มีรายการ |
บูลีน | จริง |
| 10 | hideGroups พารามิเตอร์นี้จะซ่อนกลุ่มหากไม่พบรายการในกลุ่มมุมมองรายการ |
บูลีน | จริง |
การโทรกลับของแถบค้นหา
| ส. เลขที่ | การโทรกลับและคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | onSearch วิธีนี้จะเริ่มการทำงานของฟังก์ชันโทรกลับขณะทำการค้นหา |
ฟังก์ชั่น) | - |
| 2 | onEnable วิธีนี้จะเริ่มการทำงานของฟังก์ชันโทรกลับเมื่อ Search Bar ทำงาน |
ฟังก์ชั่น) | - |
| 3 | onDisable วิธีนี้จะเริ่มการทำงานของฟังก์ชันเรียกกลับเมื่อ Search Bar ไม่ทำงาน |
ฟังก์ชั่น) | - |
| 4 | onClear วิธีนี้จะเริ่มการทำงานของฟังก์ชันเรียกกลับเมื่อคุณคลิกที่องค์ประกอบ "ล้าง" |
ฟังก์ชั่น) | - |
คุณสมบัติแถบค้นหา
| ส. เลขที่ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | mySearchbar.params แสดงพารามิเตอร์เริ่มต้นที่ส่งผ่านกับออบเจ็กต์ |
| 2 | mySearchbar.query ค้นหาคำค้นหาปัจจุบัน |
| 3 | mySearchbar.searchList กำหนดบล็อกรายการค้นหา |
| 4 | mySearchbar.container กำหนดคอนเทนเนอร์แถบค้นหาด้วยองค์ประกอบ HTML |
| 5 | mySearchbar.input กำหนดอินพุตแถบค้นหาด้วยองค์ประกอบ HTML |
| 6 | mySearchbar.active กำหนดว่าแถบค้นหาเปิดหรือปิดใช้งาน |
วิธีการแถบค้นหา
| ส. เลขที่ | วิธีการและคำอธิบาย |
|---|---|
| 1 | mySearchbar.search(query); วิธีนี้จะค้นหาข้อความค้นหาที่ผ่าน |
| 2 | mySearchbar.enable(); เปิดใช้งานแถบค้นหา |
| 3 | mySearchbar.disable(); ปิดใช้งานแถบค้นหา |
| 4 | mySearchbar.clear(); คุณสามารถล้างคำค้นหาและผลการค้นหา |
| 5 | mySearchbar.destroy(); มันทำลายอินสแตนซ์แถบค้นหา |
เหตุการณ์ JavaScript ของแถบค้นหา
| ส. เลขที่ | เหตุการณ์และคำอธิบาย | เป้าหมาย |
|---|---|---|
| 1 | search คุณสามารถเริ่มเหตุการณ์นี้ได้ในขณะที่ค้นหาองค์ประกอบ |
<div class = "list-block"> |
| 2 | clearSearch เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้คลิกที่องค์ประกอบ clearSearch |
<div class = "list-block"> |
| 3 | enableSearch เมื่อเปิดใช้งานแถบค้นหากิจกรรมนี้จะเริ่มทำงาน |
<div class = "list-block"> |
| 4 | disableSearch เมื่อแถบค้นหาถูกปิดใช้งานและผู้ใช้คลิกที่ปุ่มยกเลิกหรือองค์ประกอบ "การวางซ้อนแถบการค้นหา" เหตุการณ์นี้จะเริ่มทำงาน |
<div class = "list-block"> |
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้แถบค้นหาในการเลื่อนใน 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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้น search_bar.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/search_bar.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
หากมีการป้อนองค์ประกอบที่มีอยู่ในรายการในแถบค้นหาองค์ประกอบนั้นจะแสดงองค์ประกอบนั้นจากรายการ
หากป้อนองค์ประกอบอื่นนอกเหนือจากองค์ประกอบที่มีอยู่ในรายการองค์ประกอบนั้นจะไม่พบองค์ประกอบ
คำอธิบาย
iOS 7+ ช่วยให้คุณสร้างแอพแบบเต็มหน้าจอซึ่งอาจสร้างปัญหาเมื่อแถบสถานะของคุณซ้อนทับแอพของคุณ Framework7 แก้ปัญหานี้โดยการตรวจจับว่าแอปของคุณอยู่ในโหมดเต็มหน้าจอหรือไม่ หากแอปของคุณอยู่ในโหมดเต็มหน้าจอ Framework7 จะเพิ่มคลาสที่มีแถบสถานะซ้อนทับลงใน<html>โดยอัตโนมัติ(หรือลบออกหากแอปไม่ได้อยู่ในโหมดเต็มหน้าจอ) และคุณต้องเพิ่มคลาสการซ้อนทับแถบสถานะใน<body>ดังแสดงในรหัสต่อไปนี้ -
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...โดยค่าเริ่มต้น<div>จะถูกซ่อนและแก้ไขที่ด้านบนของหน้าจอเสมอ มันจะสามารถมองเห็นได้เมื่อ app อยู่ในโหมดเต็มหน้าจอและด้วยสถานะซ้อนทับชั้นจะถูกเพิ่ม<html>
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้แถบสถานะใน 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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด html ที่กำหนดไว้ข้างต้นเป็น status_bar.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/status_bar.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
ตัวอย่างแสดงการใช้ statusbar-overlayซึ่งช่วยให้คุณสร้างแอปแบบเต็มหน้าจอเมื่อแถบสถานะของคุณซ้อนทับแอป
คำอธิบาย
แผงด้านข้างเลื่อนไปด้านซ้ายหรือด้านขวาของหน้าจอเพื่อแสดงเนื้อหา Framework7 ช่วยให้คุณสามารถรวมแผงได้ถึง 2 แผง (แผงด้านขวาและแผงด้านซ้าย) ในแอปของคุณ คุณต้องเพิ่มพาเนลในส่วนเริ่มต้นของ<body>จากนั้นเลือกเอฟเฟกต์การเปิดโดยใช้คลาสที่แสดงรายการต่อไปนี้ -
panel-reveal - สิ่งนี้จะทำให้เนื้อหาของแอปทั้งหมดถูกย้ายออก
panel-cover - สิ่งนี้จะทำให้แผงควบคุมซ้อนทับเนื้อหาของแอป
ตัวอย่างเช่นรหัสต่อไปนี้แสดงวิธีใช้คลาสข้างต้น -
<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>ตารางต่อไปนี้แสดงประเภทพาเนลที่สนับสนุนโดย Framework77 -
| ส. เลขที่ | ประเภทและคำอธิบาย |
|---|---|
| 1 | เปิดและปิดแผง เมื่อคุณเพิ่มพาเนลและเอฟเฟกต์เราจำเป็นต้องเพิ่มฟังก์ชันเพื่อเปิดและปิดพาเนล |
| 2 | เหตุการณ์แผง ในการตรวจสอบว่าผู้ใช้โต้ตอบกับแผงควบคุมอย่างไรคุณสามารถใช้เหตุการณ์แผง |
| 3 | เปิดแผงด้วยการปัด Framework7 ให้คุณคุณลักษณะแผงเปิดกับรูดท่าทาง |
| 4 | แผงเปิดอยู่? เราสามารถตรวจสอบว่าแผงเปิดหรือไม่โดยใช้ with-panel[position]-[effect] กฎ. |
คำอธิบาย
บล็อกเนื้อหาสามารถใช้เพื่อเพิ่มเนื้อหาพิเศษด้วยรูปแบบที่แตกต่างกัน
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้บล็อกเนื้อหาใน 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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น content_block.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/content_block.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
โค้ดจะเพิ่มการจัดรูปแบบพิเศษและระยะห่างที่จำเป็นสำหรับเนื้อหาข้อความ
คำอธิบาย
Framework7 จัดเตรียมกริดประเภทต่างๆเพื่อวางเนื้อหาตามที่ผู้ใช้ต้องการ
ตารางเค้าโครงมีขนาดคอลัมน์ประเภทต่างๆตามที่อธิบายไว้ในตารางต่อไปนี้ -
| ส. เลขที่ | คลาส | คลาสตาราง | ความกว้าง |
|---|---|---|---|
| 1 | col-5 | แท็บเล็ต -5 | 5% |
| 2 | col-10 | แท็บเล็ต -10 | 10% |
| 3 | col-15 | แท็บเล็ต -15 | 15% |
| 4 | col-20 | แท็บเล็ต -20 | 20% |
| 5 | col-25 | แท็บเล็ต -25 | 25% |
| 6 | col-30 | แท็บเล็ต -30 | 30% |
| 7 | col-33 | แท็บเล็ต -33 | 33.3% |
| 8 | col-35 | แท็บเล็ต -35 | 35% |
| 9 | โคล -40 | แท็บเล็ต -40 | 40% |
| 10 | สี -45 | แท็บเล็ต -45 | 45% |
| 11 | col-50 | แท็บเล็ต -50 | 50% |
| 12 | สี -55 | แท็บเล็ต -55 | 55% |
| 13 | col-60 | แท็บเล็ต -60 | 60% |
| 14 | สี -65 | แท็บเล็ต -65 | 65% |
| 15 | สี -66 | แท็บเล็ต -66 | 66.6% |
| 16 | สี -70 | แท็บเล็ต -70 | 70% |
| 17 | สี -75 | แท็บเล็ต -75 | 75% |
| 18 | col-80 | แท็บเล็ต -80 | 80% |
| 19 | สี -85 | แท็บเล็ต -85 | 85% |
| 20 | col-90 | แท็บเล็ต -90 | 90% |
| 21 | สี -95 | แท็บเล็ต -95 | 95% |
| 21 | สี -100 | แท็บเล็ต -100 | 100% |
| 22 | col-auto | แท็บเล็ตอัตโนมัติ | ความกว้างเท่ากัน |
ตัวอย่าง
ตัวอย่างต่อไปนี้มีเค้าโครงกริดสำหรับวางเนื้อหาของคุณตามที่คุณต้องการใน 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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น layout_grid.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/layout_grid.html ผลลัพธ์จะปรากฏดังที่แสดงด้านล่าง
รหัสนี้ระบุประเภทกริดประเภทต่างๆเพื่อวางเนื้อหาตามที่ผู้ใช้ต้องการ
คำอธิบาย
Framework7 จัดเตรียมการซ้อนทับประเภทต่างๆเพื่อให้ทำงานกับแอปพลิเคชันได้อย่างราบรื่น ตารางต่อไปนี้แสดงการซ้อนทับ Framework7 บางส่วน -
| ส. เลขที่ | ประเภทการวางซ้อนและคำอธิบาย |
|---|---|
| 1 | กิริยา Modal เป็นหน้าต่างขนาดเล็กที่แสดงเนื้อหาจากแหล่งข้อมูลแยกต่างหากโดยไม่ต้องออกจากหน้าต่างหลัก |
| 2 | ป๊อปอัพ ป๊อปอัปคือกล่องป๊อปอัปที่แสดงเนื้อหาเมื่อผู้ใช้คลิกที่องค์ประกอบ |
| 3 | Popover ในการจัดการการนำเสนอเนื้อหาชั่วคราวสามารถใช้คอมโพเนนต์ป็อปโอเวอร์ |
| 4 | เอกสารการดำเนินการ แผ่นการดำเนินการถูกนำมาใช้เพื่อนำเสนอผู้ใช้ที่มีชุดของความเป็นไปได้สำหรับวิธีการจัดการกับงานที่กำหนด |
| 5 | หน้าจอเข้าสู่ระบบ หน้าจอล็อกอินแบบซ้อนทับใช้สำหรับแสดงรูปแบบหน้าจอล็อกอินซึ่งสามารถใช้ในเพจหรือป๊อปอัพหรือเป็นโอเวอร์เลย์แบบสแตนด์อโลน |
| 6 | Picker Modal ตัวเลือกโมดอลใช้เพื่อเลือกเนื้อหาที่กำหนดเองซึ่งคล้ายกับเครื่องมือเลือกปฏิทิน |
คำอธิบาย
Preloader ใน Framework7 สร้างด้วย Scalable Vector Graphic (SVG) และเคลื่อนไหวด้วย CSS ซึ่งทำให้ปรับขนาดได้ง่าย Preloader มีให้เลือกสองสี -
- ค่าเริ่มต้นคือพื้นหลังสีอ่อน
- อีกอันคือพื้นหลังสีเข้ม
คุณสามารถใช้คลาสตัวโหลดล่วงหน้าใน HTML ของคุณดังที่แสดงด้านล่าง -
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้พรีโหลดใน 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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น preloader.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/preloader.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
รหัสนี้แสดงตัวบ่งชี้ตัวโหลดล่วงหน้าซึ่งสร้างด้วย SVG และเคลื่อนไหวด้วย CSS
คำอธิบาย
แถบความคืบหน้าสามารถใช้เพื่อแสดงการโหลดเนื้อหาหรือความคืบหน้าของงานให้กับผู้ใช้ คุณสามารถระบุแถบความคืบหน้าโดยใช้คลาสแถบความคืบหน้า เมื่อผู้ใช้ไม่ทราบว่ากระบวนการโหลดจะอยู่ที่นั่นนานเท่าใดสำหรับคำขอคุณสามารถใช้progressbar-infinite class
Progress Bar JavaScript API
แถบความคืบหน้าสามารถนำมาใช้พร้อมกับ API JavaScript เพื่อระบุการแสดง , ซ่อนและความคืบหน้าคุณสมบัติโดยใช้วิธีการดังต่อไปนี้ -
| ส. เลขที่ | วิธีการ | คำอธิบายและพารามิเตอร์ |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | ตั้งค่าแถบความคืบหน้าสำหรับความคืบหน้าของงาน
|
| 2 | myApp.hideProgressbar (contain er) | มันซ่อนแถบความคืบหน้า
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | จะแสดงแถบความคืบหน้า
|
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงแถบความคืบหน้าที่กำหนดและไม่แน่นอนแบบเคลื่อนไหวเพื่อระบุกิจกรรมใน 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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น progress_bar.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/progress_bar.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
ตัวอย่างจะแสดงแถบความคืบหน้าซึ่งระบุระยะเวลาในการดำเนินการเพื่อให้กระบวนการเสร็จสมบูรณ์และแสดงแถบความคืบหน้าประเภทต่างๆเพื่อระบุกิจกรรม
คำอธิบาย
มุมมองรายการเป็นองค์ประกอบ UI ที่มีประสิทธิภาพซึ่งนำเสนอข้อมูลในรายการหลายแถวที่เลื่อนได้ Framework7 มีมุมมองรายการประเภทต่างๆเพื่อทำงานกับแอปพลิเคชันของคุณ ตารางต่อไปนี้แสดงรายการFramework7 View -
| ส. เลขที่ | ประเภทและคำอธิบาย |
|---|---|
| 1 | มุมมองรายการ มุมมองรายการเป็นส่วนประกอบอินเทอร์เฟซผู้ใช้ที่มีประสิทธิภาพซึ่งนำเสนอข้อมูลในรายการที่เลื่อนได้ซึ่งมีหลายแถว |
| 2 | รายชื่อผู้ติดต่อ รายชื่อผู้ติดต่อเป็นมุมมองรายการประเภทหนึ่งซึ่งสามารถใช้เพื่อแสดงรายชื่อผู้ติดต่อของบุคคล |
| 3 | มุมมองรายการสื่อ มุมมองรายการสื่อใช้เพื่อแสดงโครงสร้างข้อมูลที่ซับซ้อนเช่นผลิตภัณฑ์บริการข้อมูลผู้ใช้ |
| 4 | Swipeout การปัดนิ้วช่วยให้คุณเปิดเผยการทำงานของเมนูที่ซ่อนอยู่โดยการปัดไปที่องค์ประกอบของรายการ |
| 5 | รายการเรียงลำดับ รายการที่จัดเรียงได้คือประเภทของมุมมองรายการซึ่งจัดเรียงองค์ประกอบของมุมมองรายการ |
| 6 | รายการเสมือน รายการเสมือนเป็นประเภทของมุมมองรายการซึ่งรวมถึงรายการองค์ประกอบข้อมูลจำนวนมากโดยไม่ทำให้ประสิทธิภาพลดลง |
คำอธิบาย
หีบเพลงเป็นองค์ประกอบควบคุมแบบกราฟิกที่แสดงเป็นรายการแบบเรียงซ้อนกัน หีบเพลงแต่ละชิ้นสามารถขยายหรือยืดออกเพื่อเปิดเผยเนื้อหาที่เกี่ยวข้องกับหีบเพลงนั้นได้
เค้าโครงที่พับได้
เมื่อคุณใช้องค์ประกอบที่ยุบได้แยกจากกันคุณจะต้องละเว้นองค์ประกอบกระดาษห่อหีบเพลง
ต่อไปนี้เป็นโครงสร้างของเค้าโครงที่ยุบได้ -
<!-- 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>คลาสต่อไปนี้ใช้สำหรับหีบเพลงใน Framework7 -
| ส. เลขที่ | ชั้นเรียนและคำอธิบาย |
|---|---|
| 1 | accordion-list เป็นคลาสเสริมซึ่งมีกลุ่มรายการหีบเพลง |
| 2 | accordion-item เป็นคลาสที่จำเป็นสำหรับสินค้าหีบเพลงเดี่ยว |
| 3 | accordion-item-toggle เป็นคลาสบังคับที่ใช้เพื่อขยายเนื้อหาไอเท็มหีบเพลง |
| 4 | accordion-item-content เป็นคลาสบังคับที่ใช้สำหรับเนื้อหาไอเท็มหีบเพลงที่ซ่อนอยู่ |
| 5 | accordion-item-expanded เป็นหีบเพลงที่ขยายได้เพียงชิ้นเดียว |
Accordion JavaScript API
เมธอด JavaScript API ใช้เพื่อเปิดและปิดหีบเพลงโดยใช้โปรแกรม
ประกอบด้วยวิธี JavaScript API ดังต่อไปนี้ -
myApp.accordionOpen(item) - ใช้เปิดหีบเพลง
myApp.accordionClose(item) - ใช้ปิดหีบเพลง
myApp.accordionToggle(item) - ใช้ในการสลับหีบเพลง
วิธีการทั้งหมดมีพารามิเตอร์ที่เรียกว่าitemซึ่งเป็น HTML หรือองค์ประกอบสตริงของ accordion-item
เหตุการณ์หีบเพลง
หีบเพลงประกอบด้วยสี่เหตุการณ์ตามที่ระบุไว้ในตารางต่อไปนี้ -
| ส. เลขที่ | เหตุการณ์ | เป้าหมายและคำอธิบาย |
|---|---|---|
| 1 | เปิด | Accordion item เมื่อคุณเปิดภาพเคลื่อนไหวเหตุการณ์นี้จะเริ่มทำงาน |
| 2 | เปิด | Accordion item เมื่อการเปิดภาพเคลื่อนไหวเสร็จสิ้นกิจกรรมนี้จะเริ่มขึ้น |
| 3 | ปิด | Accordion item เมื่อคุณปิดภาพเคลื่อนไหวเหตุการณ์นี้จะเริ่มทำงาน |
| 4 | ปิด | Accordion item เมื่อการปิดแอนิเมชันเสร็จสิ้นกิจกรรมนี้จะเริ่มทำงาน |
มุมมองรายการหีบเพลง
ในมุมมองรายการหีบเพลงคุณสามารถใช้องค์ประกอบลิงก์รายการแทนการสลับหีบเพลงได้
<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>ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้หีบเพลงใน 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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น accordion.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/accordion.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
ตัวอย่างมีเค้าโครงที่ยุบได้ซึ่งสามารถขยายได้เพื่อแสดงเนื้อหาที่เกี่ยวข้องกับหีบเพลง
คำอธิบาย
การ์ดมีข้อมูลที่เป็นระเบียบซึ่งเกี่ยวข้องกับเรื่องเดียวเช่นรูปภาพลิงก์และข้อความ ตารางต่อไปนี้แสดงประเภทการ์ด Framework7 -
| ส. เลขที่ | ประเภทและคำอธิบาย |
|---|---|
| 1 | เค้าโครง HTML ของการ์ด เค้าโครง HTML ของการ์ดพื้นฐานใช้คลาสการ์ดเพื่อจัดเรียงรายการ |
| 2 | ดูรายการด้วยการ์ด คุณสามารถใช้บัตรเป็นองค์ประกอบมุมมองรายการโดยการเพิ่มบัตรรายการระดับ<div class = "รายการบล็อก"> |
คำอธิบาย
ชิปเป็นกลุ่มเล็ก ๆ ของเอนทิตีซึ่งอาจมีรูปถ่ายชื่อเรื่องขนาดเล็กและข้อมูลสั้น ๆ
เค้าโครง HTML ของชิป
โค้ดต่อไปนี้แสดงเค้าโครง HTML ของชิปพื้นฐานที่ใช้ใน 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>เลย์เอาต์ HTML ด้านบนประกอบด้วยคลาสมากมายตามรายการด้านล่าง -
chips - เป็นที่เก็บชิป
chip-media- นี่คือองค์ประกอบสื่อชิปที่สามารถมีรูปภาพอวาตาร์หรือไอคอนได้ เป็นทางเลือก
card-label - เป็นป้ายข้อความชิป
card-delete - เป็นลิงค์ไอคอนลบที่เป็นทางเลือกของชิป
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงถึงเอนทิตีเช่นอัลบั้มองค์ประกอบการ์ด ฯลฯ พร้อมกับภาพถ่ายและข้อมูลโดยย่อ -
<!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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น cards_html_layout.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/cards_html_layout.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
ตัวอย่างนี้แสดงถึงเอนทิตีที่ซับซ้อนในบล็อกขนาดเล็กเช่นอัลบั้มองค์ประกอบการ์ดรูปภาพที่โพสต์ซึ่งประกอบด้วยรูปภาพสตริงชื่อและข้อมูลโดยย่อ
คำอธิบาย
Framework7 จัดเตรียมกลุ่มของปุ่มที่พร้อมใช้งานโดยเพียงแค่เพิ่มคลาสที่เหมาะสมให้กับลิงก์หรือปุ่มอินพุต
| ส. เลขที่ | ประเภทและคำอธิบาย |
|---|---|
| 1 | ปุ่มธีม iOS Framework7 มีปุ่มธีม iOS มากมายซึ่งสามารถใช้ได้โดยใช้คลาสที่เหมาะสม |
| 2 | ปุ่มธีมวัสดุ ธีมวัสดุมีปุ่มมากมายสำหรับใช้ในแอปพลิเคชันของคุณโดยใช้คลาสที่เหมาะสม |
คำอธิบาย
Framework7 มีปุ่มการดำเนินการแบบลอยสำหรับการดำเนินการที่เลื่อนขั้น จะปรากฏเป็นไอคอนวงกลมลอยอยู่เหนือ UI มันมีพฤติกรรมการเคลื่อนไหวที่มีmorphing , การเปิดตัวและการถ่ายโอนจุดยึด
ปุ่มการดำเนินการลอยได้รับการสนับสนุนในธีม Material เท่านั้น
ตารางต่อไปนี้แสดงรายการประเภทปุ่มการดำเนินการที่ใช้ใน Framework7 -
| ส. เลขที่ | ประเภทและคำอธิบาย |
|---|---|
| 1 | เค้าโครงปุ่มการดำเนินการลอย มันง่ายมาก คุณเพียงแค่ต้องวางไว้เป็นเด็กของหน้าหรือมุมมอง |
| 2 | Morph To Popover หากคุณต้องการเปิดป๊อปโอเวอร์เมื่อคลิกปุ่มการกระทำแบบลอยคุณสามารถใช้คลาสลอยปุ่มเพื่อป๊อปโอเวอร์ |
| 3 | สายความเร็ว คุณสามารถเรียกการกระทำที่เกี่ยวข้องเมื่อคลิกที่ปุ่มการกระทำลอยโดยใช้สายความเร็ว |
คำอธิบาย
แบบฟอร์มใช้สำหรับการโต้ตอบกับผู้ใช้และรวบรวมข้อมูลจากผู้ใช้เว็บโดยใช้ช่องข้อความช่องทำเครื่องหมายปุ่มตัวเลือกเป็นต้น
Framework7 จัดเตรียมองค์ประกอบฟอร์มประเภทต่างๆเพื่อให้ทำงานกับแอปพลิเคชันได้อย่างราบรื่นตามที่ระบุไว้ในตารางด้านล่าง -
| ส. เลขที่ | ประเภทการวางซ้อนและคำอธิบาย |
|---|---|
| 1 | องค์ประกอบของฟอร์ม องค์ประกอบของฟอร์มใช้เพื่อสร้างเค้าโครงฟอร์มที่ดูดี |
| 2 | ช่องทำเครื่องหมายและวิทยุ ส่วนขยายมุมมองรายการช่วยให้คุณสร้างช่องทำเครื่องหมายและอินพุตวิทยุใน Framework7 |
| 3 | เลือกอัจฉริยะ Smart select เป็นวิธีง่ายๆในการเปลี่ยนรูปแบบโดยเลือกไปที่ไดนามิกเพจโดยใช้กลุ่มช่องทำเครื่องหมายและอินพุตวิทยุ |
| 4 | องค์ประกอบที่ปิดใช้งาน องค์ประกอบสามารถปิดใช้งานได้โดยใช้คลาสปิดใช้งานกับองค์ประกอบหรือเพิ่มแอตทริบิวต์ที่ปิดใช้งานสำหรับองค์ประกอบฟอร์ม |
| 5 | แบบฟอร์มข้อมูล Framework7 มีวิธีการที่มีประโยชน์น้อยมากซึ่งทำให้การทำงานกับแบบฟอร์มเป็นเรื่องง่าย |
| 6 | การจัดเก็บแบบฟอร์ม เป็นเรื่องง่ายด้วยการจัดเก็บแบบฟอร์มเพื่อจัดเก็บและแยกวิเคราะห์ข้อมูลฟอร์มโดยอัตโนมัติบนเพจที่โหลด Ajax |
| 7 | ส่งแบบฟอร์ม Ajax Framework7 ช่วยให้คุณส่งข้อมูลโดยอัตโนมัติโดยใช้ Ajax |
คำอธิบาย
แท็บคือชุดของเนื้อหาที่จัดกลุ่มอย่างมีเหตุผลซึ่งช่วยให้เราสามารถพลิกไปมาระหว่างแท็บเหล่านี้ได้อย่างรวดเร็วและประหยัดพื้นที่เช่นหีบเพลง
เค้าโครงแท็บ
รหัสต่อไปนี้กำหนดโครงร่างสำหรับแท็บ -
<!-- 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>ที่ไหน -
<div class = "tabs">- เป็นกระดาษห่อหุ้มที่จำเป็นสำหรับทุกแท็บ หากเราพลาดสิ่งนี้แท็บต่างๆจะไม่ทำงานเลย
-
<div class = "tab"> - เป็นแท็บเดียวที่ควรมี unique id แอตทริบิวต์
-
<div class = "tab active">- เป็นแท็บเดียวที่ใช้งานอยู่ซึ่งใช้คลาสที่ใช้งานเพิ่มเติมเพื่อให้มองเห็นแท็บ (ใช้งานอยู่)
การสลับระหว่างแท็บ
คุณสามารถใช้คอนโทรลเลอร์บางตัวในเค้าโครงแท็บเพื่อให้ผู้ใช้สลับไปมาระหว่างกันได้
สำหรับสิ่งนี้คุณต้องสร้างลิงก์ (แท็ก <a>) ที่มีคลาสtab-linkและแอตทริบิวต์hrefเท่ากับแอตทริบิวต์idของแท็บเป้าหมาย -
<!-- 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>สลับหลายแท็บ
หากคุณใช้ลิงก์แท็บเดียวเพื่อสลับไปมาระหว่างแท็บต่างๆคุณสามารถใช้คลาสแทนการใช้แอตทริบิวต์ของIDและแท็บข้อมูลได้
<!-- 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>ข้อมูลแท็บแอตทริบิวต์ของแท็บเชื่อมโยงมีตัวเลือก CSS เป้าหมาย / แท็บแท็บ
เราสามารถใช้แท็บต่างๆได้ตามที่ระบุไว้ในตารางต่อไปนี้ -
| ส. เลขที่ | ประเภทแท็บและคำอธิบาย |
|---|---|
| 1 | แท็บแบบอินไลน์ แท็บแบบอินไลน์คือชุดของการจัดกลุ่มแบบอินไลน์ที่ช่วยให้คุณพลิกไปมาระหว่างแท็บได้อย่างรวดเร็ว |
| 2 | สลับแท็บจาก Navbar เราสามารถวางแท็บในแถบนำทางเพื่อให้คุณสามารถพลิกไปมาระหว่างแท็บเหล่านั้นได้ |
| 3 | เปลี่ยนมุมมองจากแถบแท็บ แท็บเดียวสามารถใช้เพื่อสลับระหว่างมุมมองที่มีการนำทางและเค้าโครงของตัวเอง |
| 4 | แท็บเคลื่อนไหว คุณสามารถใช้การเปลี่ยนอย่างง่าย (ภาพเคลื่อนไหว) เพื่อสลับแท็บ |
| 5 | แท็บแบบกวาดนิ้วได้ คุณสามารถสร้างแท็บแบบรูดได้ด้วยการเปลี่ยนอย่างง่ายโดยใช้คลาสแท็บที่รูดได้ - ห่อสำหรับแท็บ |
| 6 | เหตุการณ์ JavaScript ของแท็บ สามารถใช้เหตุการณ์ JavaScript เมื่อคุณทำงานกับโค้ด JavaScript สำหรับแท็บ |
| 7 | แสดงแท็บโดยใช้ JavaScript คุณสามารถสลับหรือแสดงแท็บโดยใช้วิธีการของ JavaScript |
คำอธิบาย
แถบเลื่อนตัวเลื่อนเป็นตัวเลื่อนแบบสัมผัสที่ทรงพลังและทันสมัยที่สุดและมาใน Framework7 พร้อมคุณสมบัติมากมาย
เค้าโครง HTML ต่อไปนี้แสดงแถบเลื่อนตัวเลื่อน -
<!-- 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>คลาสต่อไปนี้ใช้สำหรับตัวเลื่อนตัวเลื่อน -
swiper-container - เป็นองค์ประกอบที่จำเป็นสำหรับคอนเทนเนอร์ตัวเลื่อนหลักและใช้สำหรับสไลด์และเลขหน้า
Swiper-wrapper - เป็นองค์ประกอบที่จำเป็นสำหรับสไลด์กระดาษห่อเพิ่มเติม
swiper-slide - เป็นองค์ประกอบสไลด์เดียวและอาจมี HTML อยู่ภายใน
swiper-pagination - เป็นทางเลือกสำหรับสัญลักษณ์แสดงหัวข้อย่อยและสร้างขึ้นโดยอัตโนมัติ
คุณสามารถเริ่มต้น swiper ด้วย JavaScript โดยใช้วิธีการที่เกี่ยวข้อง -
myApp.swiper(swiperContainer,parameters)หรือ
new Swiper(swiperContainer, parameters)ทั้งสองวิธีใช้เพื่อเริ่มต้นตัวเลื่อนด้วยตัวเลือก
วิธีการที่ระบุข้างต้นมีพารามิเตอร์ต่อไปนี้ -
swiperContainer- เป็นHTMLElement หรือสตริงของ swiper container และจำเป็น
parameters - เป็นองค์ประกอบเสริมที่มีวัตถุที่มีพารามิเตอร์ swiper
ตัวอย่างเช่น -
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});เป็นไปได้ที่จะเข้าถึงอินสแตนซ์ของ swiper และคุณสมบัติswiperของคอนเทนเนอร์ของตัวเลื่อนมีองค์ประกอบ HTML ต่อไปนี้ -
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();คุณสามารถดูวิธีและประเภทต่างๆของตัวปัดได้ในตารางต่อไปนี้ -
| ส. เลขที่ | ประเภทและคำอธิบายของ Swiper |
|---|---|
| 1 | Swiper เริ่มต้นพร้อมเลขหน้า เป็นแถบเลื่อนแบบสัมผัสที่ทันสมัยและตัวเลื่อนจะเลื่อนในแนวนอนโดยค่าเริ่มต้น |
| 2 | Swiper แนวตั้ง อันนี้ยังใช้เป็น swiper เริ่มต้น แต่จะปัดในแนวตั้ง |
| 3 | ด้วยช่องว่างระหว่างสไลด์ ตัวปัดนี้ใช้เพื่อให้มีช่องว่างระหว่างสองสไลด์ |
| 4 | Swipers หลายตัว เครื่องปัดน้ำฝนนี้ใช้ตัวเลื่อนมากกว่าหนึ่งตัวในหน้าเดียว |
| 5 | Swipers ที่ซ้อนกัน เป็นการผสมผสานระหว่างสไลด์แนวตั้งและแนวนอน |
| 6 | การควบคุมแบบกำหนดเอง ใช้สำหรับการควบคุมแบบกำหนดเองเพื่อเลือกหรือปัดสไลด์ใด ๆ |
| 7 | ขี้เกียจโหลด สามารถใช้สำหรับไฟล์มัลติมีเดียซึ่งต้องใช้เวลาในการโหลด |
คำอธิบาย
เบราว์เซอร์รูปภาพคล้ายกับส่วนประกอบเบราว์เซอร์รูปภาพของ iOS เพื่อแสดงกลุ่มของรูปภาพซึ่งสามารถซูมและเลื่อนได้ เพื่อเลื่อนระหว่างภาพ, เบราว์เซอร์ภาพใช้Swiper Slider
ตารางต่อไปนี้แสดงประเภทเบราว์เซอร์รูปภาพที่ใช้ใน framework7 -
| ส. เลขที่ | ประเภทและคำอธิบายของเบราว์เซอร์รูปภาพ |
|---|---|
| 1 | สร้างอินสแตนซ์ Photo Browser เบราว์เซอร์รูปภาพสามารถสร้างและเริ่มต้นได้โดยใช้ JavaScript เท่านั้น |
| 2 | พารามิเตอร์ Photo Browser Framework7 แสดงรายการพารามิเตอร์ซึ่งใช้กับเบราว์เซอร์รูปภาพ |
| 3 | วิธีการและคุณสมบัติของเบราว์เซอร์ภาพถ่าย คุณจะได้รับตัวแปรอินสแตนซ์เริ่มต้นเพื่อใช้วิธีและคุณสมบัติของเบราว์เซอร์รูปภาพเมื่อคุณเริ่มต้นเบราว์เซอร์รูปภาพ |
| 4 | อาร์เรย์รูปภาพ ในระหว่างการเริ่มต้นเบราว์เซอร์รูปภาพคุณต้องส่งอาร์เรย์ที่มีพารามิเตอร์รูปภาพ / วิดีโอในรูปภาพ |
| 5 | เทมเพลตเบราว์เซอร์รูปภาพ Framework7 มีเทมเพลตเบราว์เซอร์รูปภาพจำนวนมากซึ่งคุณสามารถส่งผ่านการเริ่มต้นเบราว์เซอร์รูปภาพ |
คำอธิบาย
การเติมข้อความอัตโนมัติเป็นองค์ประกอบที่เหมาะกับมือถือและการสัมผัสที่ดีที่สุดของ Framework7 ซึ่งอาจเป็นแบบเลื่อนลงหรือแบบสแตนด์อโลน คุณสามารถสร้างและเริ่มต้นอินสแตนซ์เติมข้อความอัตโนมัติโดยใช้วิธี JavaScript -
myApp.autocomplete(parameters)โดยที่พารามิเตอร์เป็นออบเจ็กต์ที่จำเป็นซึ่งใช้ในการเริ่มต้นอินสแตนซ์การเติมข้อความอัตโนมัติ
พารามิเตอร์การเติมข้อความอัตโนมัติ
ตารางต่อไปนี้แสดงรายการพารามิเตอร์การเติมข้อความอัตโนมัติที่มีอยู่ใน Framework7 -
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | openIn กำหนดวิธีการเปิดการเติมข้อความอัตโนมัติซึ่งสามารถใช้เป็นรายการแบบเลื่อนลงป๊อปอัปหรือเพจได้ |
สตริง | หน้า |
| 2 | source ใช้อินสแตนซ์การเติมข้อความอัตโนมัติข้อความค้นหาและฟังก์ชันการแสดงผลเพื่อส่งผ่านรายการที่ตรงกันด้วยอาร์เรย์ |
ฟังก์ชัน (เติมข้อความอัตโนมัติแบบสอบถามแสดงผล) | - |
| 3 | valueProperty ระบุค่ารายการของคีย์ของวัตถุรายการที่ตรงกัน |
สตริง | id |
| 4 | limit จะแสดงรายการจำนวน จำกัด ในการเติมข้อความอัตโนมัติต่อการค้นหา |
จำนวน | - |
| 5 | preloader ตัวโหลดล่วงหน้าสามารถใช้เพื่อระบุโครงร่างการเติมข้อความอัตโนมัติโดยตั้งค่าเป็นจริง |
บูลีน | เท็จ |
| 6 | preloaderColor มันระบุสีของตัวโหลดล่วงหน้า โดยค่าเริ่มต้นสีจะเป็น "สีดำ" |
สตริง | - |
| 7 | value กำหนดอาร์เรย์ด้วยค่าเริ่มต้นที่เลือก |
อาร์เรย์ | - |
| 8 | textProperty ระบุค่ารายการของคีย์ของวัตถุรายการที่ตรงกันซึ่งสามารถใช้เป็นหัวเรื่องของตัวเลือกที่แสดง |
สตริง | ข้อความ |
พารามิเตอร์การเติมข้อความอัตโนมัติแบบสแตนด์อโลน
ตารางต่อไปนี้แสดงรายการพารามิเตอร์การเติมข้อความอัตโนมัติแบบสแตนด์อโลนที่มีอยู่ใน Framework7 -
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | opener เป็นพารามิเตอร์องค์ประกอบสตริงหรือ HTML ซึ่งจะเปิดหน้าเติมข้อความอัตโนมัติแบบสแตนด์อโลน |
สตริงหรือ HTMLElement | - |
| 2 | popupCloseText ใช้เพื่อปิดป๊อปอัปการเติมข้อความอัตโนมัติ |
สตริง | 'ปิด' |
| 3 | backText มีลิงค์ย้อนกลับเมื่อเปิดการเติมข้อความอัตโนมัติเป็นหน้า |
สตริง | 'กลับ' |
| 4 | pageTitle ระบุชื่อหน้าการเติมข้อความอัตโนมัติ |
สตริง | - |
| 5 | searchbarPlaceholderText ระบุข้อความตัวยึดแถบค้นหา |
สตริง | 'ค้นหา' |
| 6 | searchbarCancelText เป็นการกำหนดข้อความปุ่มยกเลิกแถบค้นหา |
สตริง | 'ยกเลิก' |
| 7 | notFoundText จะแสดงข้อความเมื่อไม่พบองค์ประกอบที่ตรงกัน |
สตริง | 'ไม่พบ' |
| 8 | multiple อนุญาตให้เลือกหลายรายการโดยตั้งค่าเป็นจริง |
บูลีน | เท็จ |
| 9 | navbarTheme ระบุธีมสีสำหรับ navbar |
สตริง | - |
| 10 | backOnSelect เมื่อผู้ใช้เลือกค่าการเติมข้อความอัตโนมัติจะถูกปิดโดยตั้งค่าเป็นจริง |
บูลีน | เท็จ |
| 11 | formTheme ระบุธีมสีสำหรับแบบฟอร์ม |
สตริง | - |
พารามิเตอร์การเติมข้อความอัตโนมัติแบบเลื่อนลง
ตารางต่อไปนี้แสดงรายการพารามิเตอร์การเติมข้อความอัตโนมัติแบบหล่นลงที่มีอยู่ใน Framework7 -
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | input เป็นองค์ประกอบสตริงหรือ HTML ที่ใช้สำหรับการป้อนข้อความ |
สตริงหรือ HTMLElement | - |
| 2 | dropdownPlaceholderText ระบุข้อความตัวยึดแบบเลื่อนลง |
สตริง | - |
| 3 | updateInputValueOnSelect คุณสามารถอัปเดตค่าอินพุตเมื่อเลือกโดยตั้งค่าเป็นจริง |
บูลีน | จริง |
| 4 | expandInput คุณสามารถขยายการป้อนข้อความในมุมมองรายการเพื่อทำให้เต็มหน้าจอกว้างขึ้นในระหว่างการแสดงแบบเลื่อนลงโดยการตั้งค่ารายการที่ป้อนให้เป็นจริง |
บูลีน | เท็จ |
ฟังก์ชันการโทรกลับของการเติมข้อความอัตโนมัติ
ตารางด้านล่างแสดงรายการพารามิเตอร์การเติมข้อความอัตโนมัติแบบหล่นลงที่มีอยู่ใน Framework7 -
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | onChange เมื่อใดก็ตามที่มีการเปลี่ยนแปลงค่าการเติมข้อความอัตโนมัติฟังก์ชันเรียกกลับนี้จะทำงาน |
ฟังก์ชัน (เติมข้อความอัตโนมัติค่า) | - |
| 2 | onOpen เมื่อใดก็ตามที่เปิดการเติมข้อความอัตโนมัติฟังก์ชันเรียกกลับนี้จะทำงาน |
ฟังก์ชัน (เติมข้อความอัตโนมัติ) | - |
| 3 | onClose เมื่อใดก็ตามที่ปิดการเติมข้อความอัตโนมัติฟังก์ชันเรียกกลับนี้จะทำงาน |
ฟังก์ชัน (เติมข้อความอัตโนมัติ) | - |
เทมเพลตการเติมข้อความอัตโนมัติ
ตารางต่อไปนี้แสดงรายการพารามิเตอร์การเติมข้อความอัตโนมัติแบบหล่นลงที่มีอยู่ใน Framework7 -
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | navbarTemplate เป็นเทมเพลต navbar เติมข้อความอัตโนมัติแบบสแตนด์อโลน |
สตริง | - |
| 2 | itemTemplate เป็นไอเท็มฟอร์ม template7 แบบสแตนด์อโลน |
สตริง | - |
| 3 | dropdownTemplate เป็นเทมเพลตแบบเลื่อนลง template7 |
สตริง | - |
| 4 | dropdownItemTemplate มันเป็นรายการแบบเลื่อนลง template7 |
สตริง | - |
| 5 | dropdownPlaceholderTemplate เป็นรายการตัวยึดแบบเลื่อนลง template7 |
สตริง | - |
เทมเพลตเริ่มต้น
ต่อไปนี้เป็นข้อมูลโค้ดเทมเพลตเริ่มต้นสำหรับพารามิเตอร์เทมเพลตที่กำหนดไว้ด้านบน -
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>วิธีการเติมข้อความอัตโนมัติ
ตารางต่อไปนี้ระบุวิธีการเติมข้อความอัตโนมัติที่มีอยู่ใน Framework7 -
| ส. เลขที่ | วิธีการและคำอธิบาย |
|---|---|
| 1 | myAutocomplete.params กำหนดพารามิเตอร์การเริ่มต้นที่ส่งผ่านไปพร้อมกับอ็อบเจ็กต์ |
| 2 | myAutocomplete.value เป็นการกำหนดอาร์เรย์ด้วยค่าที่เลือก |
| 3 | myAutocomplete.opened จะเปิดการเติมข้อความอัตโนมัติหากตั้งค่าเป็นจริง |
| 4 | myAutocomplete.dropdown ระบุอินสแตนซ์ของรายการแบบเลื่อนลงการเติมข้อความอัตโนมัติ |
| 5 | myAutocomplete.popup ระบุอินสแตนซ์ของป๊อปอัปการเติมข้อความอัตโนมัติ |
| 6 | myAutocomplete.page ระบุอินสแตนซ์ของหน้าเติมข้อความอัตโนมัติ |
| 7 | myAutocomplete.pageData เป็นการกำหนดข้อมูลหน้าการเติมข้อความอัตโนมัติ |
| 8 | myAutocomplete.searchbar เป็นการกำหนดอินสแตนซ์ของแถบค้นหาที่เติมข้อความอัตโนมัติ |
คุณสมบัติการเติมข้อความอัตโนมัติ
ตารางต่อไปนี้ระบุวิธีการเติมข้อความอัตโนมัติที่มีอยู่ใน Framework7 -
| ส. เลขที่ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | myAutocomplete.open() จะเปิดการเติมข้อความอัตโนมัติซึ่งสามารถใช้เป็นรายการแบบเลื่อนลงป๊อปอัปหรือเพจ |
| 2 | myAutocomplete.close() จะปิดการเติมข้อความอัตโนมัติ |
| 3 | myAutocomplete.showPreloader() มันแสดงตัวโหลดล่วงหน้าของการเติมข้อความอัตโนมัติ |
| 4 | myAutocomplete.hidePreloader() มันซ่อนตัวโหลดล่วงหน้าของการเติมข้อความอัตโนมัติ |
| 5 | myAutocomplete.destroy() มันทำลายอินสแตนซ์ตัวโหลดล่วงหน้าอัตโนมัติและลบเหตุการณ์ทั้งหมด |
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้พารามิเตอร์เติมข้อความอัตโนมัติที่ซ่อนอยู่ใน 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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น autocomplete.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/autocomplete.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
ตัวอย่างนี้ให้การเติมข้อความอัตโนมัติของค่าในเมนูแบบเลื่อนลงแบบง่ายรายการแบบเลื่อนลงพร้อมค่าทั้งหมดแบบเลื่อนลงพร้อมตัวยึดการเติมข้อความอัตโนมัติแบบสแตนด์อโลนเป็นต้น
คำอธิบาย
เครื่องมือเลือกดูเหมือนตัวเลือกเนทีฟของ iOS และเป็นส่วนประกอบที่มีประสิทธิภาพที่ช่วยให้คุณสามารถเลือกค่าใด ๆ จากรายการและยังใช้เพื่อสร้างตัวเลือกการวางซ้อนที่กำหนดเอง คุณสามารถใช้ Picker เป็นองค์ประกอบแบบอินไลน์หรือเป็นภาพซ้อนทับ ตัวเลือกการวางซ้อนจะถูกแปลงเป็น Popover บนแท็บเล็ต (iPad) โดยอัตโนมัติ
ใช้วิธีการของแอพต่อไปนี้คุณสามารถสร้างและเริ่มต้นวิธีการ JavaScript -
myApp.picker(parameters)ในกรณีที่พารามิเตอร์เป็นอ็อบเจ็กต์ที่ต้องการใช้เพื่อเริ่มต้นอินสแตนซ์ตัวเลือกและเป็นวิธีการที่จำเป็น
พารามิเตอร์ตัวเลือก
ตารางต่อไปนี้ระบุพารามิเตอร์ที่มีอยู่ในตัวเลือก -
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | container สตริงที่มีตัวเลือก CSS หรือ HTMLElement ที่ใช้ในการสร้าง Picker HTML สำหรับตัวเลือกแบบอินไลน์ |
สตริงหรือ HTMLElement | - |
| 2 | input องค์ประกอบอินพุตที่เกี่ยวข้องวางด้วยสตริงด้วยตัวเลือก CSS หรือ HTMLElement |
สตริงหรือ HTMLElement | - |
| 3 | scrollToInput ใช้เพื่อเลื่อนวิวพอร์ต (เนื้อหาหน้า) ของอินพุตเมื่อใดก็ตามที่เปิดตัวเลือก |
บูลีน | จริง |
| 4 | inputReadOnly ใช้เพื่อตั้งค่าแอตทริบิวต์ "อ่านอย่างเดียว" ในอินพุตที่ระบุ |
บูลีน | จริง |
| 5 | convertToPopover ใช้เพื่อแปลงตัวเลือกกิริยาเป็น Popover บนหน้าจอขนาดใหญ่เช่น iPad |
บูลีน | จริง |
| 6 | onlyOnPopover คุณสามารถเปิดเครื่องมือเลือกใน Popover ได้โดยเปิดใช้งาน |
บูลีน | จริง |
| 7 | cssClass ในการเลือกโมดอลคุณสามารถใช้ชื่อคลาส CSS เพิ่มเติมได้ |
สตริง | - |
| 8 | closeByOutsideClick คุณสามารถปิดเครื่องมือเลือกได้โดยคลิกด้านนอกตัวเลือกหรือองค์ประกอบอินพุตโดยเปิดใช้งานเมธอด |
บูลีน | เท็จ |
| 9 | toolbar ใช้เพื่อเปิดใช้งานแถบเครื่องมือโมดอลตัวเลือก |
บูลีน | จริง |
| 10 | toolbarCloseText ใช้สำหรับปุ่มแถบเครื่องมือเสร็จสิ้น / ปิด |
สตริง | 'เสร็จสิ้น' |
| 11 | toolbarTemplate เป็นเทมเพลต HTML ของแถบเครื่องมือโดยค่าเริ่มต้นจะเป็นสตริง HTML พร้อมเทมเพลตต่อไปนี้ - |
สตริง | - |
พารามิเตอร์ตัวเลือกเฉพาะ
ตารางต่อไปนี้แสดงรายการพารามิเตอร์ตัวเลือกเฉพาะที่มี -
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | rotateEffect เปิดใช้งานเอฟเฟกต์การหมุน 3 มิติในตัวเลือก |
บูลีน | เท็จ |
| 2 | momentumRatio เมื่อคุณปล่อยตัวเลือกหลังจากสัมผัสและเคลื่อนที่อย่างรวดเร็วมันจะสร้างโมเมนตัมมากขึ้น |
จำนวน | 7 |
| 3 | updateValuesOnMomentum ใช้เพื่ออัปเดตตัวเลือกและค่าอินพุตระหว่างโมเมนตัม |
บูลีน | เท็จ |
| 4 | updateValuesOnTouchmove ใช้เพื่ออัปเดตตัวเลือกและค่าอินพุตระหว่างการเคลื่อนย้ายแบบสัมผัส |
บูลีน | จริง |
| 5 | value อาร์เรย์มีค่าเริ่มต้นและแต่ละรายการอาร์เรย์แสดงถึงค่าของคอลัมน์ที่เกี่ยวข้อง |
อาร์เรย์ | - |
| 6 | formatValue ฟังก์ชันนี้ใช้เพื่อจัดรูปแบบค่าอินพุตและควรส่งคืนค่าสตริงใหม่ / ที่จัดรูปแบบ ค่าและdisplayValuesมีอาร์เรย์ของคอลัมน์ที่เกี่ยวข้อง |
ฟังก์ชัน (p, ค่า, displayValues) | - |
| 7 | cols ทุกรายการอาร์เรย์แทนออบเจ็กต์ที่มีพารามิเตอร์คอลัมน์ |
อาร์เรย์ | - |
การโทรกลับของพารามิเตอร์ตัวเลือก
ตารางต่อไปนี้แสดงรายการฟังก์ชันการโทรกลับที่มีอยู่ในตัวเลือก -
| ส. เลขที่ | การโทรกลับและคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | onChange ฟังก์ชันเรียกกลับจะดำเนินการเมื่อใดก็ตามที่ค่าตัวเลือกเปลี่ยนไปและค่าและ displayValuesคืออาร์เรย์ของคอลัมน์ที่เกี่ยวข้อง |
ฟังก์ชัน (p, ค่า, displayValues) | - |
| 2 | onOpen ฟังก์ชันเรียกกลับจะทำงานทุกครั้งที่เปิดตัวเลือก |
ฟังก์ชัน (p) | - |
| 3 | onClose ฟังก์ชันเรียกกลับจะดำเนินการทุกครั้งที่ปิดตัวเลือก |
ฟังก์ชัน (p) | - |
พารามิเตอร์คอลัมน์
ในช่วงเวลาของการกำหนดค่า Picker เราจำเป็นต้องส่งพารามิเตอร์cols มันแสดงเป็นอาร์เรย์โดยที่แต่ละรายการเป็นวัตถุที่มีพารามิเตอร์คอลัมน์ -
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | values คุณสามารถระบุค่าคอลัมน์สตริงด้วยอาร์เรย์ |
อาร์เรย์ | - |
| 2 | displayValues มีอาร์เรย์ที่มีค่าคอลัมน์สตริงและจะแสดงค่าจากพารามิเตอร์ค่าเมื่อไม่ได้ระบุ |
อาร์เรย์ | - |
| 3 | cssClass คลาส CSSชื่อที่ใช้ในการตั้งค่าที่ภาชนะบรรจุ HTML คอลัมน์ |
สตริง | - |
| 4 | textAlign มันถูกใช้เพื่อการจัดตำแหน่งข้อความชุดของค่าในคอลัมน์และมันอาจจะ"ซ้าย", "ศูนย์" หรือ "สิทธิ" |
สตริง | - |
| 5 | width ความกว้างจะถูกคำนวณโดยอัตโนมัติโดยค่าเริ่มต้น หากคุณต้องการที่จะแก้ไขความกว้างของคอลัมน์ในตัวเลือกที่มีคอลัมน์ขึ้นอยู่ว่าควรจะอยู่ในpx |
จำนวน | - |
| 6 | divider ใช้สำหรับคอลัมน์ที่ควรเป็นตัวแบ่งภาพ แต่ไม่มีค่าใด ๆ |
บูลีน | เท็จ |
| 7 | content ใช้เพื่อระบุ divider-column (divider: true)พร้อมเนื้อหาของคอลัมน์ |
สตริง | - |
พารามิเตอร์การโทรกลับของคอลัมน์
| ส. เลขที่ | การโทรกลับและคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | onChange เมื่อใดก็ตามที่ค่าของคอลัมน์จะเปลี่ยนแปลงเมื่อใดก็ตามที่ฟังก์ชันเรียกกลับจะดำเนินการ คุณค่าและ displayValueแทนคอลัมน์ปัจจุบันมูลค่าและ displayValue |
ฟังก์ชัน (p, ค่า, displayValue) | - |
คุณสมบัติตัวเลือก
ตัวแปร Picker มีคุณสมบัติมากมายที่ได้รับในตารางต่อไปนี้ -
| ส. เลขที่ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | myPicker.params คุณสามารถเริ่มต้นพารามิเตอร์ที่ส่งผ่านด้วยออบเจ็กต์ |
| 2 | myPicker.value ค่าที่เลือกสำหรับแต่ละคอลัมน์จะแสดงด้วยอาร์เรย์ของรายการ |
| 3 | myPicker.displayValue ค่าการแสดงผลที่เลือกสำหรับแต่ละคอลัมน์จะแสดงด้วยอาร์เรย์ของรายการ |
| 4 | myPicker.opened เมื่อเปิดเครื่องมือเลือกจะตั้งค่าเป็นค่าจริง |
| 5 | myPicker.inline เมื่อเครื่องมือเลือกอยู่ในบรรทัดจะตั้งค่าเป็นค่าจริง |
| 6 | myPicker.cols คอลัมน์ Picker มีวิธีการและคุณสมบัติของตัวเอง |
| 7 | myPicker.container อินสแตนซ์ Dom7 ใช้สำหรับคอนเทนเนอร์ HTML |
วิธีการเลือก
ตัวแปรตัวเลือกมีวิธีการที่เป็นประโยชน์ซึ่งได้รับในตารางต่อไปนี้ -
| ส. เลขที่ | วิธีการและคำอธิบาย |
|---|---|
| 1 | myPicker.setValue(values, duration) ใช้เพื่อตั้งค่าตัวเลือกใหม่ ค่าอยู่ในอาร์เรย์โดยแต่ละรายการแทนค่าสำหรับแต่ละคอลัมน์ ระยะเวลา - เป็นระยะเวลาการเปลี่ยนแปลงในหน่วยมิลลิวินาที |
| 2 | myPicker.open() ใช้เพื่อเปิด Picker |
| 3 | myPicker.close() ใช้เพื่อปิด Picker |
| 4 | myPicker.destroy() ใช้เพื่อทำลายอินสแตนซ์ Picker และลบเหตุการณ์ทั้งหมด |
คุณสมบัติของคอลัมน์
แต่ละคอลัมน์ในอาร์เรย์myPicker.colsยังมีคุณสมบัติที่เป็นประโยชน์ของตัวเองซึ่งได้รับในตารางต่อไปนี้ -
//Get first column
var col = myPicker.cols[0];| ส. เลขที่ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | col.container คุณสามารถสร้างอินสแตนซ์ด้วยคอนเทนเนอร์ HTML ของคอลัมน์ |
| 2 | col.items คุณสามารถสร้างอินสแตนซ์ที่มีองค์ประกอบ HTML ของรายการคอลัมน์ |
| 3 | col.value ใช้เพื่อเลือกค่าคอลัมน์ปัจจุบัน |
| 4 | col.displayValue ใช้เพื่อเลือกค่าคอลัมน์ปัจจุบันของการแสดงผล |
| 5 | col.activeIndex ระบุหมายเลขดัชนีปัจจุบันซึ่งเป็นรายการที่เลือก / ใช้งานอยู่ |
วิธีการคอลัมน์
วิธีการคอลัมน์ที่เป็นประโยชน์มีให้ในตารางต่อไปนี้ -
| ส. เลขที่ | วิธีการและคำอธิบาย |
|---|---|
| 1 | col.setValue(value, duration) ใช้เพื่อตั้งค่าใหม่สำหรับคอลัมน์ปัจจุบัน ค่าต้องเป็นค่าใหม่และระยะเวลาคือระยะเวลาการเปลี่ยนแปลงที่กำหนดในมิลลิวินาที |
| 2 | col.replaceValues(values, displayValues) ใช้เพื่อแทนที่ค่าคอลัมน์และ displayValues ด้วยค่าใหม่ |
ใช้เพื่อเข้าถึงอินสแตนซ์ของ Picker จากคอนเทนเนอร์ HTML เมื่อใดก็ตามที่คุณเริ่มต้น Picker เป็นตัวเลือกแบบอินไลน์
var myPicker = $$('.picker-inline')[0].f7Picker;Pickers มีหลายประเภทตามที่ระบุไว้ในตารางต่อไปนี้ -
| ส. เลขที่ | ประเภทแท็บและคำอธิบาย |
|---|---|
| 1 | ตัวเลือกที่มีค่าเดียว เป็นส่วนประกอบที่มีประสิทธิภาพที่ช่วยให้คุณสามารถเลือกค่าใด ๆ จากรายการ |
| 2 | สองค่าและ 3D-Rotate Effect ในเครื่องมือเลือกคุณสามารถใช้สำหรับเอฟเฟกต์การหมุน 3 มิติ |
| 3 | ขึ้นอยู่กับค่านิยม ค่าต่างๆขึ้นอยู่กับองค์ประกอบที่ระบุ |
| 4 | Custom Toolbar คุณสามารถใช้ตัวเลือกอย่างน้อยหนึ่งตัวในหน้าเดียวเพื่อปรับแต่ง |
| 5 | ตัวเลือกแบบอินไลน์ / วันที่ - เวลา คุณสามารถเลือกจำนวนค่าในตัวเลือกแบบอินไลน์ได้วันที่ไลค์มีวันที่เดือนปีและเวลามีชั่วโมงนาทีวินาที |
คำอธิบาย
องค์ประกอบปฏิทินช่วยให้คุณจัดการวันที่ได้อย่างง่ายดายและสามารถใช้เป็นอินไลน์หรือเป็นส่วนประกอบซ้อนทับได้ ปฏิทินซ้อนทับจะถูกแปลงเป็นป๊อปโอเวอร์บนแท็บเล็ตโดยอัตโนมัติ
ปฏิทินสามารถสร้างและเริ่มต้นได้โดยใช้ JavaScript เท่านั้น คุณต้องใช้วิธีการของแอพที่เกี่ยวข้องดังที่แสดงด้านล่าง -
myApp.calendar(parameters)- วิธีนี้ส่งคืนอินสแตนซ์ปฏิทินเริ่มต้น ยอมรับวัตถุเป็นพารามิเตอร์
ตารางต่อไปนี้แสดงการใช้งานปฏิทินใน Framework7 -
| ส. เลขที่ | การใช้งานปฏิทินและคำอธิบาย |
|---|---|
| 1 | พารามิเตอร์ปฏิทิน Framework7 แสดงรายการพารามิเตอร์ซึ่งใช้กับปฏิทิน |
| 2 | วิธีการและคุณสมบัติของปฏิทิน คุณจะได้รับตัวแปรอินสแตนซ์เริ่มต้นเพื่อใช้วิธีการและคุณสมบัติของปฏิทินเมื่อคุณเริ่มต้นปฏิทิน |
| 3 | เข้าถึงอินสแตนซ์ของปฏิทิน เป็นไปได้ที่จะเข้าถึงอินสแตนซ์ปฏิทินจากคอนเทนเนอร์ HTML เมื่อคุณเริ่มต้นปฏิทินแบบอินไลน์ |
คำอธิบาย
เป็นส่วนประกอบพิเศษที่ใช้ในการรีเฟรช (โหลดซ้ำ) เนื้อหาของหน้าโดยดึง
โค้ดต่อไปนี้แสดงวิธีการรีเฟรชเนื้อหาเพจ -
<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>คลาสต่อไปนี้ใช้ในการรีเฟรช -
page-content- มีคลาสเนื้อหาดึงเพื่อรีเฟรชเพิ่มเติมและจำเป็นในการเปิดใช้งานการดึงเพื่อรีเฟรช
pull-to-refresh-layer- เป็นเลเยอร์ที่ซ่อนอยู่ซึ่งใช้ในการดึงเพื่อรีเฟรชองค์ประกอบภาพและเป็นเพียงตัวโหลดล่วงหน้าและลูกศร
data-ptr-distance = "55" - นี่คือแอตทริบิวต์เพิ่มเติมที่ให้คุณตั้งค่าระยะทริกเกอร์ "ดึงเพื่อรีเฟรช" แบบกำหนดเองและค่าเริ่มต้นคือ 44px
ดึงเพื่อรีเฟรชกิจกรรม
ใน 'ดึงเพื่อรีเฟรช' มีเหตุการณ์ JavaScript บางอย่างซึ่งได้รับในตารางต่อไปนี้ -
| ส. เลขที่ | เหตุการณ์และคำอธิบาย | เป้าหมาย |
|---|---|---|
| 1 | pullstart จะถูกเรียกเมื่อใดก็ตามที่คุณเริ่มดึงเพื่อรีเฟรชเนื้อหา |
ดึงเพื่อรีเฟรชเนื้อหา |
| 2 | pullmove จะถูกทริกเกอร์เมื่อคุณดึงเพื่อรีเฟรชเนื้อหา |
ดึงเพื่อรีเฟรชเนื้อหา |
| 3 | pullend จะถูกเรียกเมื่อใดก็ตามที่คุณปล่อยดึงเพื่อรีเฟรชเนื้อหา |
ดึงเพื่อรีเฟรชเนื้อหา |
| 4 | refresh เหตุการณ์นี้จะถูกเรียกเมื่อดึงเพื่อรีเฟรชเข้ามาใน"สดชื่น"รัฐ |
ดึงเพื่อรีเฟรชเนื้อหา |
| 5 | refreshdone จะถูกทริกเกอร์หลังจากรีเฟรชและกลับสู่สถานะเริ่มต้น สิ่งนี้จะทำได้หลังจากเรียกเมธอดpullToRefreshDone |
ดึงเพื่อรีเฟรชเนื้อหา |
มีวิธีการของแอพที่สามารถใช้ได้กับ Pull to Refresh
| ส. เลขที่ | วิธีการและคำอธิบายของแอป |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) มันถูกใช้เพื่อรีเซ็ตดึงเพื่อรีเฟรชเนื้อหา |
| 2 | myApp.pullToRefreshTrigger(ptrContent) มันถูกใช้เพื่อทริกเกอร์ที่จะฟื้นฟูในระบุดึงไปที่เนื้อหาการฟื้นฟู |
| 3 | myApp.destroyPullToRefresh(ptrContent) มันถูกใช้เพื่อทำลาย / ปิดการใช้ดึงเพื่อฟื้นฟูในระบุดึงไปที่เนื้อหาการฟื้นฟู |
| 4 | myApp.initPullToRefresh(ptrContent) มันถูกใช้เพื่อเริ่มต้น / เปิด ดึงไปที่เนื้อหาการฟื้นฟู |
โดยที่ptrContentใช้กับHTMLElementหรือสตริงเพื่อดึงเพื่อรีเฟรชเนื้อหาเพื่อรีเซ็ต / ทริกเกอร์หรือปิดใช้งาน / เปิดใช้งาน
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้คอมโพเนนต์การรีเฟรชที่เริ่มการรีเฟรชเนื้อหาหน้า -
<!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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น pull_to_refresh.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/pull_to_refresh.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
เมื่อผู้ใช้ดึงลงมาหน้าจะถูกรีเฟรชพร้อมเนื้อหา
คำอธิบาย
Infinite Scroll ช่วยให้คุณสามารถโหลดเนื้อหาเพิ่มเติมและดำเนินการตามที่ต้องการเมื่อหน้าอยู่ใกล้กับด้านล่างสุด
เค้าโครง HTML ต่อไปนี้แสดงการเลื่อนแบบไม่สิ้นสุด -
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>เค้าโครงด้านบนประกอบด้วยคลาสต่อไปนี้ -
page-content infinite-scroll - ใช้สำหรับคอนเทนเนอร์เลื่อนแบบไม่มีที่สิ้นสุด
data-distance - แอตทริบิวต์นี้ช่วยให้คุณสามารถกำหนดระยะทางจากด้านล่างของหน้า (เป็น px) เพื่อทริกเกอร์เหตุการณ์เลื่อนไม่สิ้นสุดและค่าเริ่มต้นคือ 50px.
หากคุณต้องการใช้การเลื่อนแบบไม่มีที่สิ้นสุดที่ด้านบนของหน้าคุณต้องเพิ่มคลาส"infinite-scroll-top" เพิ่มเติมใน"page-content" -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>เหตุการณ์ Infinite Scroll
infinite- ใช้เพื่อทริกเกอร์เมื่อเลื่อนหน้าไปถึงระยะทางที่ระบุไปด้านล่าง มันจะเป็นเป้าหมายโดยระดับ div = "หน้าเนื้อหาอนันต์เลื่อน"
มีสองวิธีของแอพที่สามารถใช้ได้กับคอนเทนเนอร์เลื่อนที่ไม่มีที่สิ้นสุด -
ในการเพิ่มตัวรับฟังเหตุการณ์การเลื่อนแบบไม่สิ้นสุดลงในคอนเทนเนอร์ HTML ที่ระบุให้ใช้วิธีการต่อไปนี้ -
myApp.attachInfiniteScroll(container)คุณสามารถลบตัวฟังเหตุการณ์เลื่อนไม่สิ้นสุดออกจากคอนเทนเนอร์ HTML ที่ระบุโดยใช้วิธีการต่อไปนี้ -
myApp.detachInfiniteScroll(container)โดยที่พารามิเตอร์เป็นอ็อพชันที่จำเป็นซึ่งใช้เป็นHTMLElementหรือสตริงสำหรับคอนเทนเนอร์เลื่อนแบบไม่สิ้นสุด
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการเลื่อนแบบไม่สิ้นสุดที่โหลดเนื้อหาเพิ่มเติมเมื่อการเลื่อนหน้าอยู่ใกล้กับด้านล่างสุด -
<!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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น infinite_scroll.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/infinite_scroll.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
ตัวอย่างนี้อนุญาตให้โหลดเนื้อหาเพิ่มเติมเมื่อการเลื่อนหน้าเว็บของคุณถึงระยะทางที่ระบุลงไปด้านล่าง
คำอธิบาย
ข้อความเป็นส่วนประกอบของ Framework7 ซึ่งให้การแสดงความคิดเห็นและระบบการส่งข้อความในแอปพลิเคชัน
เค้าโครงข้อความ
framework7 มีโครงสร้างเค้าโครงข้อความดังต่อไปนี้ -
<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>เค้าโครงประกอบด้วยคลาสต่อไปนี้ในพื้นที่ต่างๆ -
เค้าโครงหน้าข้อความ
ตารางต่อไปนี้แสดงคลาสของเค้าโครงหน้าข้อความพร้อมคำอธิบาย
| ส. เลขที่ | ชั้นเรียนและคำอธิบาย |
|---|---|
| 1 | messages-content เป็นคลาสเพิ่มเติมที่จำเป็นซึ่งเพิ่มใน "page-content" และใช้สำหรับตัวตัดข้อความ |
| 2 | messages เป็นองค์ประกอบที่จำเป็นสำหรับฟองข้อความ |
| 3 | messages-date ใช้คอนเทนเนอร์ประทับวันที่เพื่อแสดงวันที่และเวลาของข้อความที่ส่งหรือรับ |
| 4 | message เป็นข้อความเดียวที่จะแสดง |
ชิ้นส่วนด้านในข้อความเดียว
ตารางต่อไปนี้แสดงคลาสของส่วนภายในข้อความธรรมดาพร้อมคำอธิบาย
| ส. เลขที่ | ชั้นเรียนและคำอธิบาย |
|---|---|
| 1 | message-name ระบุชื่อผู้ส่ง |
| 2 | message-text กำหนดข้อความด้วยประเภทฟอง |
| 3 | message-avatar ระบุอวตารของผู้ส่ง |
| 4 | message-label ระบุป้ายข้อความด้านล่างฟองอากาศ |
คลาสเพิ่มเติมสำหรับ Single Message Container
ตารางต่อไปนี้แสดงคลาสเพิ่มเติมสำหรับคำอธิบายคอนเทนเนอร์ข้อความเดียว
| ส. เลขที่ | ชั้นเรียนและคำอธิบาย |
|---|---|
| 1 | message-sent ระบุว่าข้อความถูกส่งโดยผู้ใช้และแสดงด้วยสีพื้นหลังสีเขียวทางด้านขวา |
| 2 | message-received ใช้สำหรับแสดงข้อความเดียวที่ระบุว่าผู้ใช้ได้รับข้อความและอยู่ทางด้านซ้ายพร้อมสีพื้นหลังสีเทา |
| 3 | message-pic เป็นคลาสเพิ่มเติมสำหรับการแสดงภาพด้วยข้อความเดียว |
| 4 | message-with-avatar เป็นคลาสเพิ่มเติมสำหรับการแสดงข้อความเดียว (รับหรือส่ง) พร้อมรูปประจำตัว |
| 5 | message-with-tail คุณสามารถเพิ่มหางฟองสำหรับข้อความเดียว (รับหรือส่ง) |
ชั้นเรียนเพิ่มเติมสำหรับข้อความเดี่ยว
ตารางต่อไปนี้แสดงคลาสที่พร้อมใช้งานสำหรับข้อความเดียวพร้อมคำอธิบาย
| ส. เลขที่ | ชั้นเรียนและคำอธิบาย |
|---|---|
| 1 | message-hide-name เป็นคลาสเพิ่มเติมสำหรับการซ่อนชื่อข้อความสำหรับข้อความเดียว (รับหรือส่ง) |
| 2 | message-hide-avatar เป็นคลาสเพิ่มเติมสำหรับการซ่อนอวาตาร์ข้อความสำหรับข้อความเดียว (รับหรือส่ง) |
| 3 | message-hide-label เป็นคลาสเพิ่มเติมสำหรับการซ่อนป้ายข้อความสำหรับข้อความเดียว (รับหรือส่ง) |
| 4 | message-last คุณสามารถใช้คลาสนี้เพื่อระบุข้อความที่ได้รับหรือส่งล่าสุดในการสนทนาปัจจุบันโดยผู้ส่งหนึ่งคนสำหรับข้อความเดียว (รับหรือส่ง) |
| 5 | message-first คุณสามารถใช้คลาสนี้เพื่อระบุข้อความที่ได้รับครั้งแรกหรือที่ส่งครั้งแรกในการสนทนาปัจจุบันโดยผู้ส่งหนึ่งคนสำหรับข้อความเดียว (รับหรือส่ง) |
การเริ่มต้นข้อความด้วย JavaScript
คุณสามารถเริ่มต้นข้อความด้วย JavaScript โดยใช้วิธีการต่อไปนี้ -
myApp.messages(messagesContainer, parameters)วิธีนี้มีสองตัวเลือก -
messagesContainer - เป็นองค์ประกอบ HTML หรือสตริงที่จำเป็นซึ่งมีองค์ประกอบ HTML ของคอนเทนเนอร์ข้อความ
parameters - ระบุวัตถุที่มีพารามิเตอร์ข้อความ
พารามิเตอร์ข้อความ
ตารางต่อไปนี้แสดงพารามิเตอร์ของข้อความพร้อมคำอธิบาย
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | autoLayout เพิ่มคลาสที่จำเป็นเพิ่มเติมให้กับแต่ละข้อความโดยการเปิดใช้งาน |
บูลีน | จริง |
| 2 | newMessagesFirst คุณสามารถแสดงข้อความด้านบนแทนที่จะแสดงที่ด้านล่างโดยเปิดใช้งาน |
บูลีน | เท็จ |
| 3 | messages จะแสดงอาร์เรย์ของข้อความซึ่งแต่ละข้อความควรแสดงเป็นวัตถุพร้อมพารามิเตอร์ข้อความ |
อาร์เรย์ | - |
| 4 | messageTemplate จะแสดงเทมเพลตข้อความเดียว |
สตริง | - |
คุณสมบัติของข้อความ
ตารางต่อไปนี้แสดงคุณสมบัติของข้อความพร้อมคำอธิบาย
| ส. เลขที่ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | myMessages.params คุณสามารถเริ่มต้นพารามิเตอร์ที่ส่งผ่านด้วยออบเจ็กต์ |
| 2 | myMessages.container กำหนดองค์ประกอบ DOM7 ด้วยคอนเทนเนอร์ HTML ของแถบข้อความ |
วิธีการส่งข้อความ
ตารางต่อไปนี้แสดงวิธีการของข้อความพร้อมคำอธิบาย
| ส. เลขที่ | วิธีการและคำอธิบาย |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); ข้อความสามารถเพิ่มไปยังจุดเริ่มต้นหรือจุดสิ้นสุดโดยใช้พารามิเตอร์วิธีการ มีพารามิเตอร์ดังต่อไปนี้ -
|
| 2 | myMessages.appendMessage(messageParameters, animate); เพิ่มข้อความที่ส่วนท้ายของคอนเทนเนอร์ข้อความ |
| 3 | myMessages.prependMessage(messageParameters, animate); เพิ่มข้อความที่จุดเริ่มต้นของคอนเทนเนอร์ข้อความ |
| 4 | myMessages.addMessages(messages, method, animate); คุณสามารถเพิ่มข้อความได้หลายข้อความในคราวเดียว มีพารามิเตอร์ต่อไปนี้ -
|
| 5 | myMessages.removeMessage(message); ใช้เพื่อลบข้อความ มีพารามิเตอร์ต่อไปนี้ -
|
| 6 | myMessages.removeMessages(messages); คุณสามารถลบหลายข้อความ มีพารามิเตอร์ต่อไปนี้ -
|
| 7 | myMessages.scrollMessages(); คุณสามารถเลื่อนข้อความจากบนลงล่างและในทางกลับกันขึ้นอยู่กับพารามิเตอร์แรกของข้อความใหม่ |
| 8 | myMessages.layout(); เค้าโครงอัตโนมัติสามารถใช้กับข้อความได้ |
| 9 | myMessages.clean(); ใช้เพื่อทำความสะอาดข้อความ |
| 10 | myMessages.destroy(); ใช้เพื่อทำลายข้อความ |
พารามิเตอร์ข้อความเดียว
ตารางต่อไปนี้แสดงพารามิเตอร์สำหรับข้อความเดียวพร้อมคำอธิบาย
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | text กำหนดข้อความซึ่งอาจเป็นสตริง HTML |
สตริง | - |
| 2 | name ระบุชื่อผู้ส่ง |
สตริง | - |
| 3 | avatar ระบุสตริง URL อวตารของผู้ส่ง |
สตริง | - |
| 4 | time ระบุสตริงเวลาของข้อความเช่น '9:45 น.', '18: 35 ' |
สตริง | - |
| 5 | type มีประเภทของข้อความว่าสามารถส่งหรือรับข้อความได้ |
สตริง | ส่งแล้ว |
| 6 | label เป็นการกำหนดป้ายกำกับของข้อความ |
สตริง | - |
| 7 | day มันให้สตริงวันของข้อความเช่น "วันอาทิตย์" "วันจันทร์" "เมื่อวาน" เป็นต้น |
สตริง | - |
การเริ่มต้นข้อความด้วย HTML
คุณสามารถเริ่มต้นข้อความด้วย HTML โดยไม่ต้องใช้ JavaScript โดยใช้เพิ่มเติมข้อความ initชั้นข้อความและใช้DATA-คุณลักษณะที่จะผ่านพารามิเตอร์ที่จำเป็นตามที่ปรากฏในข้อมูลโค้ดที่ได้รับด้านล่าง -
...
<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>
...ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ข้อความใน 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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น messages.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/messages.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
เมื่อคุณพิมพ์ข้อความลงในกล่องข้อความและคลิกปุ่มส่งจะระบุว่าข้อความของคุณถูกส่งไปแล้วและแสดงด้วยสีพื้นหลังสีเขียวทางด้านขวา
ข้อความที่คุณได้รับจะปรากฏทางด้านซ้ายโดยมีพื้นหลังสีเทาพร้อมกับชื่อผู้ส่ง
คำอธิบาย
Framework7 มีแถบเครื่องมือพิเศษที่ปรับขนาดได้เพื่อทำงานกับระบบการส่งข้อความในแอปพลิเคชัน
รหัสต่อไปนี้แสดงเค้าโครงแถบข้อความ -
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>ในแถบข้อความด้านในของ "เพจ" มีความสำคัญมากและอยู่ทางขวาของ "ข้อความ - เนื้อหา" -
<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>คุณสามารถใช้วิธีการต่อไปนี้เพื่อเริ่มต้นแถบข้อความด้วย JavaScript -
myApp.messagesbar(messagesbarContainer, parameters)วิธีนี้มีสองตัวเลือก -
messagesbarContainer - เป็นองค์ประกอบ HTML หรือสตริงที่จำเป็นซึ่งมีองค์ประกอบ HTML ของคอนเทนเนอร์แถบข้อความ
parameters - ระบุวัตถุที่มีพารามิเตอร์แถบข้อความ
ตัวอย่างเช่น -
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});พารามิเตอร์แถบข้อความ
maxHeight- ใช้เพื่อตั้งค่าความสูงสูงสุดของพื้นที่ข้อความและจะถูกปรับขนาดขึ้นอยู่กับจำนวนข้อความ ประเภทของพารามิเตอร์จำนวนและค่าเริ่มต้นเป็นโมฆะ
คุณสมบัติของแถบข้อความ
ตารางต่อไปนี้แสดงคุณสมบัติของแถบข้อความ -
| ส. เลขที่ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | myMessagebar.params คุณสามารถระบุออบเจ็กต์ด้วยพารามิเตอร์การเริ่มต้นที่ส่งผ่าน |
| 2 | myMessagebar.container คุณสามารถระบุองค์ประกอบ dom7 ด้วยองค์ประกอบ HTML ของคอนเทนเนอร์แถบข้อความ |
| 3 | myMessagebar.textarea คุณสามารถระบุองค์ประกอบ dom7 ด้วยองค์ประกอบ HTML ของแถบข้อความ textarea |
วิธีการแถบข้อความ
ตารางต่อไปนี้แสดงวิธีการแถบข้อความ -
| ส. เลขที่ | วิธีการและคำอธิบาย |
|---|---|
| 1 | myMessagebar.value(newValue); มันตั้งค่าพื้นที่ข้อความแถบข้อความ / ข้อความและส่งกลับค่าพื้นที่ข้อความของแถบข้อความถ้า newValue ไม่ได้ระบุ |
| 2 | myMessagebar.clear(); จะล้าง textarea และอัพเดต / รีเซ็ตขนาด |
| 3 | myMessagebar.destroy(); มันทำลายอินสแตนซ์แถบข้อความ |
เริ่มต้น Messagebar ด้วย HTML
คุณสามารถเริ่มต้นแถบข้อความโดยใช้ HTML โดยไม่ต้องใช้เมธอดและคุณสมบัติ JavaScript โดยการเพิ่มคลาสmessagebar-initไปยัง . messagebarและคุณสามารถส่งผ่านพารามิเตอร์ที่ต้องการโดยใช้data- attributes
รหัสต่อไปนี้ระบุการเริ่มต้นของแถบข้อความด้วย 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>เข้าถึงอินสแตนซ์ของแถบข้อความ
เป็นไปได้ที่จะเข้าถึงอินสแตนซ์แถบข้อความหากคุณเริ่มต้นโดยใช้ HTML ทำได้โดยใช้คุณสมบัติแถบข้อความ f7ขององค์ประกอบคอนเทนเนอร์
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');คุณสามารถดูตัวอย่างของแถบข้อความซึ่งอธิบายไว้ในลิงค์นี้
คำอธิบาย
การแจ้งเตือนใช้เพื่อแสดงข้อความที่ต้องการซึ่งจะปรากฏเหมือนการแจ้งเตือนของ iOS แบบพุช (หรือในเครื่อง)
ตารางต่อไปนี้แสดงรายละเอียดการใช้การแจ้งเตือน -
| ส. เลขที่ | การแจ้งเตือนการใช้งานและคำอธิบาย |
|---|---|
| 1 | การแจ้งเตือน JavaScript API นอกจากนี้ยังสามารถเพิ่มหรือปิดการแจ้งเตือนด้วย JavaScript โดยใช้วิธีการของแอพที่เกี่ยวข้อง |
| 2 | เค้าโครงการแจ้งเตือน การแจ้งเตือน Framework7 จะถูกเพิ่มโดยใช้ JavaScript |
| 3 | ตัวอย่าง iOS Framework7 ช่วยให้คุณสามารถใช้การแจ้งเตือนประเภทต่างๆในรูปแบบ iOS ของคุณ |
| 4 | ตัวอย่างวัสดุ นอกจากนี้ยังสามารถใช้การแจ้งเตือน Framework7 ในโครงร่างวัสดุ |
คำอธิบาย
การโหลดแบบขี้เกียจทำให้กระบวนการโหลดรูปภาพของคุณล่าช้าในหน้าเว็บหนึ่ง ๆ การโหลดแบบขี้เกียจช่วยเพิ่มประสิทธิภาพในการเลื่อนความเร็วในการโหลดหน้าเว็บและประหยัดปริมาณการใช้งาน
องค์ประกอบและรูปภาพที่ไม่สามารถโหลดได้จะต้องอยู่ใน <div class = "page-content"> ที่เลื่อนได้เพื่อให้ทำงานได้อย่างถูกต้อง
ตารางต่อไปนี้แสดงให้เห็นถึงการใช้งาน lazy load -
| ส. เลขที่ | ขี้เกียจโหลดการใช้งานและคำอธิบาย |
|---|---|
| 1 | การใช้งาน การโหลดแบบขี้เกียจสามารถใช้ได้กับรูปภาพภาพพื้นหลังและเอฟเฟกต์เฟดอิน |
| 2 | เริ่มการโหลด Lazy ด้วยตนเอง หลังจากเริ่มต้นเพจแล้วหากคุณเพิ่มภาพขี้เกียจโหลดด้วยตนเองการโหลดแบบขี้เกียจจะไม่ทำงานและคุณต้องใช้วิธีการเริ่มต้น |
เป็นไปได้ที่จะเรียกใช้การโหลดรูปภาพด้วยตนเองโดยใช้lazy event บน lazy image / element ดังที่แสดงด้านล่าง -
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้การโหลดแบบ lazy ใน 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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น framework7_lazy_load.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/framework7_lazy_load.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
ตัวอย่างระบุการโหลดรูปภาพแบบขี้เกียจที่จะโหลดรูปภาพบนเพจเมื่อคุณเลื่อนลง
คำอธิบาย
Framework7 มีธีมสีที่แตกต่างกันสำหรับแอปพลิเคชันของคุณ
ธีมสีจะให้สีของธีมประเภทต่างๆที่ใช้ในการทำงานกับแอพพลิเคชั่นได้อย่างราบรื่นตามที่ระบุไว้ในตารางด้านล่าง -
| ส. เลขที่ | ประเภทธีมและคำอธิบาย |
|---|---|
| 1 | สีของธีม iOS คุณสามารถใช้ธีมสีเริ่มต้นของ iOS 10 แบบสำหรับแอปพลิเคชัน |
| 2 | สีของธีมวัสดุ Framework7 มีธีมสีวัสดุเริ่มต้น 22 แบบสำหรับแอปพลิเคชัน |
การใช้ธีมสี
Framework7 ช่วยให้คุณสามารถใช้ธีมสีกับองค์ประกอบต่าง ๆ เช่น page, list-block, navbar, buttons-row เป็นต้นโดยใช้คลาสtheme- [color]กับองค์ประกอบหลัก
ตัวอย่าง
...
</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>เค้าโครงธีม
คุณสามารถใช้รูปแบบรูปแบบเริ่มต้นสำหรับแอพลิเคชันของคุณโดยใช้สองรูปแบบสีขาวและสีเข้ม สามารถใช้ธีมได้โดยใช้คลาสเค้าโครง [ธีม]กับองค์ประกอบหลัก
ตัวอย่าง
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>คลาสตัวช่วย
Framework7 มีคลาสตัวช่วยเพิ่มเติมซึ่งสามารถใช้ภายนอกหรือไม่มีธีมตามรายการด้านล่าง -
color-[color] - สามารถใช้เพื่อเปลี่ยนสีข้อความของบล็อกหรือสีของปุ่มลิงค์ไอคอน ฯลฯ
bg-[color] - ตั้งค่าสีพื้นหลังที่กำหนดไว้ล่วงหน้าบนบล็อกหรือองค์ประกอบ
border-[color] - ตั้งค่าสีเส้นขอบที่กำหนดไว้ล่วงหน้าบนบล็อกหรือองค์ประกอบ
คำอธิบาย
Hairline เป็นคลาสที่เพิ่มเส้นขอบ 1px รอบ ๆ รูปภาพโดยใช้คลาสเส้นขอบ ด้วยการเปิดตัว 1.x แฮร์ไลน์ได้แก้ไขการทำงานร่วมกับองค์ประกอบหลังและ: ก่อนหลอกแทนการใช้เส้นขอบ CSS
เส้นผมมีกฎต่อไปนี้ -
:after- องค์ประกอบหลอกนี้ใช้สำหรับเส้นผมด้านล่างและด้านขวา
:before- องค์ประกอบหลอกนี้ใช้สำหรับเส้นผมด้านบนและด้านซ้าย
ข้อมูลโค้ดต่อไปนี้แสดงการใช้: after element
.navbar:after {
background-color: red;
}ข้อมูลโค้ดต่อไปนี้จะลบแถบเครื่องมือเส้นขนด้านล่าง -
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}คลาส "ไม่มีขอบ"
เส้นขนจะถูกลบออกโดยใช้คลาสที่ไม่มีขอบและได้รับการสนับสนุนบนNavbar แถบเครื่องมือการ์ดและองค์ประกอบต่างๆ
รหัสต่อไปนี้ใช้เพื่อลบเส้นขนออกจากแถบนำทาง -
<div class = "navbar no-border">
...
</div>คำอธิบาย
Template7 เป็นเอ็นจิ้น JavaScript ที่มีน้ำหนักเบาสำหรับมือถือเป็นอันดับแรกซึ่งแสดงถึงเพจ Ajax และไดนามิกเป็นเทมเพลต Template7 พร้อมบริบทที่ระบุและไม่ต้องการสคริปต์เพิ่มเติมใด ๆ Template7 เชื่อมโยงกับ Framework7 เป็นเครื่องมือเริ่มต้นเทมเพลตน้ำหนักเบาซึ่งทำงานได้เร็วกว่าสำหรับแอปพลิเคชัน
ประสิทธิภาพ
กระบวนการคอมไพล์สตริงเป็นฟังก์ชัน JS เป็นส่วนที่ช้าที่สุดของ template7 ดังนั้นคุณไม่จำเป็นต้องคอมไพล์เทมเพลตหลายครั้งเพียงครั้งเดียวก็เพียงพอแล้ว
//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 เป็นเอนจินเทมเพลตน้ำหนักเบาที่ใช้เป็นไลบรารีแบบสแตนด์อโลนที่ไม่มี Framework7 ไฟล์ Template7 สามารถติดตั้งได้สองวิธี -
คุณสามารถดาวน์โหลดได้จาก Template7 พื้นที่เก็บข้อมูล GitHub
คุณสามารถติดตั้งได้โดยใช้คำสั่งต่อไปนี้ผ่าน Bower -
หรือ
bower install template7คำอธิบาย
ใน Template7 คุณสามารถรวบรวมเทมเพลตของคุณโดยอัตโนมัติโดยระบุแอตทริบิวต์พิเศษในแท็ก <script>
รหัสต่อไปนี้แสดงเค้าโครงการคอมไพล์อัตโนมัติ -
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>คุณสามารถใช้แอ็ตทริบิวต์ต่อไปนี้สำหรับการเริ่มต้นการคอมไพล์อัตโนมัติ -
type = "text/template7" - ใช้เพื่อบอกให้ Template7 ทำการคอมไพล์อัตโนมัติและเป็นประเภทสคริปต์ที่จำเป็น
id = "myTemplate" - เทมเพลตสามารถเข้าถึงได้ผ่าน id และเป็นรหัสเทมเพลตที่จำเป็น
สำหรับการคอมไพล์อัตโนมัติคุณต้องเปิดใช้งานการเริ่มต้นแอพโดยส่งผ่านพารามิเตอร์ต่อไปนี้ -
var myApp = new Framework7 ({
//It is used to compile templates on app init in Framework7
precompileTemplates: true,
});Template7.templates / myApp.templates
เทมเพลตที่คอมไพล์โดยอัตโนมัติสามารถเข้าถึงได้เป็นคุณสมบัติของTemplate7.templatesหลังจากเริ่มต้นแอป เรียกอีกอย่างว่าmyApp.templatesโดยที่myAppเป็นอินสแตนซ์เริ่มต้นของแอป
คุณสามารถใช้เทมเพลตต่อไปนี้ในไฟล์ 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>คุณยังสามารถเข้าถึงเทมเพลตใน JavaScript หลังการเริ่มต้นแอป -
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
});คำอธิบาย
Template7 เป็นเอนจินเทมเพลต JavaScript สำหรับอุปกรณ์เคลื่อนที่ที่มีhandlebars.jsเช่นไวยากรณ์ เป็นเอ็นจิ้นเทมเพลตเริ่มต้นที่มีน้ำหนักเบาเป็นพิเศษและรวดเร็วอย่างเห็นได้ชัดใน Framework7
ขั้นแรกเราต้องส่งผ่านพารามิเตอร์ต่อไปนี้ในการเริ่มต้นแอพที่แสดงผล Ajax และไดนามิกเพจทั้งหมดเป็นเทมเพลต Template7 -
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});| ส. เลขที่ | การใช้งานและคำอธิบาย Template7 Pages |
|---|---|
| 1 | ข้อมูลเทมเพลต / เพจ คุณสามารถส่งผ่านข้อมูล / บริบทที่ต้องการสำหรับเพจเฉพาะได้โดยระบุข้อมูลเพจทั้งหมดในพารามิเตอร์template7Dataซึ่งส่งเมื่อเริ่มต้นแอพ |
| 2 | ส่งผ่านบริบทที่กำหนดเอง Framework7 ช่วยให้คุณสามารถส่งผ่านบริบทที่กำหนดเองไปยังเพจไดนามิกใด ๆ หรือ Ajax ที่โหลด |
| 3 | โหลดเทมเพลตโดยตรง คุณสามารถแสดงและโหลดเทมเพลตได้ทันทีในรูปแบบไดนามิก |
| 4 | แบบสอบถาม URL หากคุณใช้ Template7 เพื่อแสดงเพจ Ajax บริบทของมันจะถูกขยายด้วยคุณสมบัติพิเศษurl_queryเสมอ |
ตัวอย่าง
ตัวอย่างต่อไปนี้มีลิงค์ซึ่งแสดงข้อมูลผู้ใช้เช่นรายละเอียดผู้ใช้ไลค์ของผู้ใช้ ฯลฯ เมื่อคุณคลิกที่ลิงก์เหล่านั้น
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
});likes.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>เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -
บันทึกโค้ด HTML ที่ระบุข้างต้นเป็น index.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ
เปิดไฟล์ HTML นี้เป็น http: //localhost/index.html และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
ตัวอย่างให้ลิงก์ซึ่งแสดงข้อมูลผู้ใช้เช่นรายละเอียดผู้ใช้ผู้ใช้ชอบเมื่อคุณคลิกลิงก์เหล่านั้น
คำอธิบาย
เมื่อคุณแตะลิงก์และปุ่มต่างๆจะถูกไฮไลต์ สิ่งนี้ทำได้โดยสถานะที่ใช้งานอยู่ใน Framework7
- มันทำงานเหมือนแอพเนทีฟไม่เหมือนเว็บแอพ ..
- มีไลบรารีคลิกด่วนในตัวและควรเปิดใช้งาน
- ใช้งานของรัฐระดับเป็นเช่นเดียวกับแบบ CSS : ใช้งานตัวเลือก
- สถานะที่ใช้งานถูกเปิดใช้งานโดยการเพิ่มคลาสwatch-active-stateให้กับองค์ประกอบ<html>
รหัสต่อไปนี้ใช้สำหรับสถานะที่ใช้งานอยู่ในรูปแบบ CSS -
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}รหัสต่อไปนี้แสดงความเข้ากันได้ทางเลือกเมื่อสถานะใช้งานหรือคลิกเร็วถูกปิดใช้งาน -
/* 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;
}คำอธิบาย
เหตุการณ์การแตะค้างจะใช้เพื่อทริกเกอร์ (เปิดใช้งาน) หลังจากเหตุการณ์การสัมผัสคงที่และเสร็จสิ้นดังนั้นเท่านั้นจึงเรียกว่าเหตุการณ์การแตะค้าง แท็บถือเป็นในตัวFast Clicks ห้องสมุด.
พารามิเตอร์ต่อไปนี้ใช้เพื่อปิดใช้งานหรือเปิดใช้งานและกำหนดค่าโดยค่าเริ่มต้น -
| ส. เลขที่ | พารามิเตอร์และคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | tapHold เพื่อเปิดใช้งานเหตุการณ์การแตะค้างเมื่อตั้งค่าเป็นจริง |
บูลีน | เท็จ |
| 2 | tapHoldDelay ระบุระยะเวลาในการกดค้างก่อนที่จะทริกเกอร์เหตุการณ์ taphold บนองค์ประกอบเป้าหมาย |
จำนวน | 750 |
| 3 | tapHoldPreventClicks กิจกรรมการแตะค้างจะไม่เริ่มทำงานหลังจากคลิกกิจกรรม |
บูลีน | จริง |
รหัสต่อไปนี้ใช้สำหรับเปิดใช้งานการแตะค้างไว้ -
var myApp = new Framework7 ({
tapHold: true //enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});คำอธิบาย
Touch Ripple เป็นเอฟเฟกต์ที่รองรับในธีมวัสดุ Framework7 เท่านั้น โดยค่าเริ่มต้นจะเปิดใช้งานในธีมวัสดุและคุณสามารถปิดใช้งานได้โดยใช้พารามิเตอร์materialRipple: false
Ripple Elements
คุณสามารถเปิดใช้งานองค์ประกอบระลอกเพื่อจับคู่ตัวเลือก CSS บางตัวเช่น -
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-checkbox เป็นต้น
สิ่งเหล่านี้ระบุไว้ในพารามิเตอร์materialRippleElements คุณต้องเปิดใช้งานการสัมผัสระลอกเพิ่มตัวเลือกขององค์ประกอบให้กับพารามิเตอร์materialRippleElementsเพื่อใช้ประโยชน์จากเอฟเฟกต์ระลอกคลื่นหรือใช้คลาสระลอก
ระลอกคลื่นสี
สีของการกระเพื่อมสามารถเปลี่ยนแปลงได้ในองค์ประกอบโดยการเพิ่มคลาส ripple- [color]ให้กับองค์ประกอบ
ตัวอย่างเช่น -
<a href = "#" class = "button ripple-orange">Ripple Button</a>หรือคุณสามารถกำหนดสีของคลื่นระลอกโดยใช้ CSS ดังที่แสดงด้านล่าง -
.button .ripple-wave {
background-color: #FFFF00;
}ปิดการใช้งาน Ripple Elements
คุณสามารถปิดใช้งานการกระเพื่อมสำหรับองค์ประกอบที่ระบุบางส่วนได้โดยการเพิ่มคลาสno-rippleให้กับองค์ประกอบเหล่านั้น ตัวอย่างเช่น -
<a href = "#" class = "button no-ripple">Ripple Button</a>