|
 |
| |
ใส่ค่าในเมนู jquery ตรงไหนคับ รบกวนผู้รู้ด้วยครับผมT-T |
| |
 |
|
|
 |
 |
|
ผมลองทำตามตัวอย่างดูแล้วแต่ไม่ได้อ่ะคับ
อันนี้ตัวอย่างที่เค้าทำให้ดูครับแต่ผมงง
http://www.byscripts.info/scripts/javascript-dynamic-accordion-menu
อันนี้โค้ดคับ
Code
var BySlideMenu = new Class({
Implements: Options,
options: {
defaultIndex: false,
expandMode: 'mouseover',
pinMode: false,
vertical: false,
compressSize: 40,
elementWidth: 320,
elementHeight: 240,
autoSize: true,
duration: 500,
transition: 'linear',
containerWidth: null,
containerHeight: null,
useOverflow: false
},
initialize: function(containerId, options){
this.setOptions(options);
this.elementsId = [];
this.containerId = $pick(containerId, 'byslidemenu');
var container = $(this.containerId);
container.addEvent('mouseleave', function(){
this.resetAll();
}.bind(this));
var elements = container.getChildren();
var num = elements.length;
var imgHeight = null, imgWidth = null;
if(this.options.autoSize)
{
var firstImg = elements[0].getElement('img');
if(firstImg)
{
imgHeight = firstImg.getHeight();
imgWidth = firstImg.getWidth();
}
}
var offsetWidth =
elements[0].getStyle('padding-left').toInt()
+ elements[0].getStyle('padding-right').toInt()
+ elements[0].getStyle('border-left-width').toInt()
+ elements[0].getStyle('border-right-width').toInt();
var offsetHeight =
elements[0].getStyle('padding-top').toInt()
+ elements[0].getStyle('padding-bottom').toInt()
+ elements[0].getStyle('border-top-width').toInt()
+ elements[0].getStyle('border-bottom-width').toInt();
if(this.options.vertical)
{
this.posAttr = 'top';
var containerWidth = $pick(imgWidth, this.options.containerWidth, this.options.elementWidth);
if(containerWidth == "full")
containerWidth = container.getParent().getStyle('width').toInt();
if(this.options.containerHeight)
{
if(this.options.containerWidth == 'full')
var containerHeight = container.getParent().getStyle('height').toInt();
else
var containerHeight = this.options.containerHeight;
this.openSize = containerHeight - ((num - 1) * this.options.compressSize);
}
else
{
this.openSize = $pick(imgHeight, this.options.elementHeight);
var containerHeight = this.openSize + ((num - 1) * this.options.compressSize);
}
this.closeSize = containerHeight / num;
var elementHeight = this.openSize;
var elementWidth = containerWidth;
}
else
{
this.posAttr = 'left';
var containerHeight = $pick(imgHeight, this.options.containerHeight, this.options.elementHeight);
if(containerHeight == "full")
containerHeight = container.getParent().getStyle('height').toInt();
if(this.options.containerWidth)
{
if(this.options.containerWidth == 'full')
var containerWidth = container.getParent().getStyle('width').toInt();
else
var containerWidth = this.options.containerWidth;
this.openSize = containerWidth - ((num - 1) * this.options.compressSize);
}
else
{
this.openSize = $pick(imgWidth, this.options.elementWidth);
var containerWidth = this.openSize + ((num - 1) * this.options.compressSize);
}
this.closeSize = containerWidth / num;
var elementHeight = containerHeight;
var elementWidth = this.openSize;
}
container.setStyles({
padding: 0,
position: 'relative',
overflow: 'hidden',
width: containerWidth,
height: containerHeight
});
var id = 0;
elements.each(function(element){
var beforePos = id * this.options.compressSize;
var afterPos = this.openSize + ((id - 1) * this.options.compressSize);
var closePos = id * this.closeSize;
element.setStyles({
position: 'absolute',
height: elementHeight - offsetHeight,
width: elementWidth - offsetWidth
});
element.setStyle(this.posAttr, closePos);
element.set('tween', {
duration: this.options.duration,
transition: this.options.transition
});
id++;
element.set('id', this.containerId + '_Elm' + id);
element.store('id', id);
element.store('beforePos', beforePos);
element.store('afterPos', afterPos);
element.store('closePos', closePos);
this.elementsId.include(id);
if([this.options.pinMode, this.options.expandMode].contains('mouseover'))
{
element.addEvent('mouseenter', function(element){
if(this.options.expandMode == 'mouseover')
this.expand(element, this.options.pinMode == 'mouseover');
}.bind(this, element));
}
if(this.options.pinMode || this.options.expandMode == 'click')
{
element.addEvent('click', function(element){
if(this.options.defaultIndex == element.retrieve('id'))
{
this.options.defaultIndex = 0;
this.resetAll();
}
else if(this.options.expandMode == 'click')
this.expand(element, this.options.pinMode == 'click');
else
this.options.defaultIndex = element.retrieve('id');
}.bind(this, element));
}
}, this);
if(this.options.defaultIndex)
this.expand(this.options.defaultIndex, false, true);
},
expand: function(element, setDefault, noAnim){
if($type(element) == 'number')
element = $(this.containerId + '_Elm' + element);
if(this.options.useOverflow)
this.clearOverflow();
var currentId = element.retrieve('id');
if(this.options.useOverflow)
this.switchOverflowTimer = this.switchOverflow.delay(this.options.duration, this, element);
if(setDefault)
this.options.defaultIndex = currentId;
this.elementsId.each(function(elementId){
var elm = $(this.containerId + '_Elm' + elementId);
if(elementId > currentId)
this.compressAfter(elm, noAnim);
else
this.compressBefore(elm, noAnim);
}, this);
},
switchOverflow: function(element){
element.setStyle('overflow', 'auto');
},
clearOverflow: function(){
$clear(this.switchOverflowTimer);
$(this.containerId).getChildren().setStyle('overflow', '');
},
compressBefore: function(element, noAnim){
var pos = element.retrieve('beforePos');
var tween = element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition});
if(noAnim)
tween.set(pos);
else
tween.start(pos);
},
compressAfter: function(element, noAnim){
var pos = element.retrieve('afterPos');
var tween = element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition});
if(noAnim)
tween.set(pos);
else
tween.start(pos);
},
reset: function(element){
var pos = element.retrieve('closePos');
element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition}).start(pos);
},
resetAll: function(){
if(this.options.useOverflow)
this.clearOverflow();
if(this.options.defaultIndex)
this.expand(this.options.defaultIndex);
else
{
this.elementsId.each(function(elementId){
this.reset($(this.containerId + '_Elm' + elementId));
}, this);
}
}
});
Tag : PHP, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2010-07-28 14:27:37 |
By :
gravity99 |
View :
1478 |
Reply :
17 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
แล้วจะใส่ค่าอะไรยังไงตรงไหนคะ
เค้ามีตัวอย่างให้ดูเยอะมากกกก ไม่น่ายากนะคะ
|
ประวัติการแก้ไข
2010-07-28 14:32:31
| |
|
|
| |
| Date :
2010-07-28 14:31:00 |
By :
ultrasiam |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
คือ ผมลองทำแล้วภาพมันไม่เปนตามตัวอย่างอ่ะค้าบบT-T
ผมไม่ค่อยรุเรื่องเลยคับ ลองทำตามตัวอย่าง ไม่เหนได้เยยคับ
|
| |
|
|
| |
| Date :
2010-07-28 14:40:13 |
By :
gravity99 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ในตัวอย่าง กับ โค้ดที่โหลดมา ผมงงมากเลยคับ
ลองเปลี่ยนดู มันไม่ไปตามอ่ะคับ
|
| |
|
|
| |
| Date :
2010-07-28 14:49:31 |
By :
gravity99 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
มันเป็นยังไงคะ
ลองทำดูแล้วก็ใช้งานได้ ปกตินะ
|
| |
|
|
| |
| Date :
2010-07-28 15:09:57 |
By :
ultrasiam |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
โค้ดมีแค่นี้เอง
แบบแรก
Code
<!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>
<script type="text/javascript" src="js/mootools-core.js"></script>
<script type="text/javascript" src="js/byslidemenu.js"></script>
</head>
<body>
<ul id="byslidemenu">
<li><img src="images/creditcards.jpg" /></li>
<li><img src="images/games.jpg" /></li>
<li><img src="images/computer.jpg" /></li>
<li><img src="images/eiffeltower.jpg" /></li>
<li><img src="images/electronic.jpg" /></li>
</ul>
</body>
</html>
<script>
window.addEvent('load', function(){
var slideMenu = new BySlideMenu();
});
</script>
แบบที่ 2
Code
<!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>
<script type="text/javascript" src="js/mootools-core.js"></script>
<script type="text/javascript" src="js/byslidemenu.js"></script>
</head>
<body>
<ul id="byslidemenu">
<li><img src="images/creditcards.jpg" /></li>
<li><img src="images/games.jpg" /></li>
<li><img src="images/computer.jpg" /></li>
<li><img src="images/eiffeltower.jpg" /></li>
<li><img src="images/electronic.jpg" /></li>
</ul>
</body>
</html>
<script>
window.addEvent('load', function(){
var compressmenu = new BySlideMenu('byslidemenu', {
compressSize: 10,
duration: 250
});
});
</script>
|
ประวัติการแก้ไข
2010-07-28 15:14:19
| |
|
|
| |
| Date :
2010-07-28 15:11:06 |
By :
ultrasiam |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
คือผมงงว่า มันต้องไปใส่ พวก class,id ที่เราตั้งเองตรงไหนอ่าคับ
เพราะผมเหนในตัวอย่างตรงส่วน javascript กับไฟล์ที่โหลดมา มันต่างกันอ่ะคับ
ผมลองทำลองเปลี่ยน ใส่ตรงนู้นทีตรงนั้นที ก็ไม่ได้อ่าคับ T-T ช่วยสอนผมทีคับ
ความรู้เท่าหางอึ่งเลยผม
|
| |
|
|
| |
| Date :
2010-07-28 15:16:56 |
By :
gravity99 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไฟล์ js ที่โหลดมา เค้าสร้างเป็น class ไว้ให้เรียกใช้เพื่อสร้างเมนูของเค้า ไม่ต้องไปแก้ค่ะ
ให้แก้ตอนเรียกใช้ class นั้น
จากตัวอย่างแบบที่ 2
<ul id="compressmenu">
<li><img src="images/creditcards.jpg" /></li>
<li><img src="images/games.jpg" /></li>
<li><img src="images/computer.jpg" /></li>
<li><img src="images/eiffeltower.jpg" /></li>
<li><img src="images/electronic.jpg" /></li>
</ul>
เรามี UL List ชื่อ(id) compressmenu
เวลาเรียกใช้ class เค้าให้เรียกแบบนี้
var compressmenu = new BySlideMenu('compressmenu ', {
compressSize: 10,
duration: 250
});
ก็เปลี่ยนตัวสีแดง ๆ เป็น (UL List ชื่อ(id) compressmenu) ของเรา แค่นั้นค่ะ
|
| |
|
|
| |
| Date :
2010-07-28 15:23:10 |
By :
ultrasiam |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
จะใส่ link ก็เพิ่มเข้าในใน UL List เช่น
<ul id="compressmenu">
<li><a href="information.html"><img src="images/creditcards.jpg" border="0"/></a></li>
<li><img src="images/games.jpg" /></li>
<li><img src="images/computer.jpg" /></li>
<li><img src="images/eiffeltower.jpg" /></li>
<li><img src="images/electronic.jpg" /></li>
</ul>
|
| |
|
|
| |
| Date :
2010-07-28 15:29:17 |
By :
ultrasiam |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ต้องมีตัวนี้ด้วยค่ะ
<script type="text/javascript" src="js/mootools-core.js"></script>
ไม่งั้น js error
|
| |
|
|
| |
| Date :
2010-07-28 15:55:53 |
By :
ultrasiam |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เง้อ ผมไม่มีไฟล์นั่นอ่ะครับ ไม่มีให้โหลดเลยคับ
|
| |
|
|
| |
| Date :
2010-07-28 15:59:29 |
By :
gravity99 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณมากๆเลยครับ ที่มาช่วยสอน ถึงแม้ตอนนี้ผมจะยังทำไม่ได้ก็ตาม
ขอบคุณครับ
ผมจะพยายามต่อไป สู้
|
| |
|
|
| |
| Date :
2010-07-28 16:03:32 |
By :
gravity99 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
mootools-core.js
|
ประวัติการแก้ไข
2010-07-28 16:05:12
| |
|
|
| |
| Date :
2010-07-28 16:04:35 |
By :
ultrasiam |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
โอ้ ขอบคุณมากครับ แต่ยังมะได้เช่นเดิมT-T
สงสัย ผมจะเข็นไม่ขึ้นจิงๆT-T
|
| |
|
|
| |
| Date :
2010-07-28 16:12:00 |
By :
gravity99 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
<script type="text/javascript" src="js/mootools-core.js"></script>
<script type="text/javascript" src="js/byslidemenu.js"></script>
path file ผิดหรือเปล่าคะ
อันนี้คือ 2 ไฟล์นี้ อยู่ใน folder js อีกที ของคุณอยู่ตรงไหน ก็ระบุให้ถูกค่ะ
|
| |
|
|
| |
| Date :
2010-07-28 16:25:40 |
By :
ultrasiam |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
index.html แบบแรก
<!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>jqmenu1</title>
<script type="text/javascript" src="js/mootools-core.js"></script>
<script type="text/javascript" src="js/byslidemenu.js"></script>
</head>
<body>
<ul id="byslidemenu">
<img src="image/creditcards.jpg" />
<img src="image/games.jpg" />
<img src="image/computer.jpg" />
<img src="image/eiffeltower.jpg" />
<img src="image/electronic.jpg" />
</ul>
<script>
window.addEvent('load', function(){ var slideMenu = new BySlideMenu();});
</script>
</body>
</html>
index.html แบบที่ 12
<!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" />
<link rel="stylesheet" type="text/css" href="js/css.css" />
<title>jqmenu1</title>
<script type="text/javascript" src="js/mootools-core.js"></script>
<script type="text/javascript" src="js/byslidemenu.js"></script>
</head>
<body>
<ul id="fullwidthmenu">
<li class="bg1 icon1">Element 1</li>
<li class="bg2 icon2">Element 2</li>
<li class="bg1 icon3">Element 3</li>
<li class="bg2 icon4">Element 4</li>
<li class="bg1 icon5">Element 5</li>
<li class="bg2 icon6">Element 6</li>
<li class="bg1 icon7">Element 7</li>
<li class="bg2 icon8">Element 8</li>
<li class="bg1 icon9">Element 9</li>
</ul>
<script>
window.addEvent('load', function(){ var fullwidthmenu = new BySlideMenu('fullwidthmenu', {defaultIndex: 1,containerHeight: 30,containerWidth: "full"});});
</script>
</body>
</html>
สำคัญจะต้องมีไฟล์ทั้งสองอันนี้นะครับ
<script type="text/javascript" src="js/mootools-core.js"></script>
<script type="text/javascript" src="js/byslidemenu.js"></script>
|
ประวัติการแก้ไข
2010-07-28 17:42:38
| |
|
|
| |
| Date :
2010-07-28 17:42:04 |
By :
Dragons_first |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ทำได้แล้วคับ เป็นที่class,id นี่เอง พอผมลองcopyแบบที่ทุกคนให้มาได้เลยคับ แต่พอเปลี่ยนเป็นclassของผมเอง ไม่ได้ซะงั้น
ผมก็เลยเข้าไปดูไฟล์ byslidemenu.js เห็นมันกำกับclassไว้ด้วย ผมเลยลองเปลี่ยนเป็นclassของผมดู ได้เลยคับทีนี้
ขอบคุณทุกคนมากเลยคับที่ช่วยตอบ ช่วยสอน
ปล.ตอบช้าไปหน่อย พึ่งเลิกงานคับ อิอิ
|
| |
|
|
| |
| Date :
2010-07-29 00:01:42 |
By :
gravity99 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
