Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 103,861

HOME > บทความจากสมาชิก > jQuery Mobile เขียนเว็บให้แสดงผลสวย ๆ บน Mobile เช่น iPhone , iPad , Android



 

jQuery Mobile เขียนเว็บให้แสดงผลสวย ๆ บน Mobile เช่น iPhone , iPad , Android

jQuery Mobile เขียนเว็บให้แสดงผลสวย ๆ บน Mobile เช่น iPhone , iPad , Android สำหรับ jQuery mobile เป็น Framework ที่ทำงานทางด้าน UI หรือ User interface บน HTML , JavaScript และ CSS ที่เข้ามาจัดการให้สามารถแสดงผลบน Web Browser ที่อยู่ใน Mobile มือถือ Smart Phone / Tablets ต่าง ๆ เช่น iPhone , Android , Blackberry หรือ iPad และอุปกรณ์อื่น ๆ ที่ได้รับความนิยม ที่มีอยู่อย่างมากมาย สำหรับ framework ตัวนี้จะเข้ามาจัดการทางด้าน Interface เท่านั้น ในส่วนการทำงานต่าง ๆ ก็สามารถใช้ภาษาพวก PHP , ASP.Net ทำงานตามปกติการใช้งานถือว่าง่ายมาก และยังสามารถใช้งานรวมกับ jQuery Ajax ได้แบบง่าย ๆ อีกด้วย

jQuery Mobile Framework



ในทางปฏิบัติเว็บไซต์ทั่ว ๆ ไปจะสร้างหน้าเว็บสำหรับ Web Browser ปกติอยู่แล้ว และก็สามารถแสดงผลบน Web Browser บนอุปกรณ์ Smart Phone / Tablets ได้เช่นเดียวกัน แต่ Interface อาจจะไม่เหมาะสมสำหรับแสดงผลบนอุปกรณ์ที่มีขนาดหน้าจอเล็กจนเกินไป ฉะนั้นทางเลือกสำหรับการสร้างหน้าเพจหรือ URL สำหรับมือถือโดยเฉพาะ ก็เป็นทางเลือกหนึ่งที่เหมาะสม โดยใช้วิธีการสร้างเป็น URL อีกตัวหนึ่งสำหรับ Interface นี้โดยเฉพาะ อาจจะเป็น Sub Folder หรือ Sub Domain เช่น

Sub Folder (สร้างซับโฟลเดอร์)
http://www.thaicreate.com/m/


Sub Domain (สร้างซับโดเมน)
http://m.thaicreate.com


สามารถเลือกใช้วิธีใดวิธีหนึ่งได้ตามสะดวก และถ้าหากต้องการให้มีการ Redirect อัตโนมัติ เมื่อเข้าจากหน้าจอเว็บปกติ สามารถดูวิธีการสร้างไฟล์ Redirect ได้จากส่วนท้ายของบทความ

jQuery Mobile OS Support


OS ที่รองรับทั้งหมด ครอบคลุมตัวที่ได้รับความนิยม
- iOS
- Android
- BlackBerry
- Obada
- Windows Phone
- palm webOS
- symbian
- MeeGo


Download jQuery Mobile Framework


ก่อนการเริ่มเขียนให้ดาวน์โหลด jQuery Mobile Framework มาก่อน เวอร์ชั่นที่ผมใช้เป็น 1.1.0 (Latest Stable) ซึ่งได้ผ่านการทดสอบและแก้ไข Bug ในระยะหนึ่งแล้ว แต่ถ้ามี Version ใหม่กว่านี้ก็สามารถดาวน์โหลดได้เช่นเดียวกัน แต่แนะนำให้เลือกใช้เวอร์ชั่นที่ Stable แล้ว

jQuery Mobile

ไฟล์ที่ดาวน์โหลดได้แล้ว ทั้งนี้สามารถรันเพื่อดู Demo ได้จาก Web Browser ปกติได้เช่นเดียวกัน








ทดสอบการเขียนแบบง่าย ๆ

index.php (ไฟล์หลักหน้าแรก)
<!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.1.0.min.css" />
	<script src="jquery-1.7.1.min.js"></script>
	<script src="jquery.mobile-1.1.0.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>


page1.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.1.0.min.css" />
	<script src="jquery-1.7.1.min.js"></script>
	<script src="jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Page content goes here.</p>		
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>


โครงสร้างที่จัดเก็บ

jQuery Mobile

ลองอัพโหลดเพื่อใช้งานจริง ในที่นี้ผมได้สร้าง Sub Domain บน thaicreate.com

http://m.thaicreate.com


และจะทดสอบเรียกโดย iPhone (iOS)

Screenshot

jQuery Mobile

หน้าแรกเมื่อผ่าน iPhone








jQuery Mobile

คลิกแต่ล่ะหัวข้อ สามารถ slide ขึ้นลง มี effect สวยงามมาก



jQuery Mobile

แสดงรายละเอียดหรือ detail



jQuery Mobile

อันนี้ popup login ที่สามารถสร้างได้แบบง่าย ๆ เช่นเดียวกัน



การทำ Auto Redirect เมื่อเปิดจากอุปกรณ์ Smart Phone / Tablets
สำหรับการทำ auto redirect นั้นสามารถตรวจสอบจาก Agent Web Browser หรือรุ่นของ Web Browser ซึ่งในแต่ล่ะภาษาจะมี function ในการตรวจสอบให้อยู่แล้ว แต่ผมจะยกตัวอย่างสำหรับภาษา PHP ที่ทำงานบน Linux Server โดยสามารถใช้การตรวจสอบได้ 2 วิธีคือ

1. ผ่าน .htaccess
วิธีนี้ไม่ต้องทำการแก้ไข Code ในหน้าเว็บแต่อย่างใดเพียงแต่สร้างไฟล์ .htaccess เพื่อตรวจสอบ Web Browser แล้วนำไปวางไว้ใน Server ได้เลย

.htaccess
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_URI} !^thaicreate.com.*$
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod" [NC]
RewriteRule ^(.*)$ http://m.thaicreate.com [L,R=302]


2. ผ่าน php โดยใช้ $_SERVER["HTTP_USER_AGENT"]
วิธีนี้ใช้การตรวจสอบรุ่นของ Web Bowser และใช้การ Redirect ด้วย php โดยอาจจะแทรกไว้ในหน้า index.php และไว้ยังส่วนบน ๆ ของ Code

<?php
	if(preg_match('/android|blackberry|ipad|iphone|ipod/i', $_SERVER['HTTP_USER_AGENT'])){
		header("location:http://m.thaicreate.com/");
		exit;
	}
?>


จากทั้ง 2 วิธีเมื่อมีการเปิดด้วยอุปกรณ์ Smart Phone ที่กำหนด ก็จะมีการ Redirect ไปยัง Sub Domain และในกรณีที่มีรุ่นอื่น ๆ ก็สามารถใส่เพิ่มเข้าไปด้วยเครื่องหมาย |xxx


เพิ่มเติม
สำหรับ jQuery Mobile Framework เป็นเพียง User interface ที่ทำงานในฝั่งของ Client เพราะฉะนั้นมันสามารถนำไปใช้ได้กับการเขียนโปรแกรมหลายภาษา เช่น ASP , PHP , ASP.Net, JSP หรือ Application อื่น ๆ ที่ทำงานผ่าน Web Browser และมี Interface ที่รองรับ HTML , JavaScript และ CSS


Download Code ทั้งหมด
Download here !!!

แนะนำธีม (Themes)
เป็นธีมที่ชื่อว่า iOS Themes โดยมีลักษณะคล้ายกับ Interface บน iPhone (iOS 4 และ iOS 5) สามารถใช้งานได้ฟรีบนภายใต้เงื่อนไข MIT License

iOS Themes

https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/issues


สำหรับการใช้งาน Feature อื่น ๆ สามารถอ่านได้ที่


List View และการใช้งาน
http://jquerymobile.com/demos/1.1.0/docs/lists/index.html


ตัวอย่างเว็บไซต์ที่ใช้งาน jQuery Mobile

jQuery Mobile


บทความอื่น ๆ ที่เกี่ยวข้อง
Go to : jQuery : Whats a jQuery , jQuery คืออะไร ??
Go to : jQuery : How to use , จะเขียน jQuery จะต้องทำอย่างไร
Go to : jQuery Syntax : jQuery Basic Syntax
Go to : jQuery Tutorial : สอน jQuery เขียน jQuery กับ JavaScript เรียน jQuery ในประเทศไทย
Go to : Android Tutorial - สอนเขียน Android OS : พื้นฐานการเขียนโปรแกรมบนภาษา Android เช่น Mobile , SmartPhone , Tablets


   
Share
Bookmark.   

  By : TC Admin
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2012-06-25
  Download : No files
Sponsored Links
รู้จัก ASP.Net SignalR วิธีการรับ-ส่งข้อมูลแบบ Real Time - VB.Net,C#
รู้จัก ASP.Net SignalR วิธีการรับ-ส่งข้อมูลแบบ Real Time - VB.Net,C#
SignalR เป็น Library ของ .Net Framework เขียนร่วมกับ ASP.Net เพื่อใช้ในการรับ-ส่งข้อมูลจาก Server ไปยัง Client แบบ Real Time
Rating : Update : 2017-03-24 17:23:27
วิธี Update โปรแกรม Windows 8.0 ให้เป็น Windows 8.1 แบบฟรี ๆ
วิธี Update โปรแกรม Windows 8.0 ให้เป็น Windows 8.1 แบบฟรี ๆ
Windows 8.1 ได้ออกมาได้ซะระยะหนึ่งแล้ว ซึ่งมีการปรับปรุงในหลาย ๆ เพิ่มเติมจาก Windows 8.0 และเราสามารถ Update ให้เป็น Windows 8.1 Pro แบบใช้งานได้ฟรี ๆ
Rating : Update : 2015-10-02 12:49:30
VB.NET ลดขนาดรูปภาพให้ได้สัดส่วนเผื่อเป็นประโยชน์ลองใช้งานแล้ว Work
VB.NET ลดขนาดรูปภาพให้ได้สัดส่วนเผื่อเป็นประโยชน์ลองใช้งานแล้ว Work
VB.NET ลดขนาดรูปภาพให้ได้สัดส่วนเผื่อเป็นประโยชน์ ลองใช้งานแล้ว work โค้ดลดขนาดรูปภาพ สามารถSave ไปยังserver ผ่านLANได้
Rating : Update : 2017-02-09 09:12:29
ตอนที่ 4 : การสร้างตัวแปร Declare Variable บน Stored Procedure (MySQL : Stored Procedure)
ตอนที่ 4 : การสร้างตัวแปร Declare Variable บน Stored Procedure (MySQL : Stored Procedure)
การสร้างตัวแปร MySQL บน Stored Procedure เป็นพื้นฐานที่เราจำเป็นจะต้องรู้และใช้งานให้ถูกต้องในการที่จะเขียน Stored ให้ทำงานอย่างถูกต้อง เพราะค่าจะถูกหรือผิด ชนิดของตัวแปรนั้นค่อนข้างจะสำคัญมาก เพราะตัว Database ของ MySQL
Rating : Update : 2016-01-06 19:09:47
XCode Objective-C การ Convert Variable ในการรับค่าตัวแปร
XCode Objective-C การ Convert Variable ในการรับค่าตัวแปร
หวัดดีตอนบ่ายๆ ครับ ง่วงๆ แบบนี้ผมมีทริปง่ายๆ เล็กๆ แต่สำหรับมาเสนอครับ
Rating : Update : 2015-09-25 10:46:09
วิธีแก้ไข Error lauching AVD บน Android Studio
วิธีแก้ไข Error lauching AVD บน Android Studio
วิธีแก้ไข Error lauching AVD บน Android Studio
Rating : Update : 2016-03-14 15:08:23
iOS 9 มาแล้ว : สาวก Apple ที่ใช้ iPhone , iPad อัพเดดกันได้แล้วครับ
iOS 9 มาแล้ว : สาวก Apple ที่ใช้ iPhone , iPad อัพเดดกันได้แล้วครับ
ในเดือนนี้ (Sep 2015) ทาง Apple ได้ทำการอัพเดดเวอร์ชั่นของ iOS โดยรุ่นใหม่ล่าสุดจะเป็น iOS 9.0 รองรับอุปรกรณ์ Devices ของ Apple เกือบทุกรุ่น
Rating : Update : 2017-03-25 13:06:34
ThaiCreate.Com Forum




Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   


Acc : thaicreate@hotmail.com










Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2017 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่