»
Tiếng AnhTiếng PhápTiếng Việt

In - Chú thích trượt kiểu bật/tắt - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Liên kết » Chú thích » Chú thích trượt kiểu bật/tắt
URL: http://www.javascriptbank.com/dropdown-description-toggle.html

Chú thích trượt kiểu bật/tắt © JavaScriptBank.comHiệu ứng sử dụng CSS để trang trí cho khung chú thíchJavaScript để thực hiện chức năng trượt kiểu bật/tắt cho các liên kết, người dùng nhấn liên kết lần đầu tiên để mở khung và nhấn cái thứ hai để đóng lại.

Phiên bản đầy đủ: jsB@nk » Liên kết » Chú thích » Chú thích trượt kiểu bật/tắt
URL: http://www.javascriptbank.com/dropdown-description-toggle.html



CSS
<style type="text/css">#dhtmlgoodies_contentBox {  border:1px solid #317082;  height:0px;  visibility:hidden;  position:absolute;  background-color:#E2EBED;  overflow:hidden;  padding:2px;  width:250px;}#dhtmlgoodies_content {  position:relative;    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;  width:100%;  font-size:0.8em;}#dhtmlgoodies_slidedown {  position:relative;  width:250px;}</style>


JavaScript
<script type="text/javascript" name="dropDown.js">// Created by: Alf Magne Kalleland :: http://www.dhtmlgoodies.com//************************************************************************************************************(C) www.dhtmlgoodies.com, September 2005Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission.Alf Magne Kalleland************************************************************************************************************/var initHeight = 0;var slidedown_direction = 1;var slidedownContentBox = false;var slidedownContent = false;var slidedownActive = false;var contentHeight = false;var slidedownSpeed = 3;  // Higher value = faster scriptvar slidedownTimer = 7; // Lower value = faster scriptfunction slidedown_showHide() {  if(initHeight==0)slidedown_direction=slidedownSpeed; else slidedown_direction = slidedownSpeed*-1;  if(!slidedownContentBox) {    slidedownContentBox = document.getElementById('dhtmlgoodies_contentBox');    slidedownContent = document.getElementById('dhtmlgoodies_content');    contentHeight = document.getElementById('dhtmlgoodies_content').offsetHeight;  }  slidedownContentBox.style.visibility='visible';  slidedownActive = true;  slidedown_showHide_start();}function slidedown_showHide_start() {  if(!slidedownActive)return;  initHeight = initHeight/1 + slidedown_direction;  if(initHeight <= 0) {    slidedownActive = false;     slidedownContentBox.style.visibility='hidden';    initHeight = 0;  }  if(initHeight>contentHeight) {    slidedownActive = false;   }  slidedownContentBox.style.height = initHeight + 'px';  slidedownContent.style.top = initHeight - contentHeight + 'px';  setTimeout('slidedown_showHide_start()',slidedownTimer); // Choose a lower value than 10 to make the script move faster}function setslidedownWidth(newWidth) {  document.getElementById('dhtmlgoodies_slidedown').style.width = newWidth + 'px';  document.getElementById('dhtmlgoodies_contentBox').style.width = newWidth + 'px';}function setSlideDownSpeed(newSpeed) {  slidedownSpeed = newSpeed;}</script>


HTML
<div id="dhtmlgoodies_slidedown"> <div id="dhtmlgoodies_control">    <a href="#" onclick="slidedown_showHide();return false;">Try it</a>  </div>  <div id="dhtmlgoodies_contentBox">  <div id="dhtmlgoodies_content"><!-- slide down content goes here -->Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.<br><br><!-- End slide down content -->  </div>  </div></div><script type="text/javascript">setSlideDownSpeed(4);</script>