PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

29 March 2014 By


บทความนี้ เป็นเนื้อหาต่อเนื่อง สำหรับสมาชิกที่สนใจ 
เป็นพิเศษเท่านั้น ให้ทำการดาวน์โหลด ไฟล์ สำหรับศึกษา
ไปพร้อมกันได้ที่ 
 
http://www.ninenik.com/demo/jqmobile/jqmobile_1.rar
 
หลังจากดาวน์โหลดไฟล์ ข้างต้น ให้แตกไฟล์สำหรับใช้งาน
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
หรือ ระบบอื่นๆ ต่อไป
 
โปรดติดตาม และทำความเข้าไปใจพร้อมๆ กัน หากมีข้อสงสัย สามารถ คอมเม้นแสดงความ
คิดเห็นและสอบถามได้ ได้บทความนี้
 
* เนื้อหานี้เป็นบทความต่อเนื่อง เรียนรู้จนเข้าใจ 
จะมีการอัพเดทไปเรื่อยๆ ตามการได้ศึกษา แล้วมาแบ่งปันของผู้เขียน

Tags:: jquery mobile

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





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