วิธีการเขียนเว็บให้แสดงผลบนมือถือ ผ่าน jQuery Mobile

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Ik Kat
PHP Super Member
PHP Super Member
Posts: 291
Joined: 26/06/2017 2:32 pm

วิธีการเขียนเว็บให้แสดงผลบนมือถือ ผ่าน jQuery Mobile

Post by Ik Kat » 28/06/2017 3:41 pm

jQuery Mobile เป็น Framework ที่ทำงานทางด้าน UI โดยปกติแล้วการสร้างหน้าเว็บโดยทั่วไปก็สามารถเปิดให้งาน Web Browser บนอุปกรณ์ Smart Phone , Tablets ได้ แต่ Interface อาจจะไม่เหมาะสมสำหรับการแสดงผลบนอุปกรณ์ที่มีขนาดหน้าจอเล็กจนเกินไป เราสามารถแก้ปัญหานี้ได้โดยการสร้าง Sub Folder หรือ Sub Domain เช่น

Code: Select all

https://www.mindphp.com/Mobile
http://Mobile.www.mindphp.com
วิธีการใช้งานก็สามารถดาวน์โหลดไฟล์ jQuery Mobile ได้ที่นี่ : http://jquerymobile.com/download/
jQuery Mobile เวอรชั่นล่าสุด คือ 1.4.5
MT19 28-6-60(31).png
jQuery Mobile
MT19 28-6-60(31).png (111.04 KiB) Viewed 923 times
เมื่อทำงานดาวน์โหลดมาแล้ว ในไฟล์ก็ยังมี Demo มาให้ดูเป็นตัวอย่าง
MT19 28-6-60(32).png
jQuery Mobile
MT19 28-6-60(32).png (72.23 KiB) Viewed 923 times
MT19 28-6-60(33).png
jQuery Mobile
MT19 28-6-60(33).png (119.62 KiB) Viewed 923 times
เพียงแค่เพิ่มไฟล์ jQuery 3.2.1 และหน้าเว็บที่คุณต้องการใช้งาน เท่านี้คุณก็สามารถสร้างหน้าเว็บขึ้นมาใหม่ได้ง่าย ๆ โดยทันทีเพราะในไฟล์นั้นมี icon มาให้แล้วด้วย
ตัวอย่างหน้า index.html

Code: Select all

<!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>

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 4 guests