JavaScript-Tool-lhgDialog：框架示例

阿新 • • 發佈：2020-07-16

ylbtech-JavaScript-Tool-lhgDialog：框架示例

1、 2、

1、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" 
 content="text/html; charset=utf-8"/>
    <title>框架示例 - lhgDialog視窗元件 lhgdialog彈出視窗</title>
    <meta name="keywords" content="lhgdialog,dialog,彈出視窗,js視窗,js彈出視窗,js庫,對話方塊,alert,提示,警告,確認,提問,ajax,tip,confirm,open,prompt,lhgcore,javascript,jquery,window,clientside,control,open source,LGPL,dhtml,html,xhtml,plugins" 
/>
    <meta name="description" content="lhgdialog是一功能強大的簡單迷你並且高效的彈出視窗外掛,基於網路訪問並且相容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+."/>
    <link href="/css/common.css" type="text/css" rel="stylesheet"/>
    <link href="/css/prettify.css" type="text/css" rel="stylesheet"/>
    <script  
type="text/javascript" src="/js/prettify.js"></script>
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
</head>

<body style="background-color:#fff;">
    <div class="container" style="background-color:#eee;">
        <div class="header">
            <div class="hd_logo"><a href="/index.html">lhgDialog彈窗提示視窗元件</a></div>
            <div class="hd_nav">
                <a href="/index.html">首頁</a> | <a href="/api/">API文件</a> | <a href="/demo/">基礎示例</a> | <a href="/value/">傳值示例</a> | <a href="/animate/">動畫示例</a> | 框架示例
            </div>
        </div>
        <div class="line">&nbsp;</div>
        <p>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle"
             style="display:inline-block;width:728px;height:90px"
             data-ad-client="ca-pub-9761122628191004"
             data-ad-slot="2248956816"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script></p>
        <div class="cbody" style="height:400px;">
            <iframe frameborder="1" style="width:100%;height:100%;" src="content/frm_demo.html"></iframe>
        </div>
        <div style="padding:5px 20px;font-weight:bold;color:#f00;">相關視窗呼叫程式碼請開啟原始檔自行檢視</div>
        <div class="line">&nbsp;</div>
        <div class="footer">
            <div class="ft_copy">Copyright © 2013-2020 <a href="http://www.lhgdialog.com/" target="_blank">www.lhgdialog.com</a>. All rights reserved. <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5759176'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s17.cnzz.com/stat.php%3Fid%3D5759176%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script></div>
        </div><script type="text/javascript" src="//js.users.51.la/20198835.js"></script>
    </div>
</body>
</html>

2、

3. 原始碼返回頂部

1、http://www.lhgdialog.com/frameset/content/frm_demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>lhgdialog - frameset</title>
</head>

<frameset rows="80,*" cols="*" frameborder="yes" border="1" framespacing="0">
    <frame src="topFrame.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
    <frameset cols="120,*" frameborder="yes" border="1" framespacing="0">
        <frame src="leftFrame.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
        <frame src="mainFrame.html" name="mainFrame" scrolling="No" noresize="noresize" id="mainFrame" title="mainFrame" />
    </frameset>
</frameset>
<noframes><body></body></noframes>
</html>

2、 2.1、http://www.lhgdialog.com/frameset/content/topFrame.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>lhgdialog - topFrame</title>
    <link href="/css/common.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/lhgdialog.min.js"></script>
    <script type="text/javascript">
function opdg()
{
    $.dialog({ content:'我彈出在框架的最頂層頁面' });
}
    </script>
</head>

<body style="background:#66cdaa;">
    <div style="margin:0 10px;">
        <h3>這是框架頁面中的topFrame頁面</h3>
        <p style="width:110px;margin:5px 0;border:1px solid #666;background:#f3f3f3;text-align:center;padding:5px 2px;cursor:pointer;" onclick="opdg();">在最頂層頁面彈出»</p>
    </div>
</body>
</html>

2.2、http://www.lhgdialog.com/frameset/content/leftFrame.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>lhgdialog - leftFrame</title>
    <link href="/css/common.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/lhgdialog.min.js"></script>
    <script type="text/javascript">
function opdg()
{
    window.parent.frames['mainFrame'].$.dialog({ content:'我是leftFrame頁面按鈕彈出的視窗。' });
}
    </script>
</head>

<body style="background:#66cdaa;">
    <div style="margin:0 10px;">
        <h3>這是框架頁面中的leftFrame頁面</h3>
        <p style="margin:5px 0;border:1px solid #666;background:#f3f3f3;text-align:center;padding:5px 2px;cursor:pointer;" onclick="opdg();">在主框架彈出»</p>
    </div>
</body>
</html>

2.3、http://www.lhgdialog.com/frameset/content/mainFrame.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>lhgdialog - mainFrame</title>
    <link href="/css/common.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/lhgdialog.min.js"></script>
    <script type="text/javascript">
function opdg()
{
    $.dialog({ content:'我彈出在載入元件本身(mainFrame)的頁面，沒跨框架。' });
}
    </script>
</head>

<body style="background:#66cdaa;_height:100%;">
    <div style="margin:0 10px;">
        <h3>這是框架頁面中的mainFrame頁面</h3>
        <p style="width:100px;margin:5px 0;border:1px solid #666;background:#f3f3f3;text-align:center;padding:5px 2px;cursor:pointer;" onclick="opdg();">在本身頁面彈出»</p>
    </div>
</body>
</html>

3、

4.返回頂部

5.返回頂部

1、 http://www.lhgdialog.com/frameset/ 2、

6.返回頂部

作者：ylbtech
出處：http://ylbtech.cnblogs.com/
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。

JavaScript-Tool-lhgDialog：框架示例

ylbtech-JavaScript-Tool-lhgDialog：框架示例 1.返回頂部 1、 2、 2. 原始碼返回頂部 1、 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR

JavaScript-Tool-lhgDialog：基礎示例

ylbtech-JavaScript-Tool-lhgDialog：基礎示例 1.返回頂部 1、面板切換演示執行» 配置引數演示

JavaScript-Tool-lhgDialog：動畫示例

ylbtech-JavaScript-Tool-lhgDialog：動畫示例 1.返回頂部 1、 ajax擴充套件示例注：本頁面中的示例使有的動畫和ajax部分方法都使用jQuery庫中相關的方法，所以使用本頁面中的示例必須載入jQuery庫，

JavaScript-Tool-lhgDialog：基礎示例-原始碼

ylbtech-JavaScript-Tool-lhgDialog：基礎示例-原始碼 1.返回頂部 1、 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

JavaScript-Tool-lhgDialog：傳值示例

ylbtech-JavaScript-Tool-lhgDialog：傳值示例 1.返回頂部 1、基本的傳值示例(如您有不明白的地方可開啟相應的示例文檢視裡面的相關程式碼)

JavaScript-Tool-lhgDialog：傳值示例-原始碼

ylbtech-JavaScript-Tool-lhgDialog：傳值示例-原始碼 1.返回頂部 1、 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio