การทำเมนู Tab (แบบที่ 2 ปรับขนาดอัตโนมัติ)

จากที่ได้เคยแนะนำ การสร้าง Tab Menu (แบบที่ 1 กำหนด กว้าง ยาว) ไปบ้างแล้ว เราก็จะเห็นว่าขนาดของ Tab ที่สร้างขึ้นนั้นมีขนาดตายตัวตามที่เรากำหนด แม้ว่าข้อมูลในแต่ละ tab จะมีขนาดต่างกัน   ดังนั้นจึงเป็นการดีกว่าถ้า Tab ที่เราสร้างขึ้นสามารถปรับขนาดได้อัตโนมัติตามขนาดของข้อมูลในแต่ละ Tab นั้นๆ

 Tab ที่ 1
Tab ที่ 2
2009-10-02_172125 2009-10-02_172057



วิธีสร้าง

ขั้นที่ 1 ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ
(ถ้าหากกลัวว่าจะเกิดความผิดพลาด ให้ back up Template ไว้ก่อนนะครับ)


ขั้นที่ 2 ค้นหา โค้ด </head> แล้วแทนที่ด้วยโค้ดด้านล่างนี้และทำการบันทึกแม่แบบ


<!--Icon Tab by Hackublog Start-->
<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>
<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>
<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>

<style type='text/css'>
.yui-content { padding:1em; /* pad content container */
}
.yui-navset .yui-content {
border:1px solid #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}
.yui-navset .yui-nav li a {
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}
/* top oriented */
.yui-navset-top .yui-nav { margin-bottom:-21px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px solid #ccc;
}
.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>
<!--Icon Tab Stop-->

</head>



ในขั้นที่ 2 เป็นการเรียก stylesheet และ java script (บรรทัดสีม่วง) ถ้าหากท่านใดมี server ของตนเอง ก็สามารถดาวน์โหลดไฟล์ทั้งหมดได้ที่
http://www.mediafire.com/?nn0gnojv1dd
และศึกษาวิธีฝากจาวาสคริปต์ได้จากบทความ วิธี Hack Googlecode เพื่อฝาก Java Script

ขั้นที่ 3 ไปที่องค์ประกอบหน้า >> เพิ่ม Gadget ชนิด HTML/Javascript วางโค้ดด้านลางนี้ลงไป (ปรับแก้ไขตามต้องการ) แล้วบันทึก เพียงเท่านี้เราก็มีเมนู tab ตามต้องการแล้วครับ

<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab1</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab2</em></a></li>
<li><a href="#tab3"><em>Tab3</em></a></li>
</ul><br/>
<div class="yui-content">

<div id="tab1">
<p>Tab One Content</p>
</div>

<div id="tab2">
<p>Tab Two Content</p>
</div>

<div id="tab3">
<p>Tab Three Content</p>
</div>

</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');


YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>


ส่วนล่างนี้สำหรับคนที่ต้องการปรับแต่ง :

โค้ดสีน้ำเงินคือชื่อของ Tab เปลี่ยนได้ตามใจ หรือจะแทนด้วยรูปภาพก็ได้  เช่น ถ้าต้องการเปลี่ยนข้อความ Tab1 เป็นรูปภาพ ให้แทนด้วยโค้ด

<img width="35" src="ใส่ URL ของภาพ" title="ใส่คำอธิบายไอคอน"/>

โค้ดสีแดง  class="selected" บอกเราว่า เมื่อเปิดหน้าบล็อกขึ้นมา Tab ที่แสดงให้เห็นคือ Tab2 ซึ่งถ้าต้องการให้แสดง Tab1 ก่อน แก้ไขได้ดังนี้


โค้ด(เก่า) แสดง Tab2 ก่อน
<li><a href="#tab1"><em>Tab1</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab2</em></a></li>
<li><a href="#tab3"><em>Tab3</em></a></li>


แทนด้วยโค้ด(ใหม่) แสดง Tab1 ก่อน
<li class="selected" ><a href="#tab1"><em>Tab1</em></a></li>
<li ><a href="#tab2"><em>Tab2</em></a></li>
<li><a href="#tab3"><em>Tab3</em></a></li>


โค้ดสีเขียว คือ รายละเอียดในแต่ละ Tab เราสามารถแทนที่ด้วยโค้ด หรือ ข้อความอื่นๆได้ตามใจ เช่น

โค้ดเดิม
<p>Tab One Content</p>

แทนด้วยโค้ด(ใหม่)
<div class="widget-content">
<ul style="height:150px;width:170px; overflow:auto; ">
<p><strong><span style="color: gray;">Trip and Trick for Blogger</span> </strong></p>
<li><a href="http://bloggerstop.net/" target="_blank">bloggerstop</a></li>
<li><a href=" http://www.bloggertricks.com " target="_blank">bloggertricks</a></li>
<li><a href=" http://trick-blog.blogspot.com/ " target="_blank">trick-blog</a></li>
<li><a href=" http://easyblogtrick.blogspot.com " target="_blank">easyblogtrick</a></li>
<li><a href=" http://www.themagictricksblog.com ">themagictricksblog</a></li>
<li><a href=" http://www.bloggerbuster.com " target="_blank">bloggerbuster</a></li>
<li><a href=" http://www.bloggingtips.com " target="_blank">bloggingtips</a></li>
<li><a href=" http://soswitcher.blogspot.com" target="_blank">soswitcher</a></li>
<li><a href=" http://www.blogcatalog.com/ " target="_blank">blogcatalog</a></li>
<li><a href=" http://www.bloggerplugins.org/ " target="_blank">bloggerplugins</a></li>
<li><a href="http://www.ipietoon.com " target="_blank">ipietoon</a></li>
<li><a href="http://tips-tricks-for-blogger.blogspot.com" target="_blank">tips-tricks-for-blogger</a></li>
</ul></div>


การเพิ่ม  Tab :  ถ้าเราต้องการเพิ่ม Tab เช่นเพิ่ม Tab 4 ก็ให้เพิ่มโค้ด<li><a href="#tab4"><em>Tab4</em></a></li>
และ
<div id="tab4">
<p>Tab Three Content</p>
</div>


เพิ่มลงไปในขั้นที่ 3 ครับ และในกรณีต้องการเพิ่มอีกหลาย Tab ก็ทำเช่นเดียวกับชั้นตอนนี้ครับ
ที่มา : bloggerbuster

ตอนนี้มีความคิดเห็น : 0 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel