วันจันทร์ที่ 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



    

  • css
    • 

      

    • jquery.mobile-1.4.5.css
      • 

    • jquery.mobile-1.4.5.min.css
      • 

    

  • js
    • 

      

    • 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 





















เขียนโดย



ที่





















ป้ายกำกับ:

















ไม่มีความคิดเห็น:















แสดงความคิดเห็น


















        

      









สมัครสมาชิก:
ส่งความคิดเห็น (Atom)