ขอคำแนะนำในการเอา Javascript มาใช้งานร่วมกันได้โดยไม่ชนกันหรือไม่ทำงานครับ
ถ้าเอา jquery ออกสักอัน มันยังทำงานปกติมั้ยครับ?
Date :
2013-03-13 09:15:10
By :
cookiephp
เอา .min.js ออก1ตัวครับ
Date :
2013-03-13 09:15:36
By :
Dragons_first
ลองใช้ แค่ <script type="text/javascript" src="jquery.min.js" ></script>
หรือ <script type="text/javascript" src="sr01/slide/jquery-1.4.3.min.js" ></script> สักอันนึงครับ
หรือถ้าจำเป็นต้องใช้ลองใช้ $.noConflict(); ครับ
jQuery.noConflict
Date :
2013-03-13 09:18:08
By :
Manussawin
ถ้าเอาตัวนี้ออก
<script type="text/javascript" src="jquery.min.js" ></script>
จะไม่ทำงานทั้ง เมนู ทั้ง slide เลยครับ
ถ้าเอาตัวนี้ออก
<script type="text/javascript" src="jquery-1.4.3.min.js" ></script>
เมนูไม่ทำงาน แต่ slide ทำงานครับ
Date :
2013-03-13 10:41:50
By :
tongchimlang
ผมก็เคยเป็นครับปวดหัวเลย ผมเล่น สลับบรรทัดกันบางทีก็ใช้ได้ครับ ฮ่าๆๆ (มั่วๆเอา) แต่อยากได้วิธีแบบที่ไม่ใช่แบบนี้เหมือนกันครับ ใครทราบช่วยแนะนำด้วยขอรับ
Date :
2013-03-13 10:53:32
By :
zenix
ผมก็เล่นสลับบรรทัดไปมาก็ยังไม่ได้เลยครับ
นั่งไล่หาสาเหตุหลายวันแล้วยังไม่ได้เลยครับ
Date :
2013-03-13 10:56:58
By :
tongchimlang
ให้มีแค่ jquery.min.js ตัวเดียวค่ะ ก้เอาตัว jquery.min.js ที่ใหม่สุดไว้น่ะค่ะ ก็สามารถใช้งานได้ปกติ เพราะว่าฟังก์ชั่นการทำงานใน jquery.min.js ค่อนข้างเหมือนกัน
Date :
2013-03-13 11:00:47
By :
JuNiorWP
ประเด็นมันไม่ได้อยู่ที่ jquery.min.js หนะสิครับ มันอยู่ที่เอา function ที่เขาแจกมารวมๆกันแล้วมันดันไปชนกันอ่าาา
ถ้าสลับไม่ได้ ก็คงต้องไปดูใน css กันอีกทีแล้วครับ ว่า มี name id อะไรที่มันดันใช้ชื่อเดียวกันอะครับ (ข้อนี้ผมเคยเจอ แก้แล้วหายเหมือนกัน)
Date :
2013-03-13 11:05:24
By :
zenix
ตอบความคิดเห็นที่ : 3 เขียนโดย : Manussawin เมื่อวันที่ 2013-03-13 09:18:08
รายละเอียดของการตอบ ::
ผมอยากลองวิธีนี้ดู อ่านแล้วก็ยังงงครับ
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="jquery.easing.1.3.js" ></script>
<script>
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
พอผมใส่โค๊ดนี้ลงไปใต้สองบรรทัดบนนี้ ผลหน้าเว็บโดนซ่อน
ผมมือใหม่ เลยไม่ทราบว่า ตรงนี้ใช้ใส่ค่าอะไรเข้าไปครับ $("div").hide();
แล้วตรงนี้คืออะไร $('someid').hide();
Date :
2013-03-13 11:43:50
By :
tongchimlang
Code (PHP)
<script>
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
แนะนำว่า include ครับลองดูก่อน คุณเขียน code หน้า index ยังไงเรียกแบบ เอา code หน้า index มาดูครับ
Date :
2013-03-14 08:42:43
By :
แค่ผ่านมา
**นี้เลยครับโค๊ด***
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=windows-874" />
<title>website</title>
<link rel="stylesheet" type="text/css" href="css/styleit1.css" media="all" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js" ></script>
</head>
<body>
<!---เมนู------>
<div style="width:900px; height:90px; float:left; background-color:#00CC99">
<div class="contentmn" >
<ul id="sdt_menuxx" class="sdt_menuxx">
<li>
<a href="xx" >
<img src="home.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrapxx" >
<span class="sdt_link">HOME</span>
<span class="sdt_descr">ITtidpeek Home</span>
</span>
</a>
<div class="sdt_box" >
<a href="#">ระบบ</a>
<a href="#">สินค้า</a>
<a href="#">สมาชิก</a>
</div>
</li>
<li>
<a href="index.php-display=Product.htm" >
<img src="home.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrapxx">
<span class="sdt_link">Product</span>
<span class="sdt_descr">By MonaVie</span>
</span>
</a>
<div class="sdt_box">
<a href="index.php-display=Product_Juices.htm">HEALTH JUICES</a>
<a href="index.php-display=Product_Skincare.htm" >SKIN CARE</a>
</div>
</li>
</ul>
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrapxx span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menuxx > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'85px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrapxx')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrapxx')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
</div>
</div>
<!---เมนู------>
<script type="text/javascript" src="js/jquery-1.4.3.min.js" ></script>
<script type="text/javascript" src="js/slider_progress.js"></script>
<script type="text/javascript" src="js/slider-1.js"></script>
<!--slide--->
<div style="width:900px; height:400px; float:left; background-color:#999900">
<div id="slider-a-container">
<a class="slide async-img">
<img src="sr01/slide/banner-1.jpg" alt="" />
</a>
<a class="slide async-img">
<img src="sr01/slide/banner-2.jpg" alt="" />
</a>
<div class="desc">
<div class="foot">
<h3 class="title">Xperia™ pro</h3>
<div class="text">Android smartphone for fast messaging</div>
</div>
<!-- foot -->
<span class="x">20</span><span class="y">180</span> <span class="width">180</span> <span class="hbgcolor">#ffffff</span></div>
<!-- desc -->
<div class="desc">
<div class="head">
<h3>Xperia™ pro</h3>
</div>
<div class="foot">
<div class="text">Perfect keyboard and smart functions for fast messaging. Reality display with Mobile BRAVIA® Engine and Sony's</div>
</div>
<!-- foot -->
<span class="x">20</span><span class="y">150</span> <span class="width">280</span> <span class="hbgcolor">#dc3900</span><span class="hcolor">#ffffff</span></div>
<!-- desc -->
<div class="thumb-bar">
<div class="thumb">
<div class="color"> <img src="sr01/slide/banner-1-tmb.jpg" alt="" /></div>
<div class="black"> <img src="sr01/slide/banner-1-tmb-black.jpg" alt="" /></div>
</div>
<div class="thumb">
<div class="color"> <img src="sr01/slide/banner-2-tmb.jpg" alt="" /></div>
<div class="black"> <img src="sr01/slide/banner-2-tmb-black.jpg" alt="" /></div>
</div>
</div>
</div>
</div>
<!--slide--->
</body>
</html>
Date :
2013-03-14 09:53:52
By :
tongchimlang
Load balance : Server 00