Group Blog
 
<<
ธันวาคม 2548
 123
45678910
11121314151617
18192021222324
25262728293031
 
3 ธันวาคม 2548
 
All Blogs
 
-`๏'- Friends' blogs & Links (Jump Menu)

Friends' blogs & Links (Jump Menu)
'Jump Menu' นี้ แตกต่างจาก 'Jump Menu' ที่ผ่านมา อยู่สามส่วนคือ

หนึ่ง ในด้านการแสดงผล จะเป็นการสร้าง Blog ใหม่ขึ้น เมื่อเลือกข้อมูล (Click)
สอง รูปลักษณะ จะมีปุ่มกด (button) เป็นส่วน input ข้อมูล
สาม โค้ดมีเพียงส่วนเดียว

ส่วนของโค้ดทั้งหมด สามารถเก็บไว้ที่ส่วนใดๆ ของพื้นที่ Blog ก็ได้ที่ต้องการ ตัวอย่างที่นำมาเสนอนี้ได้เก็บไว้ที่ส่วนของ Profile

• โค้ด •
<form name=aaaa>
<select name=bbbb style="FONT-SIZE: 8pt; font:Arial; BACKGROUND:#FEFF99; WIDTH:208; COLOR:#2F4F4F; border:0; AutoSize:false;">
<option>►►►►►► ไปให้ไกลๆ เลยไป ◄◄◄◄◄◄</option>
<option value="//www.yahoo.com/">Yahoo!</option>
<option value="//www.msn.com/">MSN</option>
<option value="//www.google.co.th/">Google</option>
<option value="//www.pantip.com/">Pantip</option>
</select>&nbsp;<input type=button onclick='if (document.aaaa.bbbb.value) { window. open(document.aaaa.bbbb.value); }' name=popitup value='Go!' style='FONT-SIZE: 8pt; BACKGROUND:#FEFF99;COLOR:#2F4F4F'>
</form>

***เรื่องสำคัญมาก ***ในการนำไปใช้งานให้ท่านขยับข้อความ window. open ให้ชิดกันก่อนนำไปใช้

รายละเอียดของโค้ด
• <form name=aaaa> กำหนดชื่อ form มีผลต่อการเรียกใช้คำสั่ง (ชื่อไม่ควรซ้ำกับส่วน select name)
• <select name=bbbb กำหนดชื่อ select มีผลต่อการเรียกใช้คำสั่ง (ชื่อไม่ควรซ้ำกับส่วน form name)
ขออธิบายความสัมพันธ์ของสองส่วนข้างต้นเสียก่อน ดูจากภาพ

จะเห็นว่าชื่อที่เรากำหนดลงไปมีผลต่อการเรียกใช้คำสั่ง ดังนั้นการตั้งชื่อตรงส่วนนี้ควรหลีกเลี่ยงการใช้อักขระพิเศษหรือรูปแบบที่ไม่ปกติทั่วไป (รวมทั้งไม่ควรมีช่องไฟในระหว่างอักษร)
• ส่วนของคุณลักษณะทั่วไป (style) 'Jump Menu' ไม่ได้แตกต่างแต่อย่างใดกับ 'Menu(มาน)กระโดด' ที่เคยนำเสนอไปก่อนหน้านี้ จึงขอละไว้ที่จะไม่อธิบายซ้ำ ถ้าท่านเพิ่งได้เข้ามาชมที่เนื้อหานี้เป็นครั้งแรกและมีความสงสัยใคร่รู้เกี่ยวกับวิธีกำหนดคุณลักษณะทั่วไป (style) ของ 'Jump Menu' รบกวนเชิญ ทางนี้ เลยจ้า
• <option>►►►►►► ไปให้ไกลๆ เลยไป ◄◄◄◄◄◄</option>
   <option value="//www.yahoo.com/">Yahoo!</option> ข้อมูลส่วนนี้มีลักษณะคล้ายกับ 'Menu(มาน)กระโดด' จึงขอละเว้นไว้ที่จะอธิบายเช่นเดียวกัน
• <input type=button onclick='if (document.aaaa.bbbb.value) { window(document.aaaa.bbbb.value); }' name=popitup value='Go!' style='FONT-SIZE: 8pt; BACKGROUND:#FEFF99;COLOR:#2F4F4F'> เป็นส่วน input ข้อมูล เราสามารถกำหนดคุณลักษณะ (style) ของปุ่มกด (button)ได้เช่นเดียวกัน

: รูปแบบการนำไปใช้ :


 
 ใส่ค่า border:1; ในส่วน style ของ select



 ใส่<p align=center>..ครอบส่วน input..</p>



 ใส่ค่า WIDTH:208; ลงในส่วน style ของ input


: การประยุกต์ใช้กับ Friends Link :
เราสามารถนำ 'Jump Menu' ไปใช้ทำMenu Friends Link แทนที่ของเดิมที่ทาง Bloggang มีให้ได้เช่นเดียวกันกับ Jump Menu ลักษณะเดียวกัน แต่สิ่งที่อยากฝากไว้เป็นข้อสังเกตุก็คือ วิธีการอ้างอิง Link ที่ถูกต้องมีดังนี้

<option value='

//www.bloggang.com/mainblog.php?id=saveme
//saveme.bloggang.com/

'>Dying To Be Alive</option>


mainblog ➠ อ้างอิง 'หน้าหลัก' ของเจ้าของบล๊อก
saveme ➠ อ้างอิง 'id' ของเจ้าของบล๊อกที่เราทำการแอดฯ

<option value='//www.bloggang.com/mainblog.php?id=petit-patty'>Petit Patty</option>
<option value='//www.bloggang.com/mainblog.php?id=happyday'>นู๋ส้มจุก</option>

สังเกตุจากตรงนี้ก็จะเห็นว่าตัวแปร Friends Link ก็คือชื่อ 'id' ของผู้ที่เราต้องการแอดฯ นั่นเอง
➠ ส่วนของ Log In คือชื่อที่ใช้ในการลงทะเบียน เช่น -`๏'- MeIKha เป็นต้น

หมายเหตุ.- ตัวอย่างที่แสดงข้างบนเป็นเพียงให้ดูรูปแบบเท่านั้น ไม่ได้เซตให้ใช้งานได้จริง หากต้องการทดสอบประสิทธิภาพที่แท้จริง ให้ทดสอบที่ Menu ด้านข้างขวา


Song : Dragostea Din Tei
[Eurobeat Remix]
Artist : O-Zone









Create Date : 03 ธันวาคม 2548
Last Update : 7 มกราคม 2549 21:16:31 น. 8 comments
Counter : 906 Pageviews.

 
เข้ามาBlog น้องไหมทีไร ไม่เคยผิดหวังเลยน๊ะ

เก่งจริง ๆ ต้องลองอ่าน และก็ตอ้งลองดู พี่ตุ๊กตา โหวตให้เลยจ๊า......


โดย: tukata001 วันที่: 4 ธันวาคม 2548 เวลา:9:54:53 น.  

 
หน้าแรกยังทำไม่เป็นเลยอะ กระโดดมาเรียนหน้านี้อก่องนะ


เจ้าไดโนซอ ถ้าทามไม่เป็นจาจับตัวเจ้าไปเป็นตัวประกัน



โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:11:55:56 น.  

 
อู๊ย มีชื่อเราด้วย
อู๊ย เขิลลลลลลลลลล


โดย: นู๋ส้มจุก วันที่: 7 ธันวาคม 2548 เวลา:14:46:37 น.  

 
ขอบคุณค๊าไหม มาก๊อปโค้ดไปใช้ค่ะ จุ๊บๆๆ


โดย: yadegari วันที่: 19 ธันวาคม 2548 เวลา:17:14:07 น.  

 
ทำแล้วคะไม กำลังจัดการเรื่อยๆๆค่ะ



ขอบคุณค๊า


โดย: yadegari วันที่: 20 ธันวาคม 2548 เวลา:2:20:32 น.  

 
ขอบคุณมากนะคะ


โดย: กระจ้อน วันที่: 26 พฤษภาคม 2549 เวลา:13:33:42 น.  

 
จะรบกวนหน่อยค่ะ
พอดีนำโค้ดนี้ไปใช้ค่ะ
แต่ใช้ไม่ได้อ่ะค่ะ
ไม่แน่ใจว่าผิดพลาดตรงไหน
ก๊อปโค้ดด้านบนไปค่ะ
ช่วยตอบด้วยนะคะ
ขอบคุณค่ะ


โดย: JJ&TheGang วันที่: 4 เมษายน 2552 เวลา:17:08:06 น.  

 
ขอบคุณครับ ได้อะไรเยอะจริงๆ

ถ้าไม่ได้คุณผมแย่แน่ๆๆ

ดูตัวอย่างได้นะครับ

thaibaki.blogspot


โดย: เจ๋งดีครับ IP: 117.47.32.55 วันที่: 25 ตุลาคม 2552 เวลา:0:42:02 น.  

ชื่อ :
Comment :
  *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 
รหัสส่งข้อความ
กรุณายืนยันรหัสส่งข้อความ

-`๏'- MeIKha
Location :


[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 2 คน [?]





ถ้ามีน้ำตา ให้อดทนและเสียใจกับสิ่งที่เกิดขึ้น
และก็ก้าวต่อไป มีเพียงคนเดียวที่จะอยู่กับเรา
ไปตลอดชีวิต ก็คือ ..'ตัวเราเอง'







 

 

  ไม่นาน ...
  นาทีนี้ก็จะผ่านไป

  ถึงวันพรุ่งนี้ …
  วันนี้ก็จะกลายเป็นวันวาน

  ปัจจุบันเคลื่อนตัว
  ไปเป็นอดีตอย่างรวดเร็วเสมอ
  ความโศกเศร้าก็เช่นกัน …

  มันเป็นเรื่องที่ผ่านมาชั่วครั้งชั่วคราว
  ไม่ได้พักพิงอยู่กับเราถาวร

  เมื่อพรุ่งนี้มาถึง
  ทุกชีวิตต้องลืมตาตื่น

  และดำเนินต่อไป ……ไม่ว่า
  จะเป็นคนที่กำลังเจ็บป่วย โศกเศร้า

  ไม่ว่าใครก็ตาม
  ไม่สามารถที่จะเรียกคืนอดีตได้

  และนี่ ...จึงเป็นเหตุผล
  ที่เราควรจะต้องทำปัจจุบันให้ดีที่สุด

  เพื่อที่จะได้ไม่ต้องคร่ำครวญถวิลหาอดีต
  ไม่ว่าเพื่อจะมาเปลี่ยนแปลง แก้ไข

  หรือเพราะว่า ...มีเพียงอดีตเท่านั้น
  ที่ยังพอจะพบคุณค่า

  ความหมายที่น่าภาคภูมิใจ …





Friends' blogs
[Add -`๏'- MeIKha's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.