วิธีการเขียนเว็บให้แสดงผลบนมือถือ ผ่าน jQuery Mobile

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

วิธีการเขียนเว็บให้แสดงผลบนมือถือ ผ่าน jQuery Mobile

โพสต์โดย Ik Kat » 28/06/2017 3:41 pm

jQuery Mobile เป็น Framework ที่ทำงานทางด้าน UI โดยปกติแล้วการสร้างหน้าเว็บโดยทั่วไปก็สามารถเปิดให้งาน Web Browser บนอุปกรณ์ Smart Phone , Tablets ได้ แต่ Interface อาจจะไม่เหมาะสมสำหรับการแสดงผลบนอุปกรณ์ที่มีขนาดหน้าจอเล็กจนเกินไป เราสามารถแก้ปัญหานี้ได้โดยการสร้าง Sub Folder หรือ Sub Domain เช่น

โค้ด: เลือกทั้งหมด

http://www.mindphp.com/Mobile
http://Mobile.www.mindphp.com


วิธีการใช้งานก็สามารถดาวน์โหลดไฟล์ jQuery Mobile ได้ที่นี่ : http://jquerymobile.com/download/
jQuery Mobile เวอรชั่นล่าสุด คือ 1.4.5

MT19 28-6-60(31).png
jQuery Mobile
MT19 28-6-60(31).png (111.04 KiB) เปิดดู 24 ครั้ง

เมื่อทำงานดาวน์โหลดมาแล้ว ในไฟล์ก็ยังมี Demo มาให้ดูเป็นตัวอย่าง

MT19 28-6-60(32).png
jQuery Mobile
MT19 28-6-60(32).png (72.23 KiB) เปิดดู 24 ครั้ง

MT19 28-6-60(33).png
jQuery Mobile
MT19 28-6-60(33).png (119.62 KiB) เปิดดู 24 ครั้ง

เพียงแค่เพิ่มไฟล์ jQuery 3.2.1 และหน้าเว็บที่คุณต้องการใช้งาน เท่านี้คุณก็สามารถสร้างหน้าเว็บขึ้นมาใหม่ได้ง่าย ๆ โดยทันทีเพราะในไฟล์นั้นมี icon มาให้แล้วด้วย
ตัวอย่างหน้า index.html

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
   <head>
   <title>My Page</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
   <script src="jquery-3.2.1.min.js"></script>
   <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">

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

   <ul data-role="listview" data-inset="true" data-filter="true">
         <li><a href="page1.html">Page1</a></li>
         <li><a href="page2.html">Page 2</a></li>
      </ul>

   <p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Login user and password</a></p>

   <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
            <li data-role="list-divider">My</li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
   </ul>


</div><!-- /page -->


<!-- Start of third page: #popup -->
<div data-role="page" id="popup">

   <div data-role="header" data-theme="e">
      <h1>Dialog</h1>
   </div><!-- /header -->

   <div data-role="content" data-theme="d">   
      <h2>Login</h2>
      <form action="login.php" method="post">
      Username : <input type="text" name="user">
      Password :<input type="text" name="user">
      <br />
      <input type="submit" value="Login">
      </form>

      <p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Close</a></p>   
   </div><!-- /content -->
   
   <div data-role="footer">
      <h4>Page Footer</h4>
   </div><!-- /footer -->
</div><!-- /page popup -->

</body>
</html>


แหล่งที่มา : http://www.thaicreate.com/community/jquery-mobile-ui-iphone-ipad-android-blackberry.html

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน