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

Registered : 109,037

HOME > บทความจากสมาชิก > สร้าง Create Theme บน jQuery Mobile เป็นของตนเองแบบง่าย ๆ ด้วย Theme Roller



 
Clound SSD Virtual Server

สร้าง Create Theme บน jQuery Mobile เป็นของตนเองแบบง่าย ๆ ด้วย Theme Roller

สร้าง Create Themes บน jQuery Mobile เป็นของตนเองแบบง่าย ๆ ด้วย Theme Roller จากที่ได้ลองใช้ jQuery mobile framework ถือว่ามีจุดเด่นตรงที่สามารถใช้งานได้ง่ายและได้รูปแบบที่สวยงาม ดูแล้วทันสมัย สามารถแสดงผลได้กับ Web Browser หลายตัวที่รันบนอยู่บน Smart Phone หรือ Tablets ได้อย่างไม่มีปัญหา และความสามารถอีกอย่างหนึ่งที่น่าจะได้ลองใช้ก็คือ Theme Roller ซึ่งเป็นเครื่องมือที่อยู่ในเว็บไวต์ของ jQueryMobile.com ไว้ในการสร้างธีม (Themes) แบบ Wizard ได้ด้วยตัวเองผ่าน Web Brower วิธีการใช้งานง่าย และสะดวก สามารถสร้างได้ภายในเวลาไม่กี่นาที และการนำไปใช้งานก็ง่ายและสะดวกเช่นเดียวกัน

jQuery Mobile Theme Roller

Theme Roller jQuery Mobile Framework


สามารถเข้าจัดการสร้างธีมผ่าน URL นี้ เป็น Tools เว็บไซต์ของ jQueryMobile.com

jQuery Mobile Theme Roller


Screehshot หน้าจอและหน้าตาตัว Manage Themes (Theme Roller)

สำหรับพื้นฐาน jQuery Mobile ในการออกแบบสำหรับ Smart Phone / Tablets สามารถอ่านเพิ่มเติมได้ที่บทความนี้

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


เริ่มการสร้างธีม

เพื่อความเข้าใจผมจะยกตัวอย่างการสร้างธีมให้กับ Form ทีได้สร้างขึ้นมา ซึ่งเป็นค่า Themes Default ที่มากับ jQuery Mobile Framework โดยมีรายละเอียดดังนี้

<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Welcome</h1>
	</div><!-- /header -->
	
	<br />
	
	<ul data-role="listview" data-inset="true" data-theme="d">
			<li><a href="page1.html">Page1</a></li>
			<li><a href="page2.html">Page 2</a></li>
			<li><a href="page3.html">Page 4</a></li>
			<li><a href="page4.html">Page 3</a></li>
		</ul>

	<p><a href="#popup" data-role="button" data-theme="a" 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="c">
		<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>


Screehshot

jQuery Mobile Theme Roller

คำอธิบาย
สำหรับธีมของ jQuery Mobile จะใช้ CSS เข้ามาจัดการเช่นเดียวกัน โดยใช้ Properties ที่ชื่อว่า data-theme โดยในตัวอย่างจะประกอบด้วย data-theme เช่น a,b,c,d

<a href="#popup" data-role="button" data-theme="a" data-rel="dialog" data-transition="pop">
<ul data-role="listview" data-inset="true" data-theme="d">
.
.
.


เพราะฉะนั้นในการสร้างธีมจะต้องสร้าง Style Sheet ขึ้นมารองรับธีมเหล่านี้








เปิดหน้าจอของ Theme Roller


jQuery Mobile Theme Roller

หน้าจอหลักของ ThemeRoller

jQuery Mobile Theme Roller

แสดงข้อความตอบรับ ให้คลิกที่ Get Rolling

jQuery Mobile Theme Roller

เข้าสู่หน้าจอของ ThemeRoller จากในรูปจะเห็นว่ามีหน้าขอของ Swatch อยู่ 3 ตัว ซึ่งแต่ล่ะตัวก็คือ CSS ของแต่ล่ะ data-theme

jQuery Mobile Theme Roller

แต่ในตัวอย่างเราจะลองสร้างขึ้นมา 4 ตัวคือ a,b,c,d เฉพาะฉะนั้นให้คลิกที่เครื่องหมาย บอก(+) เพื่อเพิ่ม Swatch ที่ชื่อว่า D

jQuery Mobile Theme Roller

Swatch ที่ชื่อว่า D ขึ้นมาอีก 1 Tabs

jQuery Mobile Theme Roller

ปรากฏหน้าจอของ Swatch D

jQuery Mobile Theme Roller

ในการปรับแต่งแต่ล่ะ Swatch สามารถคลิกที่ Tab ของ Swatch นั้น ๆ และเลือกปรับแต่งของแต่ล่ะตำแหน่ง ซึ่งจะมีส่วนของ Preview ของแต่ล่ะ Swatch แสดงผลในทันที

jQuery Mobile Theme Roller

หรือจะ Drag หรือลากจาก Toolbox ด้านบนมาวางในตำแหน่งต่าง ๆ ของ Swatch ได้ตามความต้องการ

jQuery Mobile Theme Roller

อันนี้ลองทดสอบดูจากมาใส่อย่างรวดเร็ว เลยได้หน้าจออย่างที่เห็น ทั้งนี้ามารถปรับแต่งได้ตามความต้องการ โดยจะต้องออกแบบให้ครบทั้ง 4 Swatch (a,b,c,d)








การนำไปใช้

หลังจากได้ปรับแต่ง CSS ของแต่ล่ะ Swatch เรียบร้อยแล้ว ขั้นตอนนี้จะเป็นการนำไปใช้งานจริง

jQuery Mobile Theme Roller

ให้คลิกที่ Download (theme zip file) เหมือนในภาพ

jQuery Mobile Theme Roller

กำหนดชื่อ Themes ส่วนข่างล่างเป็นคำอธิบายในการนำไปใช้

<!DOCTYPE html>
<html>
<head>

<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

</head>


การทำไปใช้งานจริง ๆ สิ่งที่ต้องแก้ไขก็คือ

<link rel="stylesheet" href="css/themes/my-custom-theme.css" />


ซึ่งถ้าเราตั้งชื่อ Themes ว่า thaicreate-2012 ก้จะได้

<link rel="stylesheet" href="css/themes/thaicreate-2012.css" />[/color]


หลังจาก Download แล้วจะได้ไฟล์เป็นนามสกุล .zip ไฟล์


jQuery Mobile Theme Roller

อันนี้ไฟล์ที่ได้จากการสร้างธีม ซึ่งประกอบด้วย thaicreate-2012.css และ thaicreate-2012.min.css สามารถเลือกตัวใดตัวหนึ่ง (.min คือไฟล์ที่ถูกจัดเก็บให้อยู่ในรูปแบบที่มีขนาดเล็ก เพื่อสะดวกในการนำไปใช้และการโหลดที่รวดเร็ว)

jQuery Mobile Theme Roller

ทดสอบสร้างไฟล์สำหรับเรียกใช้ Themes โดยสร้างชื่อไฟล์เป็น index.html

index.html
<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<link rel="stylesheet" href="thaicreate-2012.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Welcome</h1>
	</div><!-- /header -->
	
	<br />
	
	<ul data-role="listview" data-inset="true" data-theme="d">
			<li><a href="page1.html">Page1</a></li>
			<li><a href="page2.html">Page 2</a></li>
			<li><a href="page3.html">Page 4</a></li>
			<li><a href="page4.html">Page 3</a></li>
		</ul>

	<p><a href="#popup" data-role="button" data-theme="a" 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="c">
		<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>


คำอธิบาย

<link rel="stylesheet" href="thaicreate-2012.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>


เรียกใช้ css แค่ตัวเดียวที่ชื่อว่า thaicreate-2012.css ส่วนพวก resource อื่น ๆ สามารถเรียกใช้ได้จากเว็บของ jquery หรือจะ copy มาไว้ยัง folder เลยก็ได้

ทดสอบธีมที่ได้

jQuery Mobile Theme Roller

ธีมที่ได้

jQuery Mobile Theme Roller

ลองคลิกดูส่วนอื่น ๆ

Download Themes นี้

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


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


   
Share
Bookmark.   

  By : TC Admin
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2012-06-26
  Download : No files
Sponsored Links
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
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







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