« »

Nghe tên có lẽ bạn sẽ nghĩ rằng đoạn mã JavaScript này cực kì phức tạp về chức năng lẫn mã nguồn? Nếu bạn đang nghĩ như thế thì có thể tác giả đã làm bạn thất vọng rất nhiều, bởi bản thân đoạn mã không có gì là phức tạp và chức năng cũng vậy (jsB@nk nghĩ vậy); vấn đề chỉ là tên do tác giả đặt nên phải tuân theo.

Hiệu ứng chỉ là hiển thị nội dung thông tin thêm dựa vào hành vi của người dùng với các sự kiện như rê con trỏ chuột và nhấn chuột để hiển thị khung chú thích ngay vị trí này. Bạn có thể xem hiệu ứng tương tự là Nội dung chồng lấn.

Nhãn: điều khiển, định hướng, phức tạp, chức năng, mã nguồn, hiển thị, nội dung, hành vi, sự kiện, khung chú thích,

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Miễn phí web hosting 1 năm đầu tại iPage

Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé! Thử iPage miễn phí cho năm đầu tiên NGAY

Mã nguồn
CSS
JavaScript
HTML
In

Copy All x2

<STYLE type=text/css>#menu_parent {
	BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 1px solid; PADDING-LEFT: 2px; FONT-WEIGHT: bold; PADDING-BOTTOM: 1px; BORDER-LEFT: black 1px solid; WIDTH: 100px; PADDING-TOP: 1px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #e6f3ff
}
#menu_child {
	BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; VISIBILITY: hidden; BORDER-LEFT: black 1px solid; WIDTH: 200px; BORDER-BOTTOM: black 0px solid; POSITION: absolute; BACKGROUND-COLOR: #e6f3ff
}
#menu_child A {
	PADDING-RIGHT: 2px; DISPLAY: block; PADDING-LEFT: 2px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; WIDTH: 98%; COLOR: navy; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid; TEXT-DECORATION: none
}
#menu_child A:hover {
	BACKGROUND-COLOR: lightyellow
}
#src_parent {
	BORDER-RIGHT: blue 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: blue 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; BORDER-LEFT: blue 1px solid; WIDTH: 120px; PADDING-TOP: 1px; BORDER-BOTTOM: blue 1px solid; BACKGROUND-COLOR: #eaddff
}
#src_child {
	BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: black 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: black 1px solid; POSITION: absolute; BACKGROUND-COLOR: #eaddff
}
</STYLE>

Copy All x2

<script type="text/javascript">
// <script>

// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
// This code featured on/availabe at Dynamic Drive code library: http://www.dynamicdrive.com
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Distribute this code, any part or any modified version of it.
//     Instead, you can link to the homepage of this code:
//     http://www.php-development.ru/javascripts/dropdown.php
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as a part of another product provided that
//     its main use is not creating javascript menus.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind, either
// expressed or implied, including, but not limited to, the implied warranties
// of merchantability and fitness for a particular purpose. You expressly
// acknowledge and agree that use of this code is at your own risk.

// If you find my script useful, you can support my site in the following ways:
// 1. Vote for the script at HotScripts.com (you can do it on my site)
// 2. Link to the homepage of this script or to the homepage of my site:
//    http://www.php-development.ru/javascripts/smart-forms.php
//    http://www.php-development.ru/
//    You will get 50% commission on all orders made by your referrals.
//    More information can be found here:
//    http://www.php-development.ru/affiliates.php


// ----- Popup Control ---------------------------------------------------------

function at_display(x)
{
  win = window.open();
  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}

// ----- Show Aux -----

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;
  }

  c.style.position   = "absolute";
  c.style.top        = top +'px';
  c.style.left       = left+'px';
  c.style.visibility = "visible";
}

// ----- Show -----

function at_show()
{
  p = document.getElementById(this["at_parent"]);
  c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);

  clearTimeout(c["at_timeout"]);
}

// ----- Hide -----

function at_hide()
{
  c = document.getElementById(this["at_child"]);

  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}

// ----- Click -----

function at_click()
{
  p = document.getElementById(this["at_parent"]);
  c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible") at_show_aux(p.id, c.id);
  else c.style.visibility = "hidden";

  return false;
}

// ----- Attach -----

// PARAMETERS:
// parent   - id of visible html element
// child    - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
//            "hover" = you should place the mouse over the parent to show
//                      the child
// position - "x" = the child is displayed to the right of the parent
//            "y" = the child is displayed below the parent
// cursor   - Omit to use default cursor or check any CSS manual for possible
//            values of this field

function at_attach(parent, child, showtype, position, cursor)
{
  p = document.getElementById(parent);
  c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}
</script>

Copy All x2

<div id="menu_parent">Main Menu</div>

<div id="menu_child">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>

<script type="text/javascript">
at_attach("menu_parent", "menu_child", "hover", "y", "pointer");
</script>
<br />
<div id="src_parent">Site Search</div>

<form id="src_child">
  <b>Enter search terms:</b>
  <br />
  <input type="text" name="terms" size="35" />
  <center>

    <input type="submit" value="Submit" />
  </center>
</form>

<script type="text/javascript">
at_attach("src_parent", "src_child", "click", "x", "pointer");
</script>
<br /><br /><br />
<div style="text-align: left; width: 70%;">
<P align=left><B>Parameters for main function:</B>
      <DIV align=left><PRE>at_attach(parent, child, showtype, position, cursor)</PRE></DIV>
      <UL>

        <LI>
        <P align=left>parent - id of visible html element </P>
        <LI>
        <P align=left>child - id of invisible html element that will be 
        dropdowned </P>
        <LI>
        <P align=left>showtype - "click" or "hover"- first value causes content 
        to be shown onClick, and the second, onMouseover. </P>
        <LI>

        <P align=left>position - "x" or "y"- first value causes content to drop 
        down and to the right, and the second, just down. </P>
        <LI>
        <P align=left>cursor: The CSS cursor to display for this control. <A 
        href="/javascript/snippet/types-of-cursor/detail/" 
        target=_blank>See here</A> for a list of valid CSS cursor values. 
        </P></LI></UL>
</div>

Lời bình (1)
Viết

bởi Google Adsense and SEO, 21/03/2010 11:03 PM
This is what I was search for Phản hồi

Nice Man.
This is what I was searching so far. I searched it in search engines and then come to you. thanks

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
~~Website của bạn~~

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

Lượt gửi (0)
Mới

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

Cool Domains for Sale!

CTRCoin.com CoinHolo.com CryptoKD.com system.money eChainBank.com CreditCard.rip ABP3.com Card.rip XMQV.com this.bid ZWVQ.com war.money ApexBTC.com pornID.net ChatTotal.com choose.works choose.exchange ChainTutor.com index.services YeuNu.com

Ngày cập nhật:
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:

13/04/2009
Ilya S. Lyubinskiy [more]
11,316
1
2
0
9.73 KBytes

JavaScript Bộ điều khiển định hướng - Ngôn ngữ: tiếng Việt

3.5/5 2 lượt đánh giá / 11,316 lượt xem / 1 lời bình 13/04/2009 Nghe tên có lẽ bạn sẽ nghĩ rằng đoạn mã JavaScript này cực kì phức tạp...JavaScript Bộ điều khiển định hướng - Bộ điều khiển định hướng - Ngôn ngữ: tiếng Việt

mynguyen203[2] xmen458 se7enmita1 chacha1980 tuaninfo3008 jimmy.mickey lovemetk vlngu