เรียน jQuery Mobile 1.4.2 แบบง่าย อย่างเร็ว ตอนที่ 1

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

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

ดูแล้ว 7,001 ครั้ง




บทความนี้ เป็นเนื้อหาต่อเนื่อง สำหรับสมาชิกที่สนใจ 
เป็นพิเศษเท่านั้น ให้ทำการดาวน์โหลด ไฟล์ สำหรับศึกษา
ไปพร้อมกันได้ที่ 
 
 
หลังจากดาวน์โหลดไฟล์ ข้างต้น ให้แตกไฟล์สำหรับใช้งาน
1. index.php
2. ex1.php
3. Folder ชื่อ js ที่รวม jquery, jquery mobile และ icon พร้อมใช้งาน
 
ไฟล์ ex1.php จะเป็นไฟล์สำหรับใช้ในการทดสอบ
เช่น แก้ไข เพิ่ม ปรับปรุงโค้ดทั้งหมด
 
ไฟล์ index.php จะเป็นไฟล์ สำหรับเรียก แสดงในการทดสอบเท่านั้น
ใช้งานจริง เราจะเปลี่ยนไฟล์ ex1.php เป็น 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="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.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-inset="true" data-divider-theme="a">
            <li data-role="list-divider">Menu</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" data-position="fixed">
		<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" data-position="fixed">
		<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" data-position="fixed">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>
 
ในเนื้อหาตอนนี้เราได้รู้เบื้องต้น แบบเร็ว เกี่ยวกับ jquery mobile ว่า
หน้าตาของ jquery mobile แสดงผลอย่างไร แล้ว เราจะทำอะไรได้บ้าง
 
หากศึกษาไปพร้อมกัน อย่างต่อเนื่อง จะทำให้ได้พื้นฐาน เกี่ยวกับ การใช้งาน
html5 css3 ajax รวมไปถึง ประยุกต์สร้าง app สำหรับมือถือ ได้ทั้ง android และ ios
หรือ ระบบอื่นๆ ต่อไป
 
โปรดติดตาม และทำความเข้าไปใจพร้อมๆ กัน หากมีข้อสงสัย สามารถ คอมเม้นแสดงความ
คิดเห็นและสอบถามได้ ได้บทความนี้
 
* เนื้อหานี้เป็นบทความต่อเนื่อง เรียนรู้จนเข้าใจ 
จะมีการอัพเดทไปเรื่อยๆ ตามการได้ศึกษา แล้วมาแบ่งปันของผู้เขียน


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





Tags:: jquery mobile







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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ