รบกวนสอบถามพี่ๆ เรื่องการเรียกใช้งานเมนูครับ ให้ 1 เมนูที่เราออกแบบ สามารถนำไปใช้ได้ทุกๆ หน้าครับ
Code (PHP)
// สร้าง File .php ที่เราส้รางเมนู แล้วเรา include file นี้ ทุกๆหน้า ที่ต้องการให้มีเมนูที่เหมือนๆกัน
include file
Date :
2015-03-09 09:03:50
By :
bunchuai
พอจะมีวิธีอื่นอีกไหมครับ
Date :
2015-03-09 11:46:42
By :
Begin_coding
ถ้าไม่ include ก็ใส่โค้ดเมนูในทุกๆหน้าที่ต้องการ แต่เวลาแก้ไขก็ต้องแก้ไขทุกหน้าเช่นกัน(รับรองว่าเพลิน) ถ้าไม่อยากหางานให้ตัวเองก็ include ไฟล์อย่างที่ No.1 แนะนำครับ แก้ที่เดียวเหมือนกันทุกหน้า
Date :
2015-03-09 11:50:33
By :
arm8957
ส่วนมากเขาจะตั้งชื่อกันว่า nav .... เอาปัญหาที่ติดจริง ๆ มาถามดีกว่า
ประวัติการแก้ไข 2015-03-09 13:19:59
Date :
2015-03-09 13:18:37
By :
apisitp
ผมใช้ include เป็นวิธีที่ง่ายที่สุดแล้ว ในการสร้าง เมนูเที่เหมือนกัน
เพิ่มเข้าไปอีกนิดก็ไปจัดหน้า ด้วย javascript ในแต่ละ page เอาเอง
Date :
2015-03-09 13:36:27
By :
Chaidhanan
ส่วนใหญ่ก็ อินคู้ด ครับ แต่พอเจอ ถามต่อว่า มีวิธีอื่นอีกไหม ... มันไม่เมคเซ้นท์อ่ะครับ
Date :
2015-03-09 13:42:19
By :
apisitp
ของผมจะสร้างเมนู+jquery+bootstrap+css ไว้หน้า index.php ที่เดียวครับ
พอคลิ๊กที่เมนูจะให้ jquery เรียกไฟล์นั้นโหลดมาแสดงที่แท๊ก div ที่ตั้งเอาไว้
ในไฟล์อื่นๆ จะไม่มี css+jquery อยู่เลย ทำแบบนี้นอกจากโหลดเร็วแล้ว จาวาสคริปท์ยังไม่ขัดแข้งขัดขากันเองอีกด้วย
แต่ไฟล์ลูก(อื่นๆ) ทุกไฟล์จะไม่สามารถเรียกใช้งานตรงได้เลยครับ
ที่โหลดเร็วอาจเป็นเพราะใช้ nginx ล่ะมั้งครับ
Date :
2015-03-09 19:51:35
By :
sakuraei
Quote: พี่ครับรบกวนด้วยครับ พอจะยกตัวอย่างให้สักนิดได้ไหมคับ ที่คลิกเมนู และให้มาแสดงใน div
ยกตัวอย่างให้ดูเล็กๆน่ะครับ
<?php
session_start();
require 'libs/my_libs.php';
$db = new DBs();
$db->connect();
$user = new Authen();
if(!user->ready_login()){
echo "<a href='models/users/login.php'>Login Form</a>";
exit(0);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Hello">
<!--link href="bootstrap/css/bootstrap.css" rel="stylesheet"-->
<link href="bootstrap-3.2.0/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="assets/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="libs/jquery-ui-1.11.2.custom/jquery-ui.min.css">
<link rel="stylesheet" href="libs/jquery-ui-1.11.2.custom/jquery-ui.theme.min.css">
<!-- jQuery Version 1.11.0 -->
<script src="bootstrap-3.2.0/js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script src="libs/jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
<script src="libs/my_libs.js"></script>
<style type="text/css">
body {
padding: 10px;
padding-top: 70px;
background: url('login/images/bg.png');
}
.sb-page-header{
position:relative;padding:30px 15px;
text-align:center;color:rgba(255,255,255,.8);
background-color:#7ac70c; /*11DD3D #b84d45;*/
background-image:url(assets/img/image-000.jpg);
background-repeat: no-repeat;
background-position: center;
margin-bottom:0px;font-size:20px;
height: 100px;
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.navbar-inverse { background-color: #7AC70C}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #5C9609}
.dropdown-menu { background-color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #5C9609}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #080808}
.navbar-inverse .navbar-brand { color: #FFFFFF}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #7AC70C}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #333333}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
</style>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle pull-right" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="./" class="navbar-brand">Inventory System</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">บัญชีลูกหนี้ <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="referlink" href="models/invoice/invoice.php?act=load">ใบส่งสินค้า</a></li>
<li><a class="referlink" href="models/assembly/assembly-invoice.php?act=load">ใบส่งสินค้าชุดประกอบ</a></li>
<li><a class="referlink" href="models/withdraw/withdraw.php?act=load">ใบเบิกสินค้า</a></li>
<li><a class="referlink" href="models/cn/cn.php?act=load">ใบลดหนี้</a></li>
<li><a class="referlink" href="models/bn/invoice-listing.php?act=load">ใบวางบิล</a></li>
<li><div class="divider"></div></li>
<li><a class="referlink" href="models/payment/payment-inv.php?act=load">ชำระเงินตามใบส่งสินค้า</a></li>
<li><a class="referlink" href="models/payment/payment-bn.php?act=load">ชำระเงินตามใบวางบิล</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">รายงาน <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="referlink" href="models/withdraw/withdraw-report.php?act=load">รายงานใบเบิกสินค้า</a></li>
<li><a class="referlink" href="models/invoice/invoice-report.php?act=load">รายงานใบส่งสินค้า</a></li>
<li><a class="referlink" href="models/bn/bn-report.php?act=load">รายงานใบวางบิล</a></li>
<li><a class="referlink" href="models/cn/cn-report.php?act=load">รายงานใบลดหนี้</a></li>
<li><a class="referlink" href="models/inventory/assembly-report.php?act=load">รายงานสินค้าประกอบ</a></li>
<li><div class="divider"></div></li>
<li><a class="referlink" href="models/inventory/stockdata-list.php?act=load">รายงานสต็อคสินค้า</a></li>
<li><a class="referlink" href="models/inventory/stockcard-list.php?act=load">รายงานสต็อคการ์ด</a></li>
<li><div class="divider"></div></li>
<li><a class="referlink" href="models/invoice/invoice-report-conclusion.php?act=load">รายงานสรุปยอดขาย</a></li>
</ul>
</li>
</ul>
<p class="navbar-text navbar-right" style="color:#FFFFFF;">ผู้ใช้งาน : <?php echo $_SESSION["uid"]; ?><a href="#" class="navbar-link">[ ออกจากระบบ ]</a></p>
</nav>
</div>
</header>
<div id="mainContainer" class="container" style="background:#ffffff;padding:10px;border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;margin-top:0px;">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("a.referlink").click(function(e){
e.preventDefault();
var url = $(this).attr("href");
$("#mainContainer").empty().load(url);
});
$("#mainContainer").on("click","a.referlink",function(e){
e.preventDefault();
var url = $(this).attr("href");
$("#mainContainer").empty().load(url);
});
});
</script>
</body>
</html>
Date :
2015-03-11 21:37:24
By :
sakuraei
หลักการไม่แตกต่างกัน ขอบคุณที่ทำให้ผมเห็นความงดงามของภาษา PHP
Code (JavaScript)
/*PHP & Jquery VS .NET & Jquery*/
<script type="text/javascript">
$(document).ready(function(){
$("a.referlink").click(function(e){
e.preventDefault();
var url = $(this).attr("href");
$("#mainContainer").empty().load(url);
});
$("#mainContainer").on("click","a.referlink",function(e){
e.preventDefault();
var url = $(this).attr("href");
$("#mainContainer").empty().load(url);
});
});
Code (VB.NET)
'Master Page VS PHP include
Private Sub referlink_Click(ByVal p As Page)
mainContainer.Controls.Clear()
mainContainer.Controls.Add(p)
End Sub
ปล. ตัวอย่างเล็กฯของคุณมันช่วยชีวิตผมหายใจได้อีกเฮือกหนึ่ง
ประวัติการแก้ไข 2015-03-11 22:20:03
Date :
2015-03-11 22:12:26
By :
หน้าฮี
ขอบคุณมากครับผม
Date :
2015-03-12 04:35:01
By :
Begin_coding
Load balance : Server 00