SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Downloaden Sie, um offline zu lesen
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!

Weitere ähnliche Inhalte

Andere mochten auch

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
 

Andere mochten auch (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.프로토타입
 
일단 시작하는 코틀린
일단 시작하는 코틀린일단 시작하는 코틀린
일단 시작하는 코틀린
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen

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
 
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
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
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
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
🐬 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
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
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
 
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
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 

Kürzlich hochgeladen (20)

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
 
+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...
 
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
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
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
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
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...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 

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.