jQuery Mobile เป็น
Framework ที่ทำงานทางด้าน UI โดยปกติแล้วการสร้างหน้าเว็บโดยทั่วไปก็สามารถเปิดให้งาน
Web Browser บนอุปกรณ์ Smart Phone , Tablets ได้ แต่ Interface อาจจะไม่เหมาะสมสำหรับการแสดงผลบนอุปกรณ์ที่มีขนาดหน้าจอเล็กจนเกินไป เราสามารถแก้ปัญหานี้ได้โดยการสร้าง Sub Folder หรือ Sub Domain เช่น
โค้ด: เลือกทั้งหมด
https://www.mindphp.com/Mobile
http://Mobile.www.mindphp.com
วิธีการใช้งานก็สามารถดาวน์โหลดไฟล์ jQuery Mobile ได้ที่นี่ :
http://jquerymobile.com/download/
jQuery Mobile เวอรชั่นล่าสุด คือ 1.4.5
- jQuery Mobile
- MT19 28-6-60(32).png (72.23 KiB) Viewed 9597 times
เมื่อทำงานดาวน์โหลดมาแล้ว ในไฟล์ก็ยังมี Demo มาให้ดูเป็นตัวอย่าง
- jQuery Mobile
- MT19 28-6-60(31).png (111.04 KiB) Viewed 9597 times
- jQuery Mobile
- MT19 28-6-60(33).png (119.62 KiB) Viewed 9597 times
เพียงแค่เพิ่มไฟล์ jQuery 3.2.1 และหน้าเว็บที่คุณต้องการใช้งาน เท่านี้คุณก็สามารถสร้างหน้าเว็บขึ้นมาใหม่ได้ง่าย ๆ โดยทันทีเพราะในไฟล์นั้นมี icon มาให้แล้วด้วย
ตัวอย่างหน้า index.html
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome</h1>
</div><!-- /header -->
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page 2</a></li>
</ul>
<p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Login user and password</a></p>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
<li data-role="list-divider">My</li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div><!-- /page -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<h2>Login</h2>
<form action="login.php" method="post">
Username : <input type="text" name="user">
Password :<input type="text" name="user">
<br />
<input type="submit" value="Login">
</form>
<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Close</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page popup -->
</body>
</html>
jQuery Mobile เป็น [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/25-programming/oop-php-framework/1957-framework-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]Framework[/url] ที่ทำงานทางด้าน UI โดยปกติแล้วการสร้างหน้าเว็บโดยทั่วไปก็สามารถเปิดให้งาน [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/66-server-hosting/1849-web-browser-%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%A2%E0%B8%96%E0%B8%B6%E0%B8%87%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-web-browser-%E0%B8%84%E0%B8%B7%E0%B8%AD.html]Web Browser[/url] บนอุปกรณ์ Smart Phone , Tablets ได้ แต่ Interface อาจจะไม่เหมาะสมสำหรับการแสดงผลบนอุปกรณ์ที่มีขนาดหน้าจอเล็กจนเกินไป เราสามารถแก้ปัญหานี้ได้โดยการสร้าง Sub Folder หรือ Sub Domain เช่น
[code]https://www.mindphp.com/Mobile
http://Mobile.www.mindphp.com[/code]
วิธีการใช้งานก็สามารถดาวน์โหลดไฟล์ jQuery Mobile ได้ที่นี่ : [url]http://jquerymobile.com/download/[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=40733&p=98932#p98932]jQuery Mobile[/url] เวอรชั่นล่าสุด คือ 1.4.5
[attachment=2]MT19 28-6-60(31).png[/attachment]
เมื่อทำงานดาวน์โหลดมาแล้ว ในไฟล์ก็ยังมี Demo มาให้ดูเป็นตัวอย่าง
[attachment=1]MT19 28-6-60(32).png[/attachment]
[attachment=0]MT19 28-6-60(33).png[/attachment]
เพียงแค่เพิ่มไฟล์ jQuery 3.2.1 และหน้าเว็บที่คุณต้องการใช้งาน เท่านี้คุณก็สามารถสร้างหน้าเว็บขึ้นมาใหม่ได้ง่าย ๆ โดยทันทีเพราะในไฟล์นั้นมี icon มาให้แล้วด้วย
ตัวอย่างหน้า index.html
[code]<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome</h1>
</div><!-- /header -->
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page 2</a></li>
</ul>
<p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Login user and password</a></p>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
<li data-role="list-divider">My</li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div><!-- /page -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<h2>Login</h2>
<form action="login.php" method="post">
Username : <input type="text" name="user">
Password :<input type="text" name="user">
<br />
<input type="submit" value="Login">
</form>
<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Close</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page popup -->
</body>
</html>[/code]