SlideShare a Scribd company logo
1 of 9
Download to read offline
Welcome to
jQueryMobile Fundamental 2
1. Toolbar
2. Navbar
3. Icon
jQueryMobile
Fundamental 2
Based on
http://demos.jquerymobile.com/1.4.0/
Fixed Toolbar jQueryMobile Fundamental 2
Can be set to fixed position by adding the data-position="fixed" to
the header or footer. This will make them remain at the top or
bottom of the window at all time instead of scrolling with the page
HTML Code
Header
Header Button jQueryMobile Fundamental 2
You can use the ui-btn-left and ui-btn-right classes to position buttons
in the header
Groupped Button in Toolbar jQueryMobile Fundamental 2
To group buttons into a button set, wrap the links in an element
with data-role="controlgroup"and data-type="horizontal" attributes.
Navbar jQueryMobile Fundamental 2
A navbar is coded as an unordered list of links wrapped in a container
element that has the data-role="navbar" attribute. If more than 5 items
are added, the navbar will simply wrap to multiple lines of two across.
Navbar in header & footer jQueryMobile Fundamental 2
If you want to add a navbar to the top or bottom of the page, you can
still have a page title and buttons. Just add the navbar container inside
the block, right after the title and buttons in the source order.
Icons jQueryMobile Fundamental 2
Icons can be added to navbar items by adding the data-icon attribute
specifying a icon to each anchor. By default, icons are added above the
text (data-iconpos="top"). You can change left, right, bottom.
Other icons
http://demos.jquerymobile.com/1.4.0/icons/
Expand your dimension!
Let’s Start!

More Related Content

What's hot

Dynamic Web Pages Ch 6 V1.0
Dynamic Web Pages Ch 6 V1.0Dynamic Web Pages Ch 6 V1.0
Dynamic Web Pages Ch 6 V1.0Cathie101
 
Php Booking Calendar
Php Booking CalendarPhp Booking Calendar
Php Booking CalendarNanda Mambo
 
JDeveloper - create component
JDeveloper - create componentJDeveloper - create component
JDeveloper - create componentjcmsdevelopment
 
Lost & Found Ppt
Lost & Found PptLost & Found Ppt
Lost & Found Pptceon
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdownRuss Weakley
 
TVML apps on the Apple TV
TVML apps on the Apple TVTVML apps on the Apple TV
TVML apps on the Apple TVMatias Korhonen
 
Accessible custom radio buttons and checkboxes
Accessible custom radio buttons and checkboxesAccessible custom radio buttons and checkboxes
Accessible custom radio buttons and checkboxesRuss Weakley
 
Create an android app for database creation using.pptx
Create an android app for database creation using.pptxCreate an android app for database creation using.pptx
Create an android app for database creation using.pptxvishal choudhary
 
Joomla Admin Tips & Tricks for Novice to Ninja
Joomla Admin Tips & Tricks for Novice to NinjaJoomla Admin Tips & Tricks for Novice to Ninja
Joomla Admin Tips & Tricks for Novice to NinjaMamunur Rashid
 

What's hot (13)

Gui
GuiGui
Gui
 
Dynamic Web Pages Ch 6 V1.0
Dynamic Web Pages Ch 6 V1.0Dynamic Web Pages Ch 6 V1.0
Dynamic Web Pages Ch 6 V1.0
 
Lecture6 oopj
Lecture6 oopjLecture6 oopj
Lecture6 oopj
 
Php Booking Calendar
Php Booking CalendarPhp Booking Calendar
Php Booking Calendar
 
JDeveloper - create component
JDeveloper - create componentJDeveloper - create component
JDeveloper - create component
 
Lost & Found Ppt
Lost & Found PptLost & Found Ppt
Lost & Found Ppt
 
Sample- Ebay facebook
Sample- Ebay facebookSample- Ebay facebook
Sample- Ebay facebook
 
Android Button
Android ButtonAndroid Button
Android Button
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdown
 
TVML apps on the Apple TV
TVML apps on the Apple TVTVML apps on the Apple TV
TVML apps on the Apple TV
 
Accessible custom radio buttons and checkboxes
Accessible custom radio buttons and checkboxesAccessible custom radio buttons and checkboxes
Accessible custom radio buttons and checkboxes
 
Create an android app for database creation using.pptx
Create an android app for database creation using.pptxCreate an android app for database creation using.pptx
Create an android app for database creation using.pptx
 
Joomla Admin Tips & Tricks for Novice to Ninja
Joomla Admin Tips & Tricks for Novice to NinjaJoomla Admin Tips & Tricks for Novice to Ninja
Joomla Admin Tips & Tricks for Novice to Ninja
 

Viewers also liked

Entry test board game
Entry test board gameEntry test board game
Entry test board gameAna Mena
 
Instant messaging
Instant messagingInstant messaging
Instant messagingflashx21
 
App-Astra (2015)
App-Astra (2015)App-Astra (2015)
App-Astra (2015)Daniel Budd
 
Kdd2015 study e commerce in your inbox- product recommendations at scale
Kdd2015 study e commerce in your inbox- product recommendations at scaleKdd2015 study e commerce in your inbox- product recommendations at scale
Kdd2015 study e commerce in your inbox- product recommendations at scaleAkira Saigo
 
Pub health history
Pub health historyPub health history
Pub health historytina-duffy
 
Guia live movie maker
Guia live movie makerGuia live movie maker
Guia live movie makeralmeidajs12
 
Earthquake effects (1)
Earthquake effects (1)Earthquake effects (1)
Earthquake effects (1)thefighter94
 
Quantum vacation - Hyderabad / Gachibowli
Quantum vacation - Hyderabad / GachibowliQuantum vacation - Hyderabad / Gachibowli
Quantum vacation - Hyderabad / GachibowliQuantum vacations
 
Working with hispanic families
Working with hispanic familiesWorking with hispanic families
Working with hispanic familiesCarlos F Martinez
 
UGC e TouchPoint Marketing BTO 2016 1 dicembre 2016
UGC e TouchPoint Marketing  BTO 2016   1 dicembre 2016UGC e TouchPoint Marketing  BTO 2016   1 dicembre 2016
UGC e TouchPoint Marketing BTO 2016 1 dicembre 2016Muse Comunicazione
 
Meta-Prod2Vec: Simple Product Embeddings with Side-Information
Meta-Prod2Vec: Simple Product Embeddings with Side-InformationMeta-Prod2Vec: Simple Product Embeddings with Side-Information
Meta-Prod2Vec: Simple Product Embeddings with Side-Informationrecsysfr
 
Move tactically
Move tacticallyMove tactically
Move tacticallyIF109
 
Industrie 4.0 Kompakt II - Mensch und Maschine für die kooperative Produktion...
Industrie 4.0 Kompakt II - Mensch und Maschine für die kooperative Produktion...Industrie 4.0 Kompakt II - Mensch und Maschine für die kooperative Produktion...
Industrie 4.0 Kompakt II - Mensch und Maschine für die kooperative Produktion...Competence Books
 
Santander Río, el mejor banco de Internet y Mobile de Argentina, según
Santander Río, el mejor banco de Internet y Mobile de Argentina, segúnSantander Río, el mejor banco de Internet y Mobile de Argentina, según
Santander Río, el mejor banco de Internet y Mobile de Argentina, segúnBANCO SANTANDER
 

Viewers also liked (18)

Entry test board game
Entry test board gameEntry test board game
Entry test board game
 
Instant messaging
Instant messagingInstant messaging
Instant messaging
 
App-Astra (2015)
App-Astra (2015)App-Astra (2015)
App-Astra (2015)
 
Kdd2015 study e commerce in your inbox- product recommendations at scale
Kdd2015 study e commerce in your inbox- product recommendations at scaleKdd2015 study e commerce in your inbox- product recommendations at scale
Kdd2015 study e commerce in your inbox- product recommendations at scale
 
R. Klingbeil & M. El Khawand, 2014. Treated Wastewater as an Unconventional W...
R. Klingbeil & M. El Khawand, 2014. Treated Wastewater as an Unconventional W...R. Klingbeil & M. El Khawand, 2014. Treated Wastewater as an Unconventional W...
R. Klingbeil & M. El Khawand, 2014. Treated Wastewater as an Unconventional W...
 
Pub health history
Pub health historyPub health history
Pub health history
 
Guia live movie maker
Guia live movie makerGuia live movie maker
Guia live movie maker
 
Refactoring
RefactoringRefactoring
Refactoring
 
Earthquake effects (1)
Earthquake effects (1)Earthquake effects (1)
Earthquake effects (1)
 
Maven em 10 minutos
Maven em 10 minutosMaven em 10 minutos
Maven em 10 minutos
 
Quantum vacation - Hyderabad / Gachibowli
Quantum vacation - Hyderabad / GachibowliQuantum vacation - Hyderabad / Gachibowli
Quantum vacation - Hyderabad / Gachibowli
 
Working with hispanic families
Working with hispanic familiesWorking with hispanic families
Working with hispanic families
 
UGC e TouchPoint Marketing BTO 2016 1 dicembre 2016
UGC e TouchPoint Marketing  BTO 2016   1 dicembre 2016UGC e TouchPoint Marketing  BTO 2016   1 dicembre 2016
UGC e TouchPoint Marketing BTO 2016 1 dicembre 2016
 
Meta-Prod2Vec: Simple Product Embeddings with Side-Information
Meta-Prod2Vec: Simple Product Embeddings with Side-InformationMeta-Prod2Vec: Simple Product Embeddings with Side-Information
Meta-Prod2Vec: Simple Product Embeddings with Side-Information
 
Move tactically
Move tacticallyMove tactically
Move tactically
 
Industrie 4.0 Kompakt II - Mensch und Maschine für die kooperative Produktion...
Industrie 4.0 Kompakt II - Mensch und Maschine für die kooperative Produktion...Industrie 4.0 Kompakt II - Mensch und Maschine für die kooperative Produktion...
Industrie 4.0 Kompakt II - Mensch und Maschine für die kooperative Produktion...
 
Bhore committee
Bhore committeeBhore committee
Bhore committee
 
Santander Río, el mejor banco de Internet y Mobile de Argentina, según
Santander Río, el mejor banco de Internet y Mobile de Argentina, segúnSantander Río, el mejor banco de Internet y Mobile de Argentina, según
Santander Río, el mejor banco de Internet y Mobile de Argentina, según
 

Similar to Start IoT with jQueryMobile - 기초2

jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobilemowd8574
 
Bootstrap Badges and Labels.pptx
Bootstrap Badges and Labels.pptxBootstrap Badges and Labels.pptx
Bootstrap Badges and Labels.pptxdivya935542
 
Bootstrap PPT Part - 2
Bootstrap PPT Part - 2Bootstrap PPT Part - 2
Bootstrap PPT Part - 2EPAM Systems
 
Making Polymer Elements Accessible
Making Polymer Elements Accessible Making Polymer Elements Accessible
Making Polymer Elements Accessible aliceboxhall
 
Master UX from design to prototype
Master UX from design to prototypeMaster UX from design to prototype
Master UX from design to prototypeSalvatore Iaconesi
 
World's Youngest Web Desigener
World's Youngest Web Desigener World's Youngest Web Desigener
World's Youngest Web Desigener MianAsadAli
 
Cape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community ToolkitCape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community ToolkitJavier Suárez Ruiz
 
Websphere portal theme menu framework
Websphere portal theme menu frameworkWebsphere portal theme menu framework
Websphere portal theme menu frameworkmichele buccarello
 
A Guide to Creating a Great Custom Tailwind Sidebar
A Guide to Creating a Great Custom Tailwind SidebarA Guide to Creating a Great Custom Tailwind Sidebar
A Guide to Creating a Great Custom Tailwind SidebarRonDosh
 
Detail view in distributed technologies
Detail view in distributed technologiesDetail view in distributed technologies
Detail view in distributed technologiesjamessakila
 
Lecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxLecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxGevitaChinnaiah
 
The EffiChange XPager Suite: Understanding XPages Scaffolding
The EffiChange XPager Suite: Understanding XPages ScaffoldingThe EffiChange XPager Suite: Understanding XPages Scaffolding
The EffiChange XPager Suite: Understanding XPages ScaffoldingEffiChange LLC
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind
 
Wavemaker AJAX
Wavemaker AJAXWavemaker AJAX
Wavemaker AJAXbasmaat
 
Oracle Forms Tutorial (www.aboutoracleapps.com)
Oracle Forms Tutorial (www.aboutoracleapps.com)Oracle Forms Tutorial (www.aboutoracleapps.com)
Oracle Forms Tutorial (www.aboutoracleapps.com)magupta26
 
View groups containers
View groups containersView groups containers
View groups containersMani Selvaraj
 

Similar to Start IoT with jQueryMobile - 기초2 (20)

jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Bootstrap Badges and Labels.pptx
Bootstrap Badges and Labels.pptxBootstrap Badges and Labels.pptx
Bootstrap Badges and Labels.pptx
 
Bootstrap PPT Part - 2
Bootstrap PPT Part - 2Bootstrap PPT Part - 2
Bootstrap PPT Part - 2
 
Making Polymer Elements Accessible
Making Polymer Elements Accessible Making Polymer Elements Accessible
Making Polymer Elements Accessible
 
WPF Controls
WPF ControlsWPF Controls
WPF Controls
 
Master UX from design to prototype
Master UX from design to prototypeMaster UX from design to prototype
Master UX from design to prototype
 
World's Youngest Web Desigener
World's Youngest Web Desigener World's Youngest Web Desigener
World's Youngest Web Desigener
 
Cape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community ToolkitCape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community Toolkit
 
BEM - CSS, Seriously
BEM - CSS, SeriouslyBEM - CSS, Seriously
BEM - CSS, Seriously
 
Websphere portal theme menu framework
Websphere portal theme menu frameworkWebsphere portal theme menu framework
Websphere portal theme menu framework
 
A Guide to Creating a Great Custom Tailwind Sidebar
A Guide to Creating a Great Custom Tailwind SidebarA Guide to Creating a Great Custom Tailwind Sidebar
A Guide to Creating a Great Custom Tailwind Sidebar
 
Detail view in distributed technologies
Detail view in distributed technologiesDetail view in distributed technologies
Detail view in distributed technologies
 
Lecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxLecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptx
 
The EffiChange XPager Suite: Understanding XPages Scaffolding
The EffiChange XPager Suite: Understanding XPages ScaffoldingThe EffiChange XPager Suite: Understanding XPages Scaffolding
The EffiChange XPager Suite: Understanding XPages Scaffolding
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
 
Simple Cms manual
Simple Cms manualSimple Cms manual
Simple Cms manual
 
Ajava oep
Ajava oep Ajava oep
Ajava oep
 
Wavemaker AJAX
Wavemaker AJAXWavemaker AJAX
Wavemaker AJAX
 
Oracle Forms Tutorial (www.aboutoracleapps.com)
Oracle Forms Tutorial (www.aboutoracleapps.com)Oracle Forms Tutorial (www.aboutoracleapps.com)
Oracle Forms Tutorial (www.aboutoracleapps.com)
 
View groups containers
View groups containersView groups containers
View groups containers
 

More from Park Jonggun

라즈베리파이 IoT 시작하기
라즈베리파이 IoT 시작하기라즈베리파이 IoT 시작하기
라즈베리파이 IoT 시작하기Park Jonggun
 
Start IoT with JavaScript - 7.프로토타입
Start IoT with JavaScript - 7.프로토타입Start IoT with JavaScript - 7.프로토타입
Start IoT with JavaScript - 7.프로토타입Park 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
 
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 - 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 (20)

라즈베리파이 IoT 시작하기
라즈베리파이 IoT 시작하기라즈베리파이 IoT 시작하기
라즈베리파이 IoT 시작하기
 
Start IoT with JavaScript - 7.프로토타입
Start IoT with JavaScript - 7.프로토타입Start IoT with JavaScript - 7.프로토타입
Start IoT with JavaScript - 7.프로토타입
 
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
 
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 - 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
 
PI day in COREA
PI day in COREAPI day in COREA
PI day in COREA
 
[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

Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsPrecisely
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 

Recently uploaded (20)

Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power Systems
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 

Start IoT with jQueryMobile - 기초2

  • 2. 1. Toolbar 2. Navbar 3. Icon jQueryMobile Fundamental 2 Based on http://demos.jquerymobile.com/1.4.0/
  • 3. Fixed Toolbar jQueryMobile Fundamental 2 Can be set to fixed position by adding the data-position="fixed" to the header or footer. This will make them remain at the top or bottom of the window at all time instead of scrolling with the page HTML Code Header
  • 4. Header Button jQueryMobile Fundamental 2 You can use the ui-btn-left and ui-btn-right classes to position buttons in the header
  • 5. Groupped Button in Toolbar jQueryMobile Fundamental 2 To group buttons into a button set, wrap the links in an element with data-role="controlgroup"and data-type="horizontal" attributes.
  • 6. Navbar jQueryMobile Fundamental 2 A navbar is coded as an unordered list of links wrapped in a container element that has the data-role="navbar" attribute. If more than 5 items are added, the navbar will simply wrap to multiple lines of two across.
  • 7. Navbar in header & footer jQueryMobile Fundamental 2 If you want to add a navbar to the top or bottom of the page, you can still have a page title and buttons. Just add the navbar container inside the block, right after the title and buttons in the source order.
  • 8. Icons jQueryMobile Fundamental 2 Icons can be added to navbar items by adding the data-icon attribute specifying a icon to each anchor. By default, icons are added above the text (data-iconpos="top"). You can change left, right, bottom. Other icons http://demos.jquerymobile.com/1.4.0/icons/