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>
No comments:
Post a Comment