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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
mobile web jquerymobile jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ mobile web jquerymobile jquery



เริ่มต้นด้วย ตัวอย่างง่ายๆ ทำตามได้ไม่ยาก สำหรับมืออาชีพ ศึกษาได้ด้วยตัวเอง
จะทำหน้า 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>
 
 
 
ดูตัวอย่างผลลัพธิ์ได้ที่หน้านี้
 

 



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





Tags:: jquery mobile web jquerymobile







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ