ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript のドラッグ可能な iframe 効果コード_javascript スキル

JavaScript のドラッグ可能な iframe 効果コード_javascript スキル

WBOY
リリース: 2016-05-16 19:02:10
オリジナル
1868 人が閲覧しました

// HISTORY
// ------------------------------------------------------------------
// Jan 23, 2004: Fixed problems which caused the script not to work in
//               some framed situations. Improved browser support.
//               Added easier "addHandle" implentation.
// May 25, 2003: Added better event position detection, added caching
//               of IFRAME object references to avoid lookups. Added
//               'move' cursor to handles.
// May 24, 2003: Updated to fix bug with Netscape 7.x
// May 23, 2003: Created
/* 
DESCRIPTION: The purpose of this library is to allow IFRAME objects to be
dragged around the screen in the same way that popup windows or draggable
DIV tags are often used. Since IFRAME objects always cover form objects,
this makes an ideal solution for a simulated "popup window" on a page with
form objects.

COMPATABILITY: Tested successfully with IE 6.x, Netscape 6.2, 7.x, and
Mozilla 1.3. Since this script uses IFRAME objects and DHTML heavily, 
cross-browser compatability is a goal but there may be some quirks in 
various browser versions.

USAGE:
1) Include the source file in your main document which contains the IFRAME
   tags. Make sure each iframe has a unique "ID" attribute. For best browser
   compatability, also include a "NAME" attribute in the IFRAME tag that
   has the same value as the "ID" attribute.

2) In the document content of each IFRAME which will be draggable, , do two
    things:
    a) Include the dragiframe.js file in the source
    b) add this code to the 

 tag:
   onLoad="addHandle(document.getElementById('toolbar'), window);"
   Where 'toolbar' is the ID of an element on the page which should be the 'handle'
   by which the IFRAME should be dragged (like a toolbar at the top).
   If you want the IFRAME to be draggable by clicking anywhere in the IFRAME
   document, use:
   onLoad="addHandle(document.getElementsByTagName('body').item(0), window);"

   NOTE: The code will automatically look up the window.parent tree to find a
   parent document with draggable iframes enabled. It will attach itself to the
   first document it finds, allowing it to work within a framed environment.

In your parent document (containing the IFRAMEs), you may set a couple of options:

// Set to true to always bring the selected IFRAME to the "top" of the zIndex.
// Defaults to false
bringSelectedIframeToTop(true|false);

// Set to true to allow IFRAME objects to be dragged off the screen. This may
// make the handle be no longer reachable by the mouse, causing the IFRAME to
// 立ち往生。
//デフォルトは false
allowDragOffScreen(true|false);

//この変数を手動で設定して、
で使用される最高の zIndex を定義できます。//メインドキュメント。 これは、IFRAME
//選択され、「bringSelectedIframeToTop」が true に設定されている場合に、どの zIndex を指定するかを決定するために使用されます。
//デフォルトは 99 です。
DIF_highestZIndex=4;

注:
1) IFRAME の「ハンドル」
オブジェクトに対して onmousedown イベント ハンドラまたは onmouseup イベント ハンドラを定義している場合、それらは上書きされます。
2) で onmousemove ハンドラを定義している場合メイン ドキュメントまたは
IFRAME ドキュメントのいずれかが上書きされます。
3) すべての
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート