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

Registered : 104,449

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




 
VPS  250 ҷ͹

สร้าง 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
SignalR (Windows Form) : ตัวอย่างการรับส่งข้อมูลแบบ Real Time และการจัดเก็บลงใน Database
SignalR (Windows Form) : ตัวอย่างการรับส่งข้อมูลแบบ Real Time และการจัดเก็บลงใน Database
ตัวอย่างการเขียน SignalR บน Windows Form Application เพื่อรับส่งข้อมูลแบบ Real Time จาก Client ไปยัง Server และจาก Server ไปยัง Client โดยมีการจัดเก็บข้อมูลลงใน Database ด้วย
Rating : Update : 2017-03-24 17:26:09
jQuery วิธี Save State Form เมื่อกด Refresh หรือ Back แล้วข้อมูลบน Form ไม่หาย
jQuery วิธี Save State Form เมื่อกด Refresh หรือ Back แล้วข้อมูลบน Form ไม่หาย
เทคนิคการ save state ของ form เมื่อกด refresh หรือ back แล้วข้อมูลไม่หาย เหมาะสำหรับเป็น form ในการ input ข้อมูล เช่น สมัครสมาชิก ลงทะเบียน
Rating : Update : 2017-03-24 17:32:17
ตอนที่ 1 | มาเริ่มทำโปรเจ็คเว็บ แบบ Step By Step
ตอนที่ 1 | มาเริ่มทำโปรเจ็คเว็บ แบบ Step By Step
ตอนที่ 1 ออกแบบโปรเจ็คงาน ซึ่งผมจะมีคำแนะนำในนี้ให้ท่านได้นำไปเลือกทำโปรเจ็คได้
Rating : Update : 2017-03-18 22:22:47
แจกระบบ PHP Shopping Cart ระบบตะกร้าสินค้า ระบบสั่งซื้อ มีระบบตัดสต๊อก, สั่งซื้อวัตถุดิบคงเหลือ
แจกระบบ PHP Shopping Cart ระบบตะกร้าสินค้า ระบบสั่งซื้อ มีระบบตัดสต๊อก, สั่งซื้อวัตถุดิบคงเหลือ
เป็นโปรเจคเก่าๆ สมัยปี 2007-2008 เกี่ยวกับระบบ php shopping cart มีระบบสั่งซื้อสินค้า ตัด Stock เมื่อสินค้าถูกสั่งซื้อไปแล้ว รวมทั้งระบบจัดการวัตถุดิบ
Rating : Update : 2017-03-30 14:04:45
PHP Facebook Login (SDK 5) ระบบล็อกอิน PHP/MySQL กับ Facebook (Update : 2017)
PHP Facebook Login (SDK 5) ระบบล็อกอิน PHP/MySQL กับ Facebook (Update : 2017)
ทำระบบ Login ของ PHP เพื่อเชื่อมต่อกับ Facebook Account และการจัดเก็บลงใน MySQL Database รองรับ PHP เวอร์ชั่น 5.4 ขึ้นไป
Rating : Update : 2017-04-13 22:41:32
Setup Project ให้เป็น exe/msi สำหรับ Install ด้วย Visual Studio 2015,2017 (Step by step)
Setup Project ให้เป็น exe/msi สำหรับ Install ด้วย Visual Studio 2015,2017 (Step by step)
บทความนี้จะเป็นตัวอย่างการทำ Setup Project ตัวโปรแกรมที่พัฒนาด้วย Visual Studio เป็นวิธีการทำเป็น Package install ไว้สำหรับการนำโปรแกรมไปติดตั้งที่เครื่อง Computer อื่นๆ
Rating : Update : 2017-04-21 15:29:51
รียกใช้งาน Entity Framework การ Select ข้อมูลจาก Entities แสดงผลบน DataSource Control
รียกใช้งาน Entity Framework การ Select ข้อมูลจาก Entities แสดงผลบน DataSource Control
ในหัวข้อนี้เราจะมาเรียนรู้วิธีการเริ่มต้นการใช้งาน Entity และการใช้ LINQ to Entities เพื่อดึงข้อมูลจาก Model Entities มาแสดงบน Control ที่สามารถกำหนด DataSource ได้ เช่น DataGridView
Rating : Update : 2015-12-11 22:37:53
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 01
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 อัตราราคา คลิกที่นี่