|
Javascript HV menu นำข้อมูลจาก DB มาโชว์
วันนี้ผมจะมาแนะนำการใช้ เมนู javascript โดยดึงข้อมูลจาก database มาใช้งาน ผมได้เอาเมนู
HV menu ของ javascript มาดัดแปลงเอานะครับ เพื่อให้ดึงข้อมูลจาก database มางาน ลองมาดูกันเลยนะครับ
ขั้นตอนการทำ
1.ขั้นแรกเราต้องมีสร้าง database สำหรับเมนูหลักก่อนนะครับ
CREATE TABLE `menu` (
`id` int(11) NOT NULL auto_increment,
`name` tinytext NOT NULL,
`links` tinytext NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 ;
--
-- dump ตาราง `menu`
--
INSERT INTO `menu` VALUES (1, 'menu1', 'http://www.google.co.th');
INSERT INTO `menu` VALUES (2, 'menu2', 'http://www.yahoo.com');
INSERT INTO `menu` VALUES (3, 'menu3', 'http://www.hotmail.com');
INSERT INTO `menu` VALUES (4, 'menu4', 'http://www.webthaidd.com');
INSERT INTO `menu` VALUES (5, 'menu5', 'http://www.zerohatemusic.com');
2.สร้าง database ของเมนูย่อยโดยอ้างอิง id ของเมนูหลัก
CREATE TABLE `type` (
`id` int(11) NOT NULL auto_increment,
`id_menu` int(11) NOT NULL,
`name` tinytext NOT NULL,
`links` tinytext NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 ;
--
-- dump ตาราง `type`
--
INSERT INTO `type` VALUES (1, 1, 'type1', 'http://www.google.co.th');
INSERT INTO `type` VALUES (2, 1, 'type2', 'http://www.yahoo.com');
INSERT INTO `type` VALUES (3, 1, 'type3', 'http://www.hotmail.com');
INSERT INTO `type` VALUES (4, 5, 'type4', 'http://www.webthaidd.com');
INSERT INTO `type` VALUES (5, 5, 'type5', 'http://www.zerohatemusic.com');
3.สร้างไฟล์ deme.php เพื่อใช้ในการโชว์เมนู
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>HV menu</title>
</head>
<body>
<script language="javascript">
var LowBgColor='white'; // Background color when mouse is not over
var LowSubBgColor='white'; // Background color when mouse is not over on subs
var HighBgColor='black'; // Background color when mouse is over
var HighSubBgColor='black'; // Background color when mouse is over on subs
var FontLowColor='black'; // Font color when mouse is not over
var FontSubLowColor='black'; // Font color subs when mouse is not over
var FontHighColor='white'; // Font color when mouse is over
var FontSubHighColor='white'; // Font color subs when mouse is over
var BorderColor='black'; // Border color
var BorderSubColor='black'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="arial,comic sans ms,technical" // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='left'; // Item text position 'left', 'center' or 'right'
var MenuCentered='left'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=.2; // horizontal overlap child/ parent
var ChildVerticalOverlap=.2; // vertical overlap child/ parent
var StartTop=240; // Menu offset x coordinate
var StartLeft=1; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=3; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=0; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=1000; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc=''; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=1; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highligthed
var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height
function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}
</script>
<?
mysql_connect("localhost", "root", "12345"); //คอนเน็ต DB
$dbname = "test"; //ชื่อ DB
$sql = "select * from menu";
$query = mysql_db_query($dbname, $sql);
$num_menu = mysql_num_rows($query); //หาจำนวนเมนูหลัก
?>
<script language="javascript"> var NoOffFirstLineMenus=<?=$num_menu?>; </script> //กำหนดจำนวนเมนูหลัก
<?
$n = 1;
while($result = mysql_fetch_array($query)) {
$sql = "select * from type where id_menu = '$result[id]' "; //ดึงข้อมูลเมนูย่อย โดยอ้างอิง id เมนูหลัก
$query_t = mysql_db_query($dbname, $sql);
$num_type = mysql_num_rows($query_t);
$m = 1;
while($result_t = mysql_fetch_array($query_t)) {
?>
<script language="javascript">
Menu<?=$n?>_<?=$m?> = new Array("<?=$result_t[name]?>","<?=$result_t[links]?>","",0,20,150); // loop เมนูย่อย
</script>
<? $m ++ ; } ?>
<script language="javascript">
Menu<?=$n?> = new Array("<?=$result[name]?>","<?=$result[links]?>","",<?=$num_type?>,20,138); // loop ของเมนูหลัก
</script>
<? $n ++ ; } ?>
<script type='text/javascript' src='menu_com.js'></script> //เรียกใช้ไฟล์ javascript ในการแสดงผล
<script type='text/javascript'> function Go(){return} </script> //เรียกใช้ function
</body>
</html>
3.อาจจะดูยุ่งยากหน่อยครับ ถ้าไม่เข้าใจยังไงลองโหลด code ไปลองดูนะครับ เพราะว่าจะต้องมีไฟล์ javascript ในการทำงานอีกไฟล์นึง นั้นคือไฟล์ menu_com.js
 Download Source Code
|
Javascript HV menu นำข้อมูลจาก DB มาแสดง
จัดทำโดย : Zerohate 
