กรุณาปิด AdBlock!

Cancel your adBlock please.

ขยายหน้าเว็บRegister Login
 โฆษณา
หน้า: [1]  ลงล่าง
  พิมพ์  
topic

ป๋าเหม่งช่วยผมหน่อยยยย  (อ่าน 9003 ครั้ง)

ไอที
« เมื่อ: 12, 06 2010, 09:26:41 PM »
จะถามเรื่องการเอา java มาใช้ร่วมกัน css ใน blog exteen หน่ะ

อยากจะลองทำแบบของคนนี้

warrantica.exteen.com

แต่ถามแล้วเค้าไม่บอก - - เค้าบอกว่ามันยุ่งยาก กลัวผมจะไม่เข้าใจ T^T

จะให้ช่วยดูตรงส่วน Chat Box , กับ กล่อง Banner ที่มันมี เลื่อนๆ

ป๋าช่วยผมได้มะ ?
WooDy~เกิดมา...?
เด็กไอทีคลับไฟแรง
*
พลังความคิด 29
กระทู้: 105
บันทึกการเข้า
ไอที
« ตอบ #1 เมื่อ: 12, 06 2010, 09:56:34 PM »
อธิบายคร่าวๆนะ ง่ายมั่กๆ

viewsource ดูเอาแล้วกันสำหรับรายละเอียด

chatbox ใช้ของ shoutmix ฟรี ไม่เสียตังส์ ไปสมัครเอา

กล่องที่ show/hide มี code แค่นี้
จากไฟล์นี้นะ ลองศึกษาเอา http://exteenplus.googlecode.com/files/chatbox1-7-3.js link
โค๊ด:
$(document).ready(function(){
var option = { path:'/', expires:100 };
var isOpen;
var chatAnimate = false;
if($.cookie('chatState') == 'close'){
$('.chatbox').hide();
$('.chat').css('height', '40px');
isOpen = false;
}else{
$('.chatbox').show();
$('.chat').css('height', '340px');
isOpen = true;
};
//end if
$('a.chatTab').click(function(){
if(isOpen == true){
chatAnimate = true;
$('.chatbox').fadeOut();
$('.chat').animate({
height: '40px'}, 500,
function(){
chatAnimate = false;
}
);
$.cookie('chatState', 'close', option);
isOpen = false;
return false;
}else{
chatAnimate = true;
$('.chatbox').fadeIn();
$.cookie('chatState', 'open', option);
$('.chat').animate({
height: '340px'}, 500,
function(){
chatAnimate = false;
}
);
isOpen = true;
return false;
};
});
$('.chat').detach().appendTo('#content');
$('#sidebar2').hover(function(){
if(chatAnimate == false){
$('.chat').stop().animate({opacity: 0.25}, 500);
}
},
function(){
if(chatAnimate == false){
$('.chat').stop().animate({opacity: 1}, 500);
}
});
});

ตรงนี้เป็น ChatTab

โค๊ด:
<div class="chat">
<h2><a href="#" class="chatTab">Chat box <span class="chattoggle">(click to show/hide)</span></a></h2>
<iframe title="warrantica" src="http://www5.shoutmix.com/?warrantica" width="280" height="300" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?warrantica">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
</div>

เวลาจะใช้งานในหน้าเว็บจริงๆ ใช้แบบนี้
โค๊ด:
<head>
<script type="text/javascript" src="http://exteenplus.googlecode.com/files/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://exteenplus.googlecode.com/files/chatbox1-7-3.js"></script>
</head>

<body> ....เนื้อหา...
และตามด้วย ChatTab
</body>

สงสัยตรงไหนระบุถามมาเป็นจุดๆเด้อ ขี้เกียจอธิบายหมด  aiwebs_028

ให้อีกหน่อยแล้วกัน
javascript ที่เขาใช้เป็น jQuery มันเป็น javascript framework ก็หมายถึง code สำเร็จรูป เพียงแต่เรามาเขียน function ให้มันทำงาน อย่างไร? เท่านั้นเอง

อย่างที่เขาเขียนมานะ ก็ค่อยข้างรัดกุมพอสมควร ใช้แบบ ไอ้ลิ้งย้อ ขยายหน้าต่างแบบใน dekitclub นี่แหละ ที่บันทึกค่า cookie ไว้ด้วย ว่าเขาย่อ หรือขยายหน้าต่าง เวลาเปิดเข้ามาอีกครั้ง จะได้ปรับขนาดหน้าต่างให้เหมาะกับที่ผู้ใช้ต้องการ เช่นเดียวกัน เขาก็บันทึกไว้ว่า show หรือ hide

และการซ่อนก็ตั้งดัก event onClick ไว้ ถ้ามีการคลิก มันก็จะทำตามคำสั่งต่อไป บลาๆๆๆ

ศึกษาเรื่อง attribute ของ jQuery ได้จ่าก www.jquery.com link เด้อ ว่าคำสั่ง, ฟังชั่น มันทำงานอะไร ยังไง

ไม่ยากๆ อ่านซักวันให้เข้าใจก่อน จะบอกต่อ เคปะ
เด็กไอทีคลับ
เด็กไอทีตัวพ่อ
เด็กไอทีคลับชั้นเซียน
*
พลังความคิด 89
กระทู้: 3,536
บันทึกการเข้า
ไอที
« ตอบ #2 เมื่อ: 12, 06 2010, 11:48:20 PM »
ตอนนี้ผมเอา shoutmix ลงมาขอบล่างได้แล้ว  ใส่โค้ด java ไปแล้ว

แต่พอกด มันก็ไม่ยอมเลื่อนหดลงไป = =

โค้ดที่ใส่ลงไปเหมือนที่ป๋าบอกหมดเลยนะ
WooDy~เกิดมา...?
เด็กไอทีคลับไฟแรง
*
พลังความคิด 29
กระทู้: 105
บันทึกการเข้า
ไอที
« ตอบ #3 เมื่อ: 13, 06 2010, 07:46:46 AM »
เชื่อว่าใส่เหมือน แต่เชื่อว่าใส่ไม่ถูก
เด็กไอทีคลับ
เด็กไอทีตัวพ่อ
เด็กไอทีคลับชั้นเซียน
*
พลังความคิด 89
กระทู้: 3,536
บันทึกการเข้า
ไอที
« ตอบ #4 เมื่อ: 13, 06 2010, 08:59:44 AM »
อะ ตัวอย่าง ตัดส่วนมาให้

http://www.dekitclub.com/chattab.php link

ตัด cookie ซึ่งเป็นต้วที่เช็กและกำหนดค่า isOpen ว่าจะให้เปิดหรือปิด จริงๆเขียนสั้นๆ ง่ายๆ กว่านี้ก็ได้นะ แต่เอาตัวอย่างแบบเขาแหละจะได้เข้าใจ (มั้ง)
ซึ่งมันยังมี function แจ่มๆ อาทิ toggle ซึ่งทำให้สไลด์ ขึ้น สไลด์ลง น่าจะใช้งานง่ายกว่า animation เพราะฟังชั่นตัวนี้เราต้องไปกำหนดค่าเพิ่ม ว่าให้มัน animate อะไร
เปลี่ยน css หรือไปเรียก function ไหนมาใช้เพิ่มบาง มันก็จะซับซ้อนมากขึ้น เพื่อการทำงานที่ตรงตามความต้องการมือขึ้น

อ้อ ครั้งแรกตั้งคลิก 2 ทีนะ คลิกทีแรกมันจะไม่หุบ เพราะว่ามันยังเช็กเงื่อนไขเป็น false อยู่จ๊ะ ถ้าคลิกอีกทีถึงจะเป็น true ลองไปปรับใช้เองเด้อ
เด็กไอทีคลับ
เด็กไอทีตัวพ่อ
เด็กไอทีคลับชั้นเซียน
*
พลังความคิด 89
กระทู้: 3,536
บันทึกการเข้า
ไอที
« ตอบ #5 เมื่อ: 13, 06 2010, 10:55:35 AM »
อ๊ากกกกกก รักป๋าที่สุด -3- ขอบคุณค๊าบบ

ได้ chattab.php มาช่วยนะเนี่ย

จ๊วบบบบบบ
WooDy~เกิดมา...?
เด็กไอทีคลับไฟแรง
*
พลังความคิด 29
กระทู้: 105
บันทึกการเข้า
ไอที
« ตอบ #6 เมื่อ: 13, 06 2010, 11:01:06 PM »
ป๋าเหม่ง ถ้าผมจะทำให้มันเปิดมาปุ้ป แล้วหดเหมือนของเขาต้องทำยังไงอะ - -'

ผมทำแล้วถ้าใส่โค้ดแบบย่อ ที่เป็น   .js นั่นแล้วมันไม่ทำงานอะ

นอกนั้นทำงานได้ปรกติละ
WooDy~เกิดมา...?
เด็กไอทีคลับไฟแรง
*
พลังความคิด 29
กระทู้: 105
บันทึกการเข้า
ไอที
« ตอบ #7 เมื่อ: 14, 06 2010, 07:18:56 PM »
อารายหดอ่ะ เหอะ ๆ
CoolPha
RUK-YOM
ปรมาจารย์ด้านไอที
*
พลังความคิด 76
กระทู้: 5,261
เว็บไซต์
บันทึกการเข้า

ไอที
« ตอบ #8 เมื่อ: 14, 06 2010, 07:55:36 PM »
คิดต่อเอง เหอะๆ ไม่บอก ทำมาให้ดูก่อนเด๊ะ
เด็กไอทีคลับ
เด็กไอทีตัวพ่อ
เด็กไอทีคลับชั้นเซียน
*
พลังความคิด 89
กระทู้: 3,536
บันทึกการเข้า
ไอที
« ตอบ #9 เมื่อ: 14, 06 2010, 11:07:30 PM »
โอเคคับป๋า -3-

ได้แล้ว

แต่ไม่รู้ทำไมยังใส่แบบย่อแล้วไม่ทำงานอยู่ดี

แต่ที่กด 2 ครั้งแก้ได้แล้วคือเพิ่มบรรทัดที่เป็น  cookie กับ jquery.cookie  เข้าไป

อ๊ากกกกกกกกกกกกกกกกก  หลังจากนั่งบื้อมา 2 วัน -.- กลับมาอ่านตรงที่ป๋าเขียนว่าตัด cookie

ตอนนี้โค้ดตามนี้ทำงานสมบูรณ์แบบแล้ว
โค๊ด:
<script type="text/javascript" src="http://forum.dekitclub.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://exteenplus.googlecode.com/files/jquery.cookie.js"></script>

<script type="text/javascript">
$(document).ready(function(){
var option = { path:'/', expires:100 };
var isOpen;
var chatAnimate = false;
if($.cookie('chatState') == 'close'){
$('.chatbox').hide();
$('.chat').css('height', '40px');
isOpen = false;
}else{
$('.chatbox').show();
$('.chat').css('height', '340px');
isOpen = true;
};
//end if
$('#chatTab').click(function(){
if(isOpen == true){
chatAnimate = true;
$('.chatbox').fadeOut();
$('.chat').animate({
height: '40px'}, 500,
function(){
chatAnimate = false;
}
);
                $.cookie('chatState', 'close', option);
isOpen = false;
return false;
}else{
chatAnimate = true;
$('.chatbox').fadeIn();
$('.chat').animate({
height: '340px'}, 500,
function(){
chatAnimate = false;
}
);
isOpen = true;
return false;
};
});

});
</script>

<div class="chat">
  <h2 id="chatTab">Talk2Me (Show/Hide)</h2>
<!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="mlismz" src="http://www5.shoutmix.com/?mlismz" width="280" height="300" frameborder="0" scrolling="auto"><a href="http://www5.shoutmix.com/?mlismz">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /><!-- End ShoutMix -->
</div>


แต่แบบที่เป็น

<script type="text/javascript" src="...........chat7-1.... "></script>  แบบนี้มันไม่ทำงาน

 หรือว่าผมต้องไปตัดส่วนเกินใน chatbox1-7-3.js ให้เหมือนที่ผมตัดไปรึเปล่า

เพราะส่วนที่เกินมามันเกี่ยวกับ hover คือถ้าเราเอาเมาส์ชี้ที่ sidebar ..chatbox จะจางไป .....

มันเกี่ยวมั้ยป๋า ?
WooDy~เกิดมา...?
เด็กไอทีคลับไฟแรง
*
พลังความคิด 29
กระทู้: 105
บันทึกการเข้า
ไอที
« ตอบ #10 เมื่อ: 17, 06 2010, 09:30:19 AM »
ในส่วนที่เป็นแบบนี้อะนะ
<script type="text/javascript" src="...........chat7-1.... "></script>

ส่วนใหญ่มันจะไม่มี บรรทัดแบบนี้

$(document).ready(function(){

เพราะ jQuery มันจะทำงานโดยการดักจับ event ต่างๆที่เกิดขึ้น ส่วนมากจะเขียนไว้ในหน้าที่มีการสั่งให้ทำงานน่ะ

บางทีไปเรียกเข้ามา มันก็เพี้ยนๆ อยู่บ้าง

ส่วนที่ hover แล้วจางๆ นั่นคงไม่จำเป็นหรอก
เด็กไอทีคลับ
เด็กไอทีตัวพ่อ
เด็กไอทีคลับชั้นเซียน
*
พลังความคิด 89
กระทู้: 3,536
บันทึกการเข้า
ไอที
« ตอบ #11 เมื่อ: 20, 06 2010, 11:30:47 AM »
ขอบคุณค่ะแอดมิน

ดีใจ ที่เพื่อน ๆ ชอบ เด็กไอทีนะค่ะ

We Love King , We Love Dekitclub

CoolPha
RUK-YOM
ปรมาจารย์ด้านไอที
*
พลังความคิด 76
กระทู้: 5,261
เว็บไซต์
บันทึกการเข้า

หน้า: [1]  ขึ้นบน
  พิมพ์  
 
กระโดดไป: