PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

19 July 2013 By
mobile web jquerymobile jquery


เริ่มต้นด้วย ตัวอย่างง่ายๆ ทำตามได้ไม่ยาก สำหรับมืออาชีพ ศึกษาได้ด้วยตัวเอง
ที่ 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:: jquerymobile jquery mobile web






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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