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

Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
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
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
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
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 

Recently uploaded (20)

Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
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
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
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
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 

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/