Wednesday, February 8, 2012

jQuery Mobile: Radio Button

jQuery Mobile: Radio Button
<!doctype html>
<html>

<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: Radio Button</h1>
</div>

<div data-role="content">

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
 <legend>AM/PM Vertical:</legend>
 <label for="am_v">AM</label>
 <input type="radio" name="apm" id="am_v" value="AM" />
 <label for="pm_v">PM</label>
 <input type="radio" name="apm" id="pm_v" value="PM" />
</fieldset>
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
 <legend>AM/PM Horizontal:</legend>
 <label for="am_h">AM</label>
 <input type="radio" name="apm" id="am_h" value="AM" />
 <label for="pm_h">PM</label>
 <input type="radio" name="apm" id="pm_h" value="PM" />
</fieldset>
</div>

</div>

<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>
Posted by Unknown at 4:55 AM 0 comments
Labels:

Tuesday, February 7, 2012

jQuery Mobile: Horizontally grouped select menu

jQuery Mobile: Horizontally grouped select menu
<!doctype html>
<html>
  
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App: Selection Menu</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: Selection Menu</h1>
</div>

<div data-role="content">

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
 
<select name="month" id="month">
 <option value="January">January</option>
 <option value="February">February</option>
 <option value="March">March</option>
 <option value="April">April</option>
 <option value="May">May</option>
 <option value="June">June</option>
 <option value="July">July</option>
 <option value="August">August</option>
 <option value="September">September</option>
 <option value="October">October</option>
 <option value="November">November</option>
 <option value="December">December</option>
</select>

<select name="dayofweek" id="dayofweek">
 <option value="Sunday">Sunday</option>
 <option value="Monday">Monday</option>
 <option value="Tuesday">Tuesday</option>
 <option value="Wednesday">Wednesday</option>
 <option value="Thursday">Thursday</option>
 <option value="Friday">Friday</option>
 <option value="Saturday">Saturday</option>
</select>

<select name="apm" id="apm">
 <option value="AM">AM</option>
 <option value="PM">PM</option>
</select>

</fieldset>
</div>

</div>

<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>


Related:
- jQuery Mobile: Group select menu inside fieldset, vertically.

Posted by Unknown at 3:15 PM 0 comments
Labels:

jQuery Mobile: Group select menu inside fieldset, vertically

Group select menu inside fieldset
<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App: Selection Menu</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: Selection Menu</h1>
</div>
 
<div data-role="content">

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
 <legend>Month:Day:APM</legend>
 
<label for "month">Month:</label>
<select name="month" id="month">
 <option value="January">January</option>
 <option value="February">February</option>
 <option value="March">March</option>
 <option value="April">April</option>
 <option value="May">May</option>
 <option value="June">June</option>
 <option value="July">July</option>
 <option value="August">August</option>
 <option value="September">September</option>
 <option value="October">October</option>
 <option value="November">November</option>
 <option value="December">December</option>
</select>

<label for "dayofweek">Day Of Week:</label>
<select name="dayofweek" id="dayofweek">
 <option value="Sunday">Sunday</option>
 <option value="Monday">Monday</option>
 <option value="Tuesday">Tuesday</option>
 <option value="Wednesday">Wednesday</option>
 <option value="Thursday">Thursday</option>
 <option value="Friday">Friday</option>
 <option value="Saturday">Saturday</option>
</select>

<label for "apm">AM/PM:</label>
<select name="apm" id="apm">
 <option value="AM">AM</option>
 <option value="PM">PM</option>
</select>

</fieldset>
</div>

</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>



Related:
- jQuery Mobile: Horizontally grouped select menu

Posted by Unknown at 3:03 PM 0 comments
Labels:

jQuery Mobile: select menu inside fieldcontain

The effect of embed select menu inside container with the data-role="fieldcontain" attribute.

Run in Android build-in browser:
- in landscape orientation
jQuery Mobile select menu in landscape
jQuery Mobile select menu in landscape

- in portrait orientation
jQuery Mobile select menu in portrait

<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App: Selection Menu</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: Selection Menu</h1>
</div>
 
<div data-role="content">

<label for "dayofweek">Day Of Week:</label>
<select name="dayofweek" id="dayofweek">
 <option value="Sunday">Sunday</option>
 <option value="Monday">Monday</option>
 <option value="Tuesday">Tuesday</option>
 <option value="Wednesday">Wednesday</option>
 <option value="Thursday">Thursday</option>
 <option value="Friday">Friday</option>
 <option value="Saturday">Saturday</option>
</select>

<div data-role="fieldcontain">
<label for "dayofweek2">Day Of Week:</label>
<select name="dayofweek2" id="dayofweek2">
 <option value="Sunday">Sunday</option>
 <option value="Monday">Monday</option>
 <option value="Tuesday">Tuesday</option>
 <option value="Wednesday">Wednesday</option>
 <option value="Thursday">Thursday</option>
 <option value="Friday">Friday</option>
 <option value="Saturday">Saturday</option>
</select>
</div>

</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>



Next:
- Group select menu inside fieldset

Posted by Unknown at 12:59 PM 0 comments
Labels:

Monday, February 6, 2012

Selection Menu: Desktop html vs jQuery Mobile

On Desktop:
Desktop version
<!doctype html>
<html>
   
<head>
<meta charset="utf-8"></meta>
<title>Mobile-Web-App: Selection Menu</title>
</head>
<body>
<h1>Mobile-Web-App</h1>
 
<label for "dayofweek">Day Of Week:</label>
<select name="dayofweek" id="dayofweek">
 <option value="Sunday">Sunday</option>
 <option value="Monday">Monday</option>
 <option value="Tuesday">Tuesday</option>
 <option value="Wednesday">Wednesday</option>
 <option value="Thursday">Thursday</option>
 <option value="Friday">Friday</option>
 <option value="Saturday">Saturday</option>
</select>

</body>
</html>


On jQuery Mobile:
jQuery Mobile version
<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App: Selection Menu</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: Selection Menu</h1>
</div>
 
<div data-role="content">

<label for "dayofweek">Day Of Week:</label>
<select name="dayofweek" id="dayofweek">
 <option value="Sunday">Sunday</option>
 <option value="Monday">Monday</option>
 <option value="Tuesday">Tuesday</option>
 <option value="Wednesday">Wednesday</option>
 <option value="Thursday">Thursday</option>
 <option value="Friday">Friday</option>
 <option value="Saturday">Saturday</option>
</select>

</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>



Next:
- jQuery Mobile: select menu inside fieldcontain

Posted by Unknown at 11:32 PM 0 comments
Labels: ,

jQuery Mobile: textarea

Example of using jQuery Mobile textarea, displayed on Android device running Opera Mobile, version 11.50.
displayed in Landscape mode
displayed in Portrait mode
<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App: textarea</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: textarea</h1>
</div>
 
<div data-role="content">

 <label for="textarea-a">Textarea:</label>
 <textarea name="textarea" id="textarea-a">
textarea WITHOUT data-role="fieldcontain"
 </textarea>

 <div data-role="fieldcontain">
  <label for="textarea">Textarea:</label>
  <textarea name="textarea" id="textarea">
textarea INSIDE data-role="fieldcontain"
  </textarea>
 </div>
</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>


Posted by Unknown at 5:44 AM 0 comments
Labels:

Sunday, February 5, 2012

jQuery Mobile: text input types

Last post show a direct porting from desktop html to jQuery Mobile version, with some basic text input and input type. It's further modified to target mobile device, using jQuery Mobile. Also show more text input types.

<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App: text input and input type</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: text input types</h1>
</div>
 
<div data-role="content">
 <label for="name">Text Input:</label>
 <input type="text" name="name" id="name" />

 <label for="password">Password:</label>
 <input type="password" name="password" id="password" />
 
 <label for="number">Number:</label>
 <input type="number" name="number" id="number" />
 
 <label for="email">Email:</label>
 <input type="email" name="email" id="email" />
 
 <label for="url">Url:</label>
 <input type="url" name="url" id="url" />
 
 <label for="tel">Tel:</label>
 <input type="tel" name="tel" id="tel" />
 
 <label for="time">Time:</label>
 <input type="time" name="time" id="time" />
 
 <label for="date">Date:</label>
 <input type="date" name="date" id="date" />
 
 <label for="month">Month:</label>
 <input type="month" name="month" id="month" />
 
 <label for="week">Week:</label>
 <input type="week" name="week" id="week" />
 
 <label for="datetime">Datetime:</label>
 <input type="datetime" name="datetime" id="datetime" />
 
 <label for="datetime-l">Datetime local:</label>
 <input type="datetime-local" name="datetime-l" id="datetime-l" />
 
 <label for="color">Color:</label>
 <input type="color" name="color" id="color" />
 
</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>


Opera Mobile run on Android Phone
Opera Mobile run on Android Tablet

Posted by Unknown at 10:23 AM 0 comments
Labels:
Subscribe to: Posts (Atom)