|
|
|
จะแก้ปัญหา Jquery ทำงานพร้อมกันไม่ได้ อย่างไรดีครับ |
|
|
|
|
|
|
|
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/jquery.countdown.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.alerts.js" type="text/javascript"></script>
<script src="js/jquery.countdown.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#alert1").click(function() {
jAlert('error', 'This is the error dialog box with some extra text.', 'Error Dialog');
});
$("#alert2").click(function() {
jAlert('warning', 'This is the warning dialog along with some <u>html</u>.', 'Warning Dialog');
});
$("#alert3").click(function() {
jAlert('success', 'This is the success dialog.', 'Success Dialog');
});
$("#alert4").click(function() {
jAlert('info', 'This is the info dialog.', 'Info Dialog');
});
$("#confirm").click(function() {
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
jAlert('success', 'Confirmed: ' + r, 'Confirmation Results');
});
});
$("#prompt").click(function() {
jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
if (r) alert('You entered ' + r);
});
});
});
</script>
</head>
<body>
<script type="text/javascript">
$(function() {
var endDate = "June 7, 2087 15:03:26";
$('.countdown-simple').countdown({ date: endDate });
$('.countdown-styled').countdown({
date: endDate,
render: function(data) {
var el = $(this.el);
el.empty()
.append("<div>" + this.leadingZeros(data.years, 2) + " <span>years</span></div>")
.append("<div>" + this.leadingZeros(data.days, 3) + " <span>days</span></div>")
.append("<div>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div>")
.append("<div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div>")
.append("<div>" + this.leadingZeros(data.sec, 2) + " <span>sec</span></div>");
}
});
});
</script>
<h1>jQuery Alert Dialogs</h1>
<input id="alert1" type="button" value="Error" />
<input id="alert2" type="button" value="Warning" />
<input id="alert3" type="button" value="Success" />
<input id="alert4" type="button" value="Info" />
<input id="prompt" type="button" value="Prompt" />
<input id="confirm" type="button" value="confirm" />
<br />
<div class="countdown-styled" id="countdown-styled"></div>
</body>
</html>
ผมโหลด Jquery มาใช้ 2 ตัวคือ
http://rendro.github.com/countdown/
http://www.tutorialdev.com/jquery/แจ้งเตือนอย่างมีสไตล์-ด/
แต่มันทำงานพร้อมกันไม่ได้ครับ เมื่อผมเรียกใช้ <script src="js/jquery.js" type="text/javascript"></script> Jquery countdown จะไม่ทำงาน แต่ถ้าไม่เรียก Jquery Alert ก็จะไม่ทำงาน จะแก้ไขอย่างไรดีครับ
Tag : PHP, jQuery
|
ประวัติการแก้ไข 2013-01-15 15:57:54
|
|
|
|
|
Date :
2013-01-15 15:55:13 |
By :
zinlucifer |
View :
3186 |
Reply :
17 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
เอาบรรทัดที่ 10 ออกเลยครับ ใช้ตัวเดียว
|
|
|
|
|
Date :
2013-01-15 16:41:04 |
By :
deawx |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
พอเอาออกแล้ว Jquery alert มันจะแสดงผลผิดพลาด อ่ะครับ
|
|
|
|
|
Date :
2013-01-15 16:44:14 |
By :
zinlucifer |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ลองเอาตัว countdown ไปวางไว้ก่อน jquery.js ดูครับ
Code (JavaScript)
<script src="js/jquery.countdown.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.alerts.js" type="text/javascript"></script>
ถ้ายังไม่ได้ก็ให้ลองไปดาวโหลด jquery.js เวอร์ชั่นใหม่มาใส่แทนดู (jquery-1.8.3.min.js)
http://jquery.com/
|
|
|
|
|
Date :
2013-01-15 17:08:25 |
By :
dreamlover |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ขอบคุณ คุณ Jack มากครับวางไว้ด้านบนแล้วทำงานจริงๆด้วย
|
|
|
|
|
Date :
2013-01-15 17:12:42 |
By :
zinlucifer |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
คำแนะนำเพิ่มเติม เนื่องจาก slider หรือโค๊ดต่างๆของ Jquery.min ใช้ Version แตกต่างกันออกไป อาจเกิดปัญหาข้อผิดพลาดได้
แนะนำให้รวมกันเป็นตัวเดียว เพื่อความสะดวกครับ
|
|
|
|
|
Date :
2013-01-15 17:59:44 |
By :
Ex-[S]i[L]e[N]t |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Code (PHP)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Style 16 (Tomato) - Menu by Apycom.com</title>
<link type="text/css" href="../JS_Menu/menu.css" rel="stylesheet" />
<script type="text/javascript" src="../JS_Menu/jquery.js"></script>
<script type="text/javascript" src="../JS_Menu/menu.js"></script>
</head>
<body>
<div id="menu" align="center">
<ul class="menu">
<li><a href="user_page.php" ><span>หน้าแรก</span></a></li>
<li><a href="#" class="parent"><span>บริการ</span></a>
<div><ul>
<li><a href="#" class="parent"><span>รายละเอียดการบริการ</span></a>
<div>
<ul>
<li><a href="#"><span>ทดสอบคุณสมบัติวัสดุโยธา</span></a></li>
<li><a href="#"><span>ทดสอบคุณภาพน้ำ</span></a></li>
<li><a href="#"><span>ทดสอบคุณภาพดิน ปุ๋ยและขยะ</span></a></li>
</ul>
</div>
</li>
<li><a href="#" class="parent"><span>ขอรับบริการ</span></a>
<div>
<ul>
<li><a href="Reques/CustomerData.php"><span>ขอรับบริการวิเคราะห์คุณภาพน้ำ</span></a></li>
<li><a href="#"><span>ขอรับบริการวิเคราะห์คุณภาพดิน ปุ๋ยและขยะ</span></a></li>
<li><a href="#"><span>ขอรับบริการทดสอบวัสดุโยธา</span></a></li>
</ul>
</div>
</li>
<li><a href="#"><span>ตรวจสอบชิ้นงาน</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>เกี่ยวกับ</span></a></li>
<li><a href="#"class="parent"><span>บุคลากร</span></a>
<div>
<ul>
<li><a href="personnel-dean.inc.php"><span>ผู้บริหาร</span></a></li>
<li><a href="#" class="parent"><span>วิศวกรตรวจสอบผล</span></a>
<div>
<ul>
<li><a href="personnel/personnel-ceEngineer.php"><span>สาขาโยธา</span></a></li>
<li><a href="personnel/personnel-envEngineer.php"><span>สาขาสิ่งแวดล้อม</span></a></li>
</ul>
</div>
</li>
<li><a href="#" class="parent"><span>เจ้าหน้าที่ทดสอบ</span></a>
<div>
<ul>
<li><a href="personnel/personnel-ceStaff.php"><span>สาขาโยธา</span></a></li>
<li><a href="personnel/personnel-envStaff.php"><span>สาขาสิ่งแวดล้อม</span></a></li>
</ul>
</div>
</li>
<li><a href="personnel/personnel-office.php"><span>เจ้าหน้าที่ธุระการ</span></a></li>
</ul>
</div>
</li>
<li><a href="#"><span>ผลงาน</span></a></li>
<li class="last"><a href="#"><span>ติดต่อ</span></a></li>
</ul>
</div>
<div ><a href="http://apycom.com/"></a></div><br>
<!----------------------ถ้านำส่วนนี้ออกจะทำงานได้ปกติ -------->
<div align="center"><? include("ceEngineer2.php")?></div>
<!----------------------------- -------->
</body>
</html>
ไฟล์ที่ include เข้ามา (ceEngineer2.php)Code (PHP)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Direction-Aware Hover Effect with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Direction-Aware Hover Effect with CSS3 and jQuery" />
<meta name="keywords" content="hover, css3, jquery, effect, direction, aware, depending, thumbnails" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/modernizr.custom.97074.js"></script>
</head>
<body>
<div class="contain">
<section>
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/505046-Menu">
<img src="images/1.jpg" />
<div><span>Menu by Simon Jensen</span></div>
</a>
</li>
<li>
<a href="http://dribbble.com/shots/504336-TN-Aquarium">
<img src="images/2.jpg" />
<div><span>TN Aquarium by Charlie Gann</span></div>
</a>
</li>
<li>
<a href="http://dribbble.com/shots/504197-Mr-Crabs">
<img src="images/3.jpg" />
<div><span>Mr. Crabs by John Generalov</span></div>
</a>
</li>
</ul>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );
});
</script>
</body>
</html>
ขอคำแนะนำด้วยค่ะ พอใช้ jquery 2 ตัว พร้อมกันตัวแรกจะไม่ทำงานค่ะ แก้ยังไงช่วยด้วยคะ ขอบคุณคะ
|
ประวัติการแก้ไข 2013-01-23 16:50:38
|
|
|
|
Date :
2013-01-23 16:47:48 |
By :
homhuangirl |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
สังเกตุดูว่า มี jQuery.min ทับ Vr. กันอยู่หรือเปล่า
|
|
|
|
|
Date :
2013-01-23 16:57:34 |
By :
Ex-[S]i[L]e[N]t |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
jQuery.min มีอยู่แค่ในส่วนของ ceEngineer2.php ส่วนที่สองคะ ส่วนไฟล์แรกไม่มี jQuery.min คะ ทำยังไงดีคะ
|
|
|
|
|
Date :
2013-01-23 17:02:03 |
By :
homhuangirl |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ลองเอา <script src="js/modernizr.custom.97074.js"></script> ออกครับ
|
|
|
|
|
Date :
2013-01-23 17:08:55 |
By :
Ex-[S]i[L]e[N]t |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
พี่คะก็ไม่ได้อยู่ดีอ่ะค่ะ มันจะไม่ทำงานสักตัวเร้ยอ่ะค่ะ น้องติดมาเป็นอาทิตย์แร้วง่าาาา
(น้องขอแอดเฟสบุ๊คพี่ได้ไหมคะ)
|
|
|
|
|
Date :
2013-01-23 17:26:21 |
By :
homhuangirl |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ครับๆ
|
|
|
|
|
Date :
2013-01-23 17:40:41 |
By :
Ex-[S]i[L]e[N]t |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Date :
2013-01-23 18:36:24 |
By :
apisitp |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
น้องยังแก้ไม่ได้เร้ยง่าาาาาา
|
|
|
|
|
Date :
2013-01-23 19:09:03 |
By :
homhuangirl |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ไปหาอ่านจากเน๊ตนะ jQuery.noConflict();
หรือ http://www.cpe52.com/viewthread.php?tid=3415
|
|
|
|
|
Date :
2013-01-23 19:17:22 |
By :
weaned |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ลองเริ่มต้นใหม่อีกทีนะครับ ในไฟล์ 'ceEngineer2.php' ลองย้ายสคริปที่อยู่ด้านล่างมาไว้ใน <head></head>
ลองดูก่อนว่าผลออกมาเป็นอย่างไร
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Direction-Aware Hover Effect with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Direction-Aware Hover Effect with CSS3 and jQuery" />
<meta name="keywords" content="hover, css3, jquery, effect, direction, aware, depending, thumbnails" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/modernizr.custom.97074.js"></script>
//ย้ายมาไว้ตรงนี้
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );
});
</script>
</head>
<body>
<div class="contain">
<section>
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/505046-Menu">
<img src="images/1.jpg" />
<div><span>Menu by Simon Jensen</span></div>
</a>
</li>
<li>
<a href="http://dribbble.com/shots/504336-TN-Aquarium">
<img src="images/2.jpg" />
<div><span>TN Aquarium by Charlie Gann</span></div>
</a>
</li>
<li>
<a href="http://dribbble.com/shots/504197-Mr-Crabs">
<img src="images/3.jpg" />
<div><span>Mr. Crabs by John Generalov</span></div>
</a>
</li>
</ul>
</section>
</div>
</body>
</html>
ผมลืมถามไปว่า ไฟล์นี้ถ้าใช้งานตัวเดียวโดดๆ ใช้ได้เป็นปกติหรือไม่ ทดสอบมาแล้วหรือยัง?
|
|
|
|
|
Date :
2013-01-24 09:07:48 |
By :
dreamlover |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 00
|