You are not connected. Please login or register

  1. ☆SimonFounder

    avatar
    Giới tính :
    Nam
    Số bài viết :
    205
    Tham gia :
    20/01/2012
    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:
    Code:
    ShowHideLayer('ID đối tượng')
    Dùng với 2 đố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/rsc/24/frm/lang/en.js" type="text/javascript"></script>
    ...trong đây có cả một kho javascript plugin đấy >"<

    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/rsc/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>
    ...để ẩn/hiện.
    Trong ví dụ trên vùng 1 đang ẩn, nên khi chóng mặt 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

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Create a blog
© 2012 Zone-A7
FM PunBB - Rip by Simon