Trang Chính
1
Hướng dẫn sử dụng js ShowHideLayer mặc định của Forumotion 20/4/2012, 10:03 pm
Founder
Admin
Bài viết : 416
Points : 906
Thanked : 8
Join date : 07/10/2010Age : 34
Đến từ : Việt Nam
Lúc xem mã nguồn 4r mình tìm thấy đoạn javascript ShowHideLayer trong forumotion, nó có tác dụng tương tự hàm toggle trong jQuery, tức là nếu đối tượng đang ẩn thì đoạn javascript này sẽ làm nó hiện và ngược lại.
ShowHideLayer là một javascript plugin, hoạt động khi có một sự kiện. Các bạn có thể xem danh sách các sự kiện ở đây: http://www.w3schools.com/jsref/dom_obj_event.asp vì nó cũng hoạt động với jQuery nên bạn có thể dùng với sự kiện trong jQuery http://api.jquery.com/category/events/
ShowHideLayer có thể nhận giá trị bằng ID với 1 hoặc 2 đối tượng .
Dùng với 1 đối tượng:
Lưu ý: ShowHideLayer chỉ làm hiện đối tượng đang ẩn với thuộc tính style="display:none" của phần tử chứ không hoạt động với CSS {display:none}
Chỉ nhận giá trị là ID của đối tượng.
Chỉ hoạt động trong forumotion, chính xác là khi có file {L_LANG}.js
Code ví dụ: http://www.fmvi.org/h54-demo-showhidelayer
Còn đây là cách mà Forumotion thường dùng: http://www.fmvi.org/h54-demo-showhidelayer
Cả hai vùng này đều dùng
Trong ví dụ trên vùng 1 đang ẩn, nên khi click vào sẽ hiện ra, còn vùng 2 thì ngược lại. Tiêu đề 2 vùng được đặt giống nhau nên tạo hiệu ứng ẩn hiện cho nội dung.
ShowHideLayer là một javascript plugin, hoạt động khi có một sự kiện. Các bạn có thể xem danh sách các sự kiện ở đây: http://www.w3schools.com/jsref/dom_obj_event.asp vì nó cũng hoạt động với jQuery nên bạn có thể dùng với sự kiện trong jQuery http://api.jquery.com/category/events/
ShowHideLayer có thể nhận giá trị bằng ID với 1 hoặc 2 đối tượng .
Dùng với 1 đối tượng:
- Code:
ShowHideLayer('ID đối tượng')
- Code:
ShowHideLayer('ID đối tượng 1','ID đối tượng 2')
Lưu ý: ShowHideLayer chỉ làm hiện đối tượng đang ẩn với thuộc tính style="display:none" của phần tử chứ không hoạt động với CSS {display:none}
Chỉ nhận giá trị là ID của đối tượng.
Chỉ hoạt động trong forumotion, chính xác là khi có file {L_LANG}.js
- Code:
<script src="http://illiweb.com/rs3/24/frm/lang/en.js" type="text/javascript"></script>
Code ví dụ: http://www.fmvi.org/h54-demo-showhidelayer
- Code:
<style>#fmvi {
background: none repeat scroll 0 0 green;
border: 10px solid cyan;
color: white;
display: block;
font-size: 20px;
line-height: 25px;
margin: 20px;
padding: 20px;
text-align: center;
}
#doituong {
background: none repeat scroll 0 0 yellow;
border: 10px solid red;
color: blue;
display: block;
font-size: 20px;
line-height: 25px;
margin: 20px;
padding: 20px;
text-align: center;
}
#doituong1 {
background: none repeat scroll 0 0 brown;
border: 10px solid black;
color: white;
display: block;
font-size: 20px;
margin: 20px;
padding: 20px;
text-align: center;
}
#doituong2 {
background: none repeat scroll 0 0 blue;
border: 10px solid black;
color: white;
display: block;
font-size: 20px;
margin: 20px;
padding: 20px;
text-align: center;
}
</style>
<script src="http://illiweb.com/rs3/24/frm/lang/en.js" type="text/javascript"></script>
<div id="fmvi" onmouseover="ShowHideLayer('doituong')" onmouseout="ShowHideLayer('doituong')">
onmouseover="ShowHideLayer('doituong')"
<br/>
onmouseout="ShowHideLayer('doituong')"
<br/>
<br/>
[ Rê chuột vào đây ]
</div>
<div onclick="ShowHideLayer('doituong1','doituong2')" id="doituong">
id="doituong"
<br/>
onclick="ShowHideLayer('doituong1','doituong2')"
<br/>
<br/>
[ Click chuột vào đây ]
</div>
<div style="display:none" id="doituong1">
id="doituong1"
</div>
<div id="doituong2">
id="doituong2"
</div>
Còn đây là cách mà Forumotion thường dùng: http://www.fmvi.org/h54-demo-showhidelayer
- Một vùng chỉ có tiêu đề không có nội dung và được ẩn đi
- Code:
<div class="main" id="id-doi-tuong-an" style="display:none">
<div class="main-head clearfix">
<p class="h2">Tiêu đề</p>
<p class="options"><a href="javascript:ShowHideLayer('id-doi-tuong-an','id-doi-tuong-hien');"><img src="http://www.pettracker.com/sites/all/themes/tagg/images/icon_expand.gif" alt="+" align="" border="0" /></a></p>
</div>
</div>
- Một vùng với tiêu đề và nội dung được hiển thị
- Code:
<div class="main" id="id-doi-tuong-hien" style="display:''">
<div class="main-head clearfix">
<p class="h2">Tiêu đề</p>
<p class="options"><a href="javascript:ShowHideLayer('id-doi-tuong-an','id-doi-tuong-hien');"><img src="http://www.pettracker.com/sites/all/themes/tagg/images/icon_collapse.gif" alt="-" align="" border="0" /></a></p>
</div>
<div class="main-content clearfix">
Nội dung đặt ở đây
</div>
</div>
Cả hai vùng này đều dùng
- Code:
<a href="javascript:ShowHideLayer('id-doi-tuong-an','id-doi-tuong-hien');">Click</a>
Trong ví dụ trên vùng 1 đang ẩn, nên khi click vào sẽ hiện ra, còn vùng 2 thì ngược lại. Tiêu đề 2 vùng được đặt giống nhau nên tạo hiệu ứng ẩn hiện cho nội dung.
Viết bởi baivong - www.FMvi.org
