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

Registered : 102,611


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

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

 
 
       
Bookmark.   
Share
       
สร้าง 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

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

Sponsored Links
ตอนที่ 2 : การสร้าง SQL Azure และการใช้งาน SQL Database บน Windows Azure
ตอนที่ 2 : การสร้าง SQL Azure และการใช้งาน SQL Database บน Windows Azure
บทความก่อนหน้าที่เราได้รู้จักกับ SQL Auzre หรือ SQL Database ว่ามันคืออะไร และเราจะสามารถใช้งานได้อย่างไร สำหรับการเริ่มใช้งาน SQL Database นั้น ก็เหมือนกับ Service ทั่ว ๆ ไป
Rating : Update : 2013-07-14 19:56:28
Java and Casting / Compare
Java and Casting / Compare
เป็นตัวอย่างการเขียน Java เพื่อทำการเปรียบเทียบ หรือ Compare ข้อความ String
Rating : Update : 2013-12-15 08:03:08
ตอนที่ 1 : Visual Studio Online คืออะไร มีประโยชน์ย่างไร และขั้นตอนการสมัครใช้งาน
ตอนที่ 1 : Visual Studio Online คืออะไร มีประโยชน์ย่างไร และขั้นตอนการสมัครใช้งาน
สำหรับ Visual Studio Online เป็น Services ของบริษัท Microsoft ที่เปิดบริการขึ้นมาใหม่ ทำงานระบบ Cloud Server (บริการกลุ่มเมฆสำหรับการพัฒนาโปรแกรม ถือเป็นส่วนขยายของ Visual Studio)
Rating : Update : 2014-11-22 12:20:37
มาเขียนสคริปเลือกเวลา โดยใช้ Jquery UI Time picker กันเถอะ
มาเขียนสคริปเลือกเวลา โดยใช้ Jquery UI Time picker กันเถอะ
มาเขียนสคริปเลือกเวลา โดยใช้ Jquery UI Time picker กันเถอะ
Rating : Update : 2013-10-26 15:21:39
Windows 8 App : Roaming app data จัดเก็บไฟล์ลง Storage บน Windows Store Apps (C#)
Windows 8 App : Roaming app data จัดเก็บไฟล์ลง Storage บน Windows Store Apps (C#)
สำหรับการจัดเก็บข้อมูลแบบ Roaming บน Windows Store Apps สามารถจัดเก็บข้อมูลประเภทต่าง ๆ ได้เหมือนกับ Local app data เช่น ตัวแปรแบบ Settings , ตัวแปรแบบ Object และไฟล์ประเภทต่าง ๆ ได้ทุกประเภท แต่ Roaming app data
Rating : Update : 2014-08-14 12:34:46
ตอนที่ 8 : อ่านข้อมูล Mobile Services แบบมีเงื่อนไข Where และแสดงผลบน Android
ตอนที่ 8 : อ่านข้อมูล Mobile Services แบบมีเงื่อนไข Where และแสดงผลบน Android
บทความนี้จะเป็นการใช้ Android อ่านข้อมูลจาก Table ของ Mobile Services บน Windows Azure โดยจะยกตัวอย่างการเลือกข้อมูลแบบมีเงื่อนไข (Where Clause) เหมือนกับการ Where ใน Query ของ Table ทั่ว ๆ ไป
Rating : Update : 2013-09-30 09:26:41


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
สอน Struts การเขียนโปรแกรม Java Struts Framework
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน Yii  Framework การเขียนโปรแกรม ภาษา PHP กับ Yii
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน 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
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 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2015 All Rights Reserved.
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 084-715-5121 อัตราราคา คลิกที่นี่

Back to Top