ทักทายครับ

สวัสดีครับ หลังจากที่ blog นี้หยุดการอัพเดททบความเกี่ยวกับโค้ดในการใช้ทำเวปไปนานไม่ว่าจะเป็น code php, html, javascript, css, ajax เนื่องจากผมไม่ค่อยมีเวลาจนลืม blog นี้ไปเลย นึกขึ้นได้ตอนปีใหม่ ไปค้นหาใน google แล้วตกใจ เนื่องจาก blog นี้ไปอยู่ลำดับที่ 1 ของการค้นหา ไม่เชื่อลองดู เลยขอถือโอกาสเริ่มต้นใหม่ในช่วงปีใหม่นี้เริ่มอัพเดทบทความตั้งแต่ตอนนี้เป็นต้นไป หวังเป็นอย่างยิ่งว่าจะมีผู้ติดตามบทความของผมต่อไปน่ะครับ ปล.ท่านใดสนใจลงโฆษณาสามารถติดต่อได้ที่ hotcodephp@gmail.com

18 พ.ค. 2555

สร้าง menu right click เป็นของตัวเอง

การสร้างเมนูคลิกขวาบนเว็บไซต์จะช่วยให้ผู้ใช้งาน เข้าถึงฟังก์ชันการใช้งานของเว็บไซต์ได้รวดเร็วหรือเรียกว่าเป็น short cut หรือทางลัด เพียงแค่คลิกขวา

ตัวอย่าง script นี้เป็นการสร้างเมนูคลิกขวาง่ายๆ และดูสวยงามโดยใช้ firmwork ที่ชื่อว่า Dojo and Dijit ลองมาดูส่วนต่างๆ ของ script กัน

ก่อนอื่นต้องทำการเรียกไฟล์ dojo.xd.js โดยโค้ดด้านล่างนี้

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true"></script>

*** หรือจะ save ไฟล์ dojo.xd.js มาไว้ในเครื่องก็ได้***

ทำการกำหนดค่าของเมนู

<script type="text/javascript">
/* require necessary classes */
dojo.require('dijit.Menu');
dojo.require('dijit.MenuSeparator');
dojo.require('dijit.MenuItem');
dojo.require('dijit.PopupMenuItem');

/* when all classes have loaded... */
dojo.ready(function() {
});

</script>

ทำการ import style sheet

<style type="text/css">
/* bring in the claro theme */
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";

/* bring in the grid classes */
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/Menu.css";
</style>

หลังจากนั้นก็ทำการสร้าง Menu ด้วย โค้ด php หรือ โค้ด html ก็ได้

<!-- contentMenu popup --> 
<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display:none;"> 
 <div dojoType="dijit.MenuItem" id="enabledItem">Enabled Item</div> 
 <div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div> 
 <div dojoType="dijit.MenuSeparator"></div> 
 <div dojoType="dijit.MenuItem" iconClass="dijitIconCut"
  onClick="alert('not actually cutting anything, just a test!')">Cut</div> 
 <div dojoType="dijit.MenuItem" iconClass="dijitIconCopy"
  onClick="alert('not actually copying anything, just a test!')">Copy</div> 
 <div dojoType="dijit.MenuItem" iconClass="dijitIconPaste"
  onClick="alert('not actually pasting anything, just a test!')">Paste</div> 
 <div dojoType="dijit.MenuSeparator"></div> 
 <div dojoType="dijit.PopupMenuItem"> 
  <span>Enabled Submenu</span> 
  <div dojoType="dijit.Menu" id="submenu2"> 
   <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div> 
   <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div> 
   <div dojoType="dijit.PopupMenuItem"> 
    <span>Deeper Submenu</span> 
    <div dojoType="dijit.Menu" id="submenu4"> 
     <div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div> 
     <div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div> 
    </div> 
   </div> 
  </div> 
 </div> 
 <div dojoType="dijit.PopupMenuItem" disabled="true"> 
  <span>Disabled Submenu</span> 
  <div dojoType="dijit.Menu" id="submenu3" style="display: none;"> 
   <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div> 
   <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div> 
  </div> 
 </div> 
</div> 
<!-- end contextMenu -->

สุดท้ายกำหนด class ให้กับ tag <BODY> เป็น <body class="claro"> เท่านี้ก็ได้เมนูคลิกขวาเป็นของตัวเองแล้ว

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

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