SlideShare a Scribd company logo
1 of 9
Download to read offline
Welcome to
jQueryMobile Fundamental 6
1. Selectmenu
2. Flipswitch
3. Slider
4. Text Input
5. Datepicker
6. Next Mission
jQueryMobile
Fundamental 6
Based on
http://demos.jquerymobile.com/1.4.0/
Selectmenu jQueryMobile Fundamental 6
The select menu is based on a native select element, which is hidden
from view and replaced with a custom-styled select button. Tapping
it opens the native menu
Flipswitch jQueryMobile Fundamental 6
Flip switches are used for boolean style inputs like true/false or
on/off in a compact UI element.
Slider jQueryMobile Fundamental 6
Sliders are used to enter numeric values along a continuum. Range
slider offer two handles to set a min and max value along a numeric
continuum.
Text Input jQueryMobile Fundamental 6
Text inputs and textareas are coded with standard HTML elements,
then enhanced by jQuery Mobile to make them more attractive and
useable on a mobile device.
Datepicker jQueryMobile Fundamental 6
jQuery UI Datepicker widget combined with a 3rd party wrapper to
make this work with jQuery Mobile. This widget has all the same
options and methods as the jQuery UI widget.
http://api.jqueryui.com/datepicker/
https://github.com/arschmitz/jquery-mobile-datepicker-wrapper
Next Mission jQueryMobile Fundamental 6
Make your own mobile web site using mobile HTML5 technology.
< Travel Diary
Mobile SNS >
Learn > Travel Diary
5 lectures
Will be opened soon!
Make your own
Mobile Web!
Expand your dimension!
Let’s Start!

More Related Content

What's hot

multiple views and routing
multiple views and routingmultiple views and routing
multiple views and routing
Brajesh Yadav
 
Facebook - Suggesting Fan Page
Facebook - Suggesting Fan PageFacebook - Suggesting Fan Page
Facebook - Suggesting Fan Page
Jason Shmeltzner
 

What's hot (10)

TVML apps on the Apple TV
TVML apps on the Apple TVTVML apps on the Apple TV
TVML apps on the Apple TV
 
How to position a JavaScript menu in Joomla
How to position a JavaScript menu in JoomlaHow to position a JavaScript menu in Joomla
How to position a JavaScript menu in Joomla
 
Joomla! Itemid amd routing explained
Joomla! Itemid amd routing explainedJoomla! Itemid amd routing explained
Joomla! Itemid amd routing explained
 
multiple views and routing
multiple views and routingmultiple views and routing
multiple views and routing
 
Views
ViewsViews
Views
 
Sample- Ebay facebook
Sample- Ebay facebookSample- Ebay facebook
Sample- Ebay facebook
 
Facebook - Suggesting Fan Page
Facebook - Suggesting Fan PageFacebook - Suggesting Fan Page
Facebook - Suggesting Fan Page
 
Windows phone app studio
Windows phone app studioWindows phone app studio
Windows phone app studio
 
WordCamp 2010 The WordPress Loop
WordCamp 2010 The WordPress LoopWordCamp 2010 The WordPress Loop
WordCamp 2010 The WordPress Loop
 
The WordPress Loop
The WordPress LoopThe WordPress Loop
The WordPress Loop
 

Similar to Start IoT with jQueryMobile - 기초6

jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
mowd8574
 

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

Jquery mobile book review
Jquery mobile book reviewJquery mobile book review
Jquery mobile book review
 
Creating a Simple and Easy MUI Dropdown Selection.pdf
Creating a Simple and Easy MUI Dropdown Selection.pdfCreating a Simple and Easy MUI Dropdown Selection.pdf
Creating a Simple and Easy MUI Dropdown Selection.pdf
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
What is ui element in i phone developmetn
What is ui element in i phone developmetnWhat is ui element in i phone developmetn
What is ui element in i phone developmetn
 
Flexible currency toolbar j query plugin for virtuemart
Flexible currency toolbar j query plugin for virtuemartFlexible currency toolbar j query plugin for virtuemart
Flexible currency toolbar j query plugin for virtuemart
 
Total Toolbar Features | Custom Toolbar Development
Total Toolbar Features | Custom Toolbar DevelopmentTotal Toolbar Features | Custom Toolbar Development
Total Toolbar Features | Custom Toolbar Development
 
A comprehensive guide on developing responsive and common react filter component
A comprehensive guide on developing responsive and common react filter componentA comprehensive guide on developing responsive and common react filter component
A comprehensive guide on developing responsive and common react filter component
 
Account Book
Account BookAccount Book
Account Book
 
Web designing course in bangalore
Web designing course in bangalore Web designing course in bangalore
Web designing course in bangalore
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI components
 
Beginning jQuery Mobile
Beginning jQuery MobileBeginning jQuery Mobile
Beginning jQuery Mobile
 
How to Implement a Navigation MUI Drawer in Your React App
How to Implement a Navigation MUI Drawer in Your React AppHow to Implement a Navigation MUI Drawer in Your React App
How to Implement a Navigation MUI Drawer in Your React App
 
Creating a Great Navigation Bar with MUI AppBar Component - Blogs
Creating a Great Navigation Bar with MUI AppBar Component - BlogsCreating a Great Navigation Bar with MUI AppBar Component - Blogs
Creating a Great Navigation Bar with MUI AppBar Component - Blogs
 
App design guide
App design guideApp design guide
App design guide
 
Lab3-Android
Lab3-AndroidLab3-Android
Lab3-Android
 
MUI Modal Make Your Web Application More Powerful.pdf
MUI Modal Make Your Web Application More Powerful.pdfMUI Modal Make Your Web Application More Powerful.pdf
MUI Modal Make Your Web Application More Powerful.pdf
 
Publication Non Visual Components
Publication Non Visual ComponentsPublication Non Visual Components
Publication Non Visual Components
 
How to Use Material UI Tooltip Component Like a Pro
How to Use Material UI Tooltip Component Like a ProHow to Use Material UI Tooltip Component Like a Pro
How to Use Material UI Tooltip Component Like a Pro
 
Going mobile with Kentico CMS
Going mobile with Kentico CMSGoing mobile with Kentico CMS
Going mobile with Kentico CMS
 
Aria Widgets
Aria WidgetsAria Widgets
Aria Widgets
 

More from Park 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 3
Park 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

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
Safe Software
 
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
panagenda
 

Recently uploaded (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
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
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
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
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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
 
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
 
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
 
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
 
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
 
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
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
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
 
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
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
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
 
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...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 

Start IoT with jQueryMobile - 기초6

  • 2. 1. Selectmenu 2. Flipswitch 3. Slider 4. Text Input 5. Datepicker 6. Next Mission jQueryMobile Fundamental 6 Based on http://demos.jquerymobile.com/1.4.0/
  • 3. Selectmenu jQueryMobile Fundamental 6 The select menu is based on a native select element, which is hidden from view and replaced with a custom-styled select button. Tapping it opens the native menu
  • 4. Flipswitch jQueryMobile Fundamental 6 Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
  • 5. Slider jQueryMobile Fundamental 6 Sliders are used to enter numeric values along a continuum. Range slider offer two handles to set a min and max value along a numeric continuum.
  • 6. Text Input jQueryMobile Fundamental 6 Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device.
  • 7. Datepicker jQueryMobile Fundamental 6 jQuery UI Datepicker widget combined with a 3rd party wrapper to make this work with jQuery Mobile. This widget has all the same options and methods as the jQuery UI widget. http://api.jqueryui.com/datepicker/ https://github.com/arschmitz/jquery-mobile-datepicker-wrapper
  • 8. Next Mission jQueryMobile Fundamental 6 Make your own mobile web site using mobile HTML5 technology. < Travel Diary Mobile SNS > Learn > Travel Diary 5 lectures Will be opened soon! Make your own Mobile Web!