PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

มาสร้าง mobile web ด้วย jQuerymobile 1.3.1 อย่างง่าย

19 July 2013 By


เริ่มต้นด้วย ตัวอย่างง่ายๆ ทำตามได้ไม่ยาก สำหรับมืออาชีพ ศึกษาได้ด้วยตัวเอง
ที่ http://view.jquerymobile.com/ 
จะทำหน้า mobile web มี 3 หน้า 
home 
about us 
และก็ contact us
 
1. สร้างโฟลเดอร์ใน C:AppServwww ที่เครื่อง สำหรับทดสอบ ในที่นี้เป็นโฟลเดอร์ ex1 
สร้างไฟล์ index.php พื้นฐาน ใช้แบบในตัวอย่าง ที่น่าจะมีอีก
โค้ตไฟล์ index.php สำหรับ step 1
 
<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>



</body>
</html>
 
 
 
2. ใช้ jQuerymobile ที่เป็น css กับ javascript จาก server ของ jquery โดยตรง ไม่ต้องโหลด
(ตอนทดสอบต้องต่อเน็ตด้วย)
 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
 
 
ใส่ใน โค้ต index.php ในขั้นตอนที่ 1 ตามนี้
 
<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>



</body>
</html>
 
 
3. ต่อไปเป็นในส่วนของ เนื้อหาของแต่ละหน้า ประกอบด้วย 3 ส่วนพื้นฐาน
มี header / content / footer
ตามโค้ตด้านล่าง โดยเราจะทำเป็นหน้าๆ ด้วยการกำหนด id อย่างหน้าแรก เป็น id="page_home"
 
<!-- Start of  page HOME  -->
<div data-role="page" id="page_home">

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

	<div data-role="content">
    

        
	</div><!-- /content -->

	<div data-role="footer">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
</div><!-- /page -->
 
 
4. สร้างอีกสองหน้าคือ about us กับ contact us 
กำหนด id เพจ เป้น เป็น id="page_aboutus"  และ เป็น id="page_contactus" 
เรากำหนด id ไว้สำหรับ ทำ link เชื่อมโยงไปมา
โค้ดส่วนของเพจ about us และ contact us ตามลำดับ
 
<!-- Start of  page ABOUT US  -->
<div data-role="page" id="page_aboutus">

	<div data-role="header">
		<h1>About Us</h1>
	</div><!-- /header -->

	<div data-role="content">
    

        
	</div><!-- /content -->

	<div data-role="footer">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of  page CONTACT US  -->
<div data-role="page" id="page_aboutus">

	<div data-role="header">
		<h1>Contact Us</h1>
	</div><!-- /header -->

	<div data-role="content">
    

        
	</div><!-- /content -->

	<div data-role="footer">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
</div><!-- /page -->
 
 
5. นำโค้ด ในส่วนของข้อ 3 และ 4 ไปใส่ในส่วนของ body แท็กของ โค้ดข้อ 2
จะได้โค้ดไฟล์ index.php ใน ขั้นตอนที่ 5 ดังนี้
 
<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>

<!-- Start of  page HOME  -->
<div data-role="page" id="page_home">

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

	<div data-role="content">
    

        
	</div><!-- /content -->

	<div data-role="footer">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of  page ABOUT US  -->
<div data-role="page" id="page_aboutus">

	<div data-role="header">
		<h1>About Us</h1>
	</div><!-- /header -->

	<div data-role="content">
    

        
	</div><!-- /content -->

	<div data-role="footer">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of  page CONTACT US  -->
<div data-role="page" id="page_aboutus">

	<div data-role="header">
		<h1>Contact Us</h1>
	</div><!-- /header -->

	<div data-role="content">
    

        
	</div><!-- /content -->

	<div data-role="footer">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>
 
 
6. ใส่ลิ้งค์ และเนื้อหา เพื่อเชิ่อมโยงและ ให้เห็นความแตกต่างเมื่อมีการเปลี่ยนหน้าเพจ
โดยการลิ้งค์เพจ ใจ้อ้างอิงจาก id ที่เราได้กำหนด แล้วในแท็ก <a> ปกติ โดยรูปแบบจะใช้เป็น
<a href="#ชื่อ id ที่เรากำหนด">ข้อความลิ้งค์ Link</a>
ในที่นี้จะใช้รูปแบบลิ้งค์แบบ listview ในเพจ id page_home
ดังนี้ โดยใส่เข้าไปในส่วนของ div content ในเพจ id page_home
 
        <ul data-role="listview" data-ajax="false" data-inset="true" data-theme="d">
            <li data-role="list-divider">Menu</li>
            <li><a href="#page_home">Home</a></li>
            <li><a href="#page_aboutus">About Us</a></li>
            <li><a href="#page_contactus">Contact Us</a></li>
        </ul>
 
 
ส่วนในเพจ id page_aboutus ให้แทรกเป็นเนื้อหา และลิ้งค์แบบง่าย ดังนี้
 
        <p>เนื้อหา About us </p>
        <p>กลับไปหน้า Home <a href="#page_home">Home</a></p>
 
 
ในเพจ id page_contactus ให้แทรกเป็นเนื้อหา และลิ้งค์แบบง่าย ดังนี้
 
        <p>เนื้อหา Contact us </p>
        <p>กลับไปหน้า Home <a href="#page_home">Home</a></p>
 
 
7. โค้ดสุดท้าย ทั้งหมดของไฟล์ index.php พร้อมนำไปทดสอบ จะเป็นแบบนี้
 
<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>

<!-- Start of  page HOME  -->
<div data-role="page" id="page_home">

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

	<div data-role="content">
    
        <ul data-role="listview" data-ajax="false" data-inset="true" data-theme="d">
            <li data-role="list-divider">Menu</li>
            <li><a href="#page_home">Home</a></li>
            <li><a href="#page_aboutus">About Us</a></li>
            <li><a href="#page_contactus">Contact Us</a></li>
        </ul>
        
	</div><!-- /content -->

	<div data-role="footer">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of  page ABOUT US  -->
<div data-role="page" id="page_aboutus">

	<div data-role="header">
		<h1>About Us</h1>
	</div><!-- /header -->

	<div data-role="content">

        <p>เนื้อหา About us </p>
        <p>กลับไปหน้า Home <a href="#page_home">Home</a></p>
        
	</div><!-- /content -->

	<div data-role="footer">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of  page CONTACT US  -->
<div data-role="page" id="page_contactus">

	<div data-role="header">
		<h1>Contact Us</h1>
	</div><!-- /header -->

	<div data-role="content">
    
        <p>เนื้อหา Contact us </p>
        <p>กลับไปหน้า Home <a href="#page_home">Home</a></p>
        
	</div><!-- /content -->

	<div data-role="footer">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>
 
 
 
ดูตัวอย่างผลลัพธิ์ได้ที่หน้านี้
 

 


Tags:: mobile web jquerymobile jquery





URL สำหรับอ้างอิง