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

Registered : 107,651

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
SQL Server Call HTTP URL เรียกใช้งาน URL Website จาก Stored Procedure
SQL Server Call HTTP URL เรียกใช้งาน URL Website จาก Stored Procedure
เทคนิคการใช้ SQL Server Call URL เรียกใช้งาน URL Website จาก Stored Procedure ของ SQL Server สามารถประยุกต์การใช้งานกับ Function ต่างๆ เช่น การเรียกให้ URL ทำงานเมื่อ Stored Procedure ทำงานเสร็จ
Rating : Update : 2019-04-29 09:39:38
ASP.Net ส่ง Line Notify ข้อความเข้า Inbox ส่วนตัวหรือ Group ง่ายๆ ด้วย .Net (VB.Net/C#)
ASP.Net ส่ง Line Notify ข้อความเข้า Inbox ส่วนตัวหรือ Group ง่ายๆ ด้วย .Net (VB.Net/C#)
วิธีการใช้ Line ส่งข้อความเข้า Line ส่วนตัว หรือ ส่งข้อความเข้า Line Group ด้วย ASP.Net (VB.Net/C#) เหมาะสำหรับการแจ้งเตือนกิจกรรมต่างๆ ที่ต้องการทราบ เช่น รายการสมัครสมาชิก, กิจกรรมที่เกิดขั้นบนเว็บ , รายการสั่งซื้อ
Rating : Update : 2019-04-25 10:04:32
ไม่ต้องแก้ register_globals = On ก็เรียกใช้ตัวแปรแบบเดิมๆได้
ไม่ต้องแก้ register_globals = On ก็เรียกใช้ตัวแปรแบบเดิมๆได้
ปกติแล้วเวลาทำการติดตั้ง php ค่า default ของ register_globals จะเป็น Off แต่บางครั้งเราก็มีความจำเป็นที่เราจะต้องการใช้งาน ในแบบที่ register_globals=On เช่น ไม่อยากไปแก้ code โปรแกรมเดิมที่เขียนไว้ตั้งนานแล้วบ้างล่ะ แต่จะทำยังไง ถ้าหากว่า server ที่เราจำเป็นต้องใช้งานเค้ากำหนด register_globals มาให้เป็น Off ล่ะจะทำยังไง
Rating : Update : 2018-05-16 13:07:47
SSL (https) เป็นเหตุ ถึงเวลาโบกมือลา truehits อย่างเป็นทางการ
SSL (https) เป็นเหตุ ถึงเวลาโบกมือลา truehits อย่างเป็นทางการ
เว็บสถิติเก่าแกอย่าง Truethits กับเทคโนโลยี่ SSL (https) ที่ทำให้ต้องโบกมือลาอย่างเป็นทางการซะที
Rating : Update : 2018-09-13 21:50:11
C# Extension Methods แบบ บ้านๆ
C# Extension Methods แบบ บ้านๆ
ทุกคนทีเขียนโปรแกรม ก็มักจะเจอว่าเวลาเราเรียกใช้ตัวแปร ต่างๆ แล้วพิมพ์ จุดแล้วมักจะเจอว่ามี method หรือ function ขึ้นมาให้เลือกแบบนี้
Rating : Update : 2019-04-29 15:01:47
C# อ่านค่า Text file มาเเสดงบน DataGridView
C# อ่านค่า Text file มาเเสดงบน DataGridView
อ่านค่า Textfile.txt มาเเสดงบน DataGridView เเล้วดึงข้อมูลมาแสดงบน Textbox พอเป็นแนวทางสำหรับ คนที่ต้องการนำไปประยุกใช้ครับ
Rating : Update : 2019-04-23 11:19:42
(C#) ASP.NET QR Code Generator ในแบบเลือกตัวเลขด้วย Radio Button ผ่าน Zxing Library และรองรับ UTF-8
(C#) ASP.NET QR Code Generator ในแบบเลือกตัวเลขด้วย Radio Button ผ่าน Zxing Library และรองรับ UTF-8
บทความเรื่อง (C#) ASP.NET QR Code Generator ในแบบเลือกตัวเลขด้วย Radio Button (ซึ่งใน Code มีการบวกจำนวนแบบ for loop) ผ่าน Zxing Library และรองรับ UTF-8 ครับ
Rating : Update : 2019-08-26 11:32:01
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
   







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