Programming by Supakorn: jQuery Mobile

แสดงบทความที่มีป้ายกำกับ jQuery Mobile แสดงบทความทั้งหมด

วันจันทร์ที่ 26 มกราคม พ.ศ. 2558

เรียกใช้งาน JQuery Mobile ตอนที่ 2

เริ่มต้น การเรียกใช้งาน JQuery Mobile

การใช้งาน JQuery Mobile กล่าวง่ายๆ มี 2 แบบ ด้วยกันครับ

วิธีที่ 1 เรียกใช้งาน JQuery Mobile จาก Source File ของผู้ให้บริการ
วิธีที่ 2 เรียกใช้งาน JQuery Mobile จาก Source File ของเราเอง

วิธีที่ 2 การเรียกใช้งาน JQuery Mobile จาก Source File ของเราเอง

Step 1 Download File จาก http://jquerymobile.com/download/

Step 2 Extract File หรือแตก Zip File

Step 3 จัดวางไฟล์ที่ได้มาตามความเหมาะสม

ProjectFolder

jquery.mobile-1.4.5.css
jquery.mobile-1.4.5.min.css

jquery.js
jquery.min.js
jquery.mobile-1.4.5.js
jquery.mobile-1.4.5.min.js
jquery.mobile-1.4.5.min.map

Step 4 ทดสอบโดยการสร้างไฟล์ Html

 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>jQuery Mobile Demos</title>
 <link rel="shortcut icon" href="favicon.ico">
 <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
 <script src="js/jquery.js"></script>
 <script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header" class="jqm-header">
<h2>Header</h2>
  <a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
  <a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
 </div><!-- /header -->
 <div role="main" class="ui-content jqm-content">

  <h1>Demo by Supakorndd.com</h1>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
  <h2>Copyright @ 2014 Supakorndd.com</h2>
</div><!-- /footer -->

</body>
</html>

Step 5 ทดสอบเรียกใช้งานไฟล์ Html

วันพฤหัสบดีที่ 22 มกราคม พ.ศ. 2558

เรียกใช้งาน JQuery Mobile ตอนที่ 1

เริ่มต้น การเรียกใช้งาน JQuery Mobile

การใช้งาน JQuery Mobile กล่าวง่ายๆ มี 2 แบบ ด้วยกันครับ

วิธีที่ 1 เรียกใช้งาน JQuery Mobile จาก Source File ของผู้ให้บริการ
วิธีที่ 2 เรียกใช้งาน JQuery Mobile จาก Source File ของเราเอง

วิธีที่ 1 เป็นการเรียกใช้งาน JQuery Mobile จาก Website ผู้ให้บริการ การเรียกใช้งานนั้นจะเป็นการอ้างอิง หรือเรียกใช้ข้อมูลจากเว็บไซด์

Step 1 เริ่มสร้างไฟล์ HTML (สามารถสร้างจาก Notepad หรือ Tools อื่นๆ ที่ถนัด)
โครงสร้างไฟล์ดังนี้

<html>
  <head>
     <title>หน้าแรกสำหรับ Jquery Mobile</title>
  </head>
  <body>
  </body>
</html>

Step 2 แทรกโค้ดเพื่ออ้างถึง Source File จากเว็บผู้ให้บริการ

<html>
  <head>
     <title>หน้าแรกสำหรับ Jquery Mobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
  </body>
</html>

Step 3 แทรกโค้ดเรียกใช้งาน JQuery Mobile

<html>
  <head>
     <title>หน้าแรกสำหรับ Jquery Mobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="page_home">
      <div data-role="header">
          <h1>ส่วนของ Header หน้าแรก</h1>
      </div>
      <div data-role="content">
          เนื้อหา หน้าเว็บครับ
      </div>
      <div data-role="footer">
          <h4>ส่วนของ  Footer หน้าแรก</h4>
      </div>
    </div>
  </body>
</html>

Step 4 ทดสอบเรียกใช้งานไฟล์ Html ที่เราสร้างผ่าน Browsers

วันพุธที่ 21 มกราคม พ.ศ. 2558

JQuery Mobile คือ อะไร?

jQuery Mobile คือ อะไร?

หลายๆ คนคงเคยได้ยินชื่อ JQuery Mobile อธิบายง่ายๆ ว่า JQuery Mobile คือ เฟรมเวิร์ก
(Framework) หรือกลุ่มชุดคำสั่ง JavaScript

หรือสามารถกล่าวอีกนัยหนึ่งได้ว่าเป็น User Interface (UI Framework) สำหรับ Mobile ที่ออกแบบมาเพื่อใช้งานกับอุปกรณ์เคลื่อนที่(Mobile) ซึ่งสามารถนำไปใช้งานได้กับทั้งโปรแกรมบน Mobile และ Desktop

แพลตฟอร์มที่รองรับการทำงาน

JQuery Mobile สามารถทำงานบน Browser เช่น IE , Firefox , Chrome

ได้ทำให้สามารถทำงานบนอุปกรณ์บนพาที่มี Browser ดังกล่าวได้

ท่านสามารถตรวจสอบ แพลตฟอร์มที่รองรับการทำงาน ได้ที่

http://jquerymobile.com/browser-support/