SlideShare a Scribd company logo
1 of 9
Download to read offline
Welcome to
jQueryMobile Fundamental 4
1. Listview
2. Collapsible
3. Collapsible set
jQueryMobile
Fundamental 4
Based on
http://demos.jquerymobile.com/1.4.0/
Listview : Unordered & Linked jQueryMobile Fundamental 4
A listview is coded as a simple unordered list (ul) or ordered list (ol)
with a data-role="listview"attribute and has a wide range of features.
Tab
Listview : Inset & Filter jQueryMobile Fundamental 4
Adding the data-inset="true" attribute to the list, the inset
appearance is useful for mixing a listview with other content. To
make a list filterable, add the data-filter="true" attribute to the list.
Tab
Real Content
Listview : Divider & Count jQueryMobile Fundamental 4
List items can be organize and group the list items adding the data-
role="list-divider" to any list item. To add a count indicator to the right
of the list item with a class of ‘ui-li-count’.
Listview : Icon & Thumnails jQueryMobile Fundamental 4
Set the ’data-iconattribute’ on the desired list item to the name of a
standard icon. To add thumbnails to the left of a list item, simply add an
image inside a list item as the first child element.
demos.jquerymobile.com/1.4.0/icons/
Collapsible jQueryMobile Fundamental 4
To create a collapsible block of content, create a container and add
the data-role="collapsible"attribute. For forms, use a fieldset and
legend for the collapsible.
Collapsible Set jQueryMobile Fundamental 4
By adding a parent wrapper with a data-role="collapsible-set" attribute,
you can make collapsible set. For full width collapsibles without
corner styling add the data-inset="false" attribute to the set.
Expand your dimension!
Let’s Start!

More Related Content

Viewers also liked

Climbing Cotopaxi, Ecuador 2005
Climbing Cotopaxi, Ecuador 2005Climbing Cotopaxi, Ecuador 2005
Climbing Cotopaxi, Ecuador 2005Jim Geiger
 
Flood and Gender-Gendered Vulnerability in Floods Plains of West Champaran, B...
Flood and Gender-Gendered Vulnerability in Floods Plains of West Champaran, B...Flood and Gender-Gendered Vulnerability in Floods Plains of West Champaran, B...
Flood and Gender-Gendered Vulnerability in Floods Plains of West Champaran, B...HI-AWARE
 
Start IoT with JavaScript - 4.객체1
Start IoT with JavaScript - 4.객체1Start IoT with JavaScript - 4.객체1
Start IoT with JavaScript - 4.객체1Park Jonggun
 
Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수Park Jonggun
 
Start IoT with JavaScript - 5.객체2
Start IoT with JavaScript - 5.객체2Start IoT with JavaScript - 5.객체2
Start IoT with JavaScript - 5.객체2Park Jonggun
 
Passé compose with être in english verb by jasleen
Passé compose with être in english verb by jasleenPassé compose with être in english verb by jasleen
Passé compose with être in english verb by jasleenjasleen1234
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application developmentKunjan Thakkar
 
Top 5 Digital Transformation Strategy Myths
Top 5 Digital Transformation Strategy MythsTop 5 Digital Transformation Strategy Myths
Top 5 Digital Transformation Strategy MythsNiall McKeown
 
Varosfejlesztes 20 kezy_b_final
Varosfejlesztes 20 kezy_b_finalVarosfejlesztes 20 kezy_b_final
Varosfejlesztes 20 kezy_b_finalBéla Kézy
 
HHE LED street lights
HHE LED street lightsHHE LED street lights
HHE LED street lightsAnnie Lo
 
라즈베리파이 IoT 시작하기
라즈베리파이 IoT 시작하기라즈베리파이 IoT 시작하기
라즈베리파이 IoT 시작하기Park Jonggun
 
서버성능개선 류우림
서버성능개선 류우림서버성능개선 류우림
서버성능개선 류우림우림 류
 
Berry business plan
Berry business planBerry business plan
Berry business planWoo Jin Kim
 
Start IoT with JavaScript - 7.프로토타입
Start IoT with JavaScript - 7.프로토타입Start IoT with JavaScript - 7.프로토타입
Start IoT with JavaScript - 7.프로토타입Park Jonggun
 
일단 시작하는 코틀린
일단 시작하는 코틀린일단 시작하는 코틀린
일단 시작하는 코틀린Park JoongSoo
 

Viewers also liked (18)

Climbing Cotopaxi, Ecuador 2005
Climbing Cotopaxi, Ecuador 2005Climbing Cotopaxi, Ecuador 2005
Climbing Cotopaxi, Ecuador 2005
 
Flood and Gender-Gendered Vulnerability in Floods Plains of West Champaran, B...
Flood and Gender-Gendered Vulnerability in Floods Plains of West Champaran, B...Flood and Gender-Gendered Vulnerability in Floods Plains of West Champaran, B...
Flood and Gender-Gendered Vulnerability in Floods Plains of West Champaran, B...
 
Start IoT with JavaScript - 4.객체1
Start IoT with JavaScript - 4.객체1Start IoT with JavaScript - 4.객체1
Start IoT with JavaScript - 4.객체1
 
Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수
 
Start IoT with JavaScript - 5.객체2
Start IoT with JavaScript - 5.객체2Start IoT with JavaScript - 5.객체2
Start IoT with JavaScript - 5.객체2
 
PI day in COREA
PI day in COREAPI day in COREA
PI day in COREA
 
Passé compose with être in english verb by jasleen
Passé compose with être in english verb by jasleenPassé compose with être in english verb by jasleen
Passé compose with être in english verb by jasleen
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application development
 
Top 5 Digital Transformation Strategy Myths
Top 5 Digital Transformation Strategy MythsTop 5 Digital Transformation Strategy Myths
Top 5 Digital Transformation Strategy Myths
 
Varosfejlesztes 20 kezy_b_final
Varosfejlesztes 20 kezy_b_finalVarosfejlesztes 20 kezy_b_final
Varosfejlesztes 20 kezy_b_final
 
R. Klingbeil, 2011: Treated Sewage Effluent as a Resource for Urban Planning
R. Klingbeil, 2011: Treated Sewage Effluent as a Resource for Urban PlanningR. Klingbeil, 2011: Treated Sewage Effluent as a Resource for Urban Planning
R. Klingbeil, 2011: Treated Sewage Effluent as a Resource for Urban Planning
 
HHE LED street lights
HHE LED street lightsHHE LED street lights
HHE LED street lights
 
라즈베리파이 IoT 시작하기
라즈베리파이 IoT 시작하기라즈베리파이 IoT 시작하기
라즈베리파이 IoT 시작하기
 
서버성능개선 류우림
서버성능개선 류우림서버성능개선 류우림
서버성능개선 류우림
 
Berry business plan
Berry business planBerry business plan
Berry business plan
 
Memento pattern
Memento patternMemento pattern
Memento pattern
 
Start IoT with JavaScript - 7.프로토타입
Start IoT with JavaScript - 7.프로토타입Start IoT with JavaScript - 7.프로토타입
Start IoT with JavaScript - 7.프로토타입
 
일단 시작하는 코틀린
일단 시작하는 코틀린일단 시작하는 코틀린
일단 시작하는 코틀린
 

More from Park Jonggun

Start IoT with jQueryMobile - 기초1
Start IoT with jQueryMobile - 기초1Start IoT with jQueryMobile - 기초1
Start IoT with jQueryMobile - 기초1Park Jonggun
 
Start IoT with JavaScript - 3.제어
Start IoT with JavaScript - 3.제어Start IoT with JavaScript - 3.제어
Start IoT with JavaScript - 3.제어Park Jonggun
 
Start IoT with JavaScript - 2.연산자
Start IoT with JavaScript - 2.연산자Start IoT with JavaScript - 2.연산자
Start IoT with JavaScript - 2.연산자Park Jonggun
 
Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Park Jonggun
 
[SCSA] Thinker 에서 Maker 로
[SCSA] Thinker 에서 Maker 로[SCSA] Thinker 에서 Maker 로
[SCSA] Thinker 에서 Maker 로Park Jonggun
 
[IoT] MAKE with Open H/W + Node.JS - 5th
[IoT] MAKE with Open H/W + Node.JS - 5th[IoT] MAKE with Open H/W + Node.JS - 5th
[IoT] MAKE with Open H/W + Node.JS - 5thPark Jonggun
 
[IoT] MAKE with Open H/W + Node.JS - 4th
[IoT] MAKE with Open H/W + Node.JS - 4th[IoT] MAKE with Open H/W + Node.JS - 4th
[IoT] MAKE with Open H/W + Node.JS - 4thPark Jonggun
 
[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rdPark Jonggun
 
[IoT] MAKE with Open H/W + Node.JS - 2nd
[IoT] MAKE with Open H/W + Node.JS - 2nd[IoT] MAKE with Open H/W + Node.JS - 2nd
[IoT] MAKE with Open H/W + Node.JS - 2ndPark Jonggun
 
[IoT] MAKE with Open H/W + Node.JS - 1st
[IoT] MAKE with Open H/W + Node.JS - 1st[IoT] MAKE with Open H/W + Node.JS - 1st
[IoT] MAKE with Open H/W + Node.JS - 1stPark Jonggun
 
IoT with Raspberry Pi + Node JS - Chapter 3
IoT with Raspberry Pi + Node JS - Chapter 3IoT with Raspberry Pi + Node JS - Chapter 3
IoT with Raspberry Pi + Node JS - Chapter 3Park Jonggun
 
IoT with Raspberry Pi + Node JS - Chapter 2
IoT with Raspberry Pi + Node JS - Chapter 2IoT with Raspberry Pi + Node JS - Chapter 2
IoT with Raspberry Pi + Node JS - Chapter 2Park Jonggun
 
IoT with Raspberry Pi + Node JS - Chapter 1
IoT with Raspberry Pi + Node JS - Chapter 1IoT with Raspberry Pi + Node JS - Chapter 1
IoT with Raspberry Pi + Node JS - Chapter 1Park Jonggun
 
누구나코딩을 V0.04
누구나코딩을 V0.04누구나코딩을 V0.04
누구나코딩을 V0.04Park Jonggun
 
Circulus Introduction
Circulus IntroductionCirculus Introduction
Circulus IntroductionPark Jonggun
 

More from Park Jonggun (15)

Start IoT with jQueryMobile - 기초1
Start IoT with jQueryMobile - 기초1Start IoT with jQueryMobile - 기초1
Start IoT with jQueryMobile - 기초1
 
Start IoT with JavaScript - 3.제어
Start IoT with JavaScript - 3.제어Start IoT with JavaScript - 3.제어
Start IoT with JavaScript - 3.제어
 
Start IoT with JavaScript - 2.연산자
Start IoT with JavaScript - 2.연산자Start IoT with JavaScript - 2.연산자
Start IoT with JavaScript - 2.연산자
 
Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초
 
[SCSA] Thinker 에서 Maker 로
[SCSA] Thinker 에서 Maker 로[SCSA] Thinker 에서 Maker 로
[SCSA] Thinker 에서 Maker 로
 
[IoT] MAKE with Open H/W + Node.JS - 5th
[IoT] MAKE with Open H/W + Node.JS - 5th[IoT] MAKE with Open H/W + Node.JS - 5th
[IoT] MAKE with Open H/W + Node.JS - 5th
 
[IoT] MAKE with Open H/W + Node.JS - 4th
[IoT] MAKE with Open H/W + Node.JS - 4th[IoT] MAKE with Open H/W + Node.JS - 4th
[IoT] MAKE with Open H/W + Node.JS - 4th
 
[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd
 
[IoT] MAKE with Open H/W + Node.JS - 2nd
[IoT] MAKE with Open H/W + Node.JS - 2nd[IoT] MAKE with Open H/W + Node.JS - 2nd
[IoT] MAKE with Open H/W + Node.JS - 2nd
 
[IoT] MAKE with Open H/W + Node.JS - 1st
[IoT] MAKE with Open H/W + Node.JS - 1st[IoT] MAKE with Open H/W + Node.JS - 1st
[IoT] MAKE with Open H/W + Node.JS - 1st
 
IoT with Raspberry Pi + Node JS - Chapter 3
IoT with Raspberry Pi + Node JS - Chapter 3IoT with Raspberry Pi + Node JS - Chapter 3
IoT with Raspberry Pi + Node JS - Chapter 3
 
IoT with Raspberry Pi + Node JS - Chapter 2
IoT with Raspberry Pi + Node JS - Chapter 2IoT with Raspberry Pi + Node JS - Chapter 2
IoT with Raspberry Pi + Node JS - Chapter 2
 
IoT with Raspberry Pi + Node JS - Chapter 1
IoT with Raspberry Pi + Node JS - Chapter 1IoT with Raspberry Pi + Node JS - Chapter 1
IoT with Raspberry Pi + Node JS - Chapter 1
 
누구나코딩을 V0.04
누구나코딩을 V0.04누구나코딩을 V0.04
누구나코딩을 V0.04
 
Circulus Introduction
Circulus IntroductionCirculus Introduction
Circulus Introduction
 

Recently uploaded

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024The Digital Insurer
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 

Recently uploaded (20)

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 

Start IoT with jQueryMobile - 기초4

  • 2. 1. Listview 2. Collapsible 3. Collapsible set jQueryMobile Fundamental 4 Based on http://demos.jquerymobile.com/1.4.0/
  • 3. Listview : Unordered & Linked jQueryMobile Fundamental 4 A listview is coded as a simple unordered list (ul) or ordered list (ol) with a data-role="listview"attribute and has a wide range of features. Tab
  • 4. Listview : Inset & Filter jQueryMobile Fundamental 4 Adding the data-inset="true" attribute to the list, the inset appearance is useful for mixing a listview with other content. To make a list filterable, add the data-filter="true" attribute to the list. Tab Real Content
  • 5. Listview : Divider & Count jQueryMobile Fundamental 4 List items can be organize and group the list items adding the data- role="list-divider" to any list item. To add a count indicator to the right of the list item with a class of ‘ui-li-count’.
  • 6. Listview : Icon & Thumnails jQueryMobile Fundamental 4 Set the ’data-iconattribute’ on the desired list item to the name of a standard icon. To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. demos.jquerymobile.com/1.4.0/icons/
  • 7. Collapsible jQueryMobile Fundamental 4 To create a collapsible block of content, create a container and add the data-role="collapsible"attribute. For forms, use a fieldset and legend for the collapsible.
  • 8. Collapsible Set jQueryMobile Fundamental 4 By adding a parent wrapper with a data-role="collapsible-set" attribute, you can make collapsible set. For full width collapsibles without corner styling add the data-inset="false" attribute to the set.