0

私は最近、現在フレームとフレームセットを使用している Web サイトの再構築を開始しました。

私は今、典型的なstructure.htmlを採用しました:

<body>
<div>
    <div id="headerNavigation"></div>
    <div id="PageContent"></div>
    <div id="footer"></div>
</div>
</body>
</html>

次の jQuery スクリプトを使用して、DIV を設定します。

<head>
<script>
$.get('PageHeader.html', processHeader, "html").fail(function() { alert("There is a problem loading the header. Please re-try"); });
function processHeader(file_data)
{
    $("#headerNavigation").html(file_data);
}

$.get('TermsConditions.html', processContent, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
function processContent(file_data)
{
    $("#PageContent").html(file_data);
}

$.get('Footer.html', processFooter, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
function processFooter(file_data)
{
    $("#Footer").html(file_data);
}
</script>
</head>

これは、コンテンツ ページを指定するとうまく機能しますが、ナビゲーション メニューの項目index.htmlをクリックしたときに、DIV に正しいコンテンツを転送/入力する何らかの jQuery 関数が必要です。

<html>
<head>
<!-- jQuery code for drop down nav menus  -->
<script type="text/javascript"> 
    $(document).ready(function(){        
        $('nav li ul').hide().removeClass('fallback');
        $('nav li').hover(
            function () {
                $('ul', this).stop().slideDown(300);
            },
            function () {
                $('ul', this).stop().slideUp(300);
            }
        );       
    });
</script>

</head>
<body>

<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
    <li class="data-sources"><a href="#" title="">Date Sources <span class="icon-caret-down"></span> </a>       
        <li>
            <a href="frameset.html?Information.html">Information</a>
            <ul class="fallback">
            <li><a href="frameset.html?ovens.html">Ovens</a></li>
                <li><a href="frameset.html?fridges.html">Fridges</a></li>
                <li><a href="frameset.html?tables.html">Tables</a></li>
                <li><a href="frameset.html?costing.html">Costing</a></li>
                <li><a href="frameset.html?install.html">Installation</a></li>
            </ul>
        </li>
        <li>
            <a href="frameset.html?legal.html">Legal Info</a>
            <ul class="fallback">
                <li><a href="frameset.html?terms.html">Terms & Conditions</a></li>
                <li><a href="frameset.html?data.html">Data Protection</a></li>                  
            </ul>
        </li>
        <li>
            <a href="frameset.html?contact/html">Contact Us</a>
            <ul class="fallback">
            <li><a href="javascript:openHelpWind('contact')">Contact Details</a></li>
                <li><a href="frameset.html?comments.html">Your Comments</a></li>
                <li><a href="frameset.html?addinfos.html">Additional Info</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Need Help?</a>
            <ul class="fallback">
            <li><a href="javascript:parent.PageHeader.openHelpWind(helpContext)">Need Help</a></li>
                <li><a href="externalsite">FAQs</a></li>
                <li><a href="externalsite">Ask our Experts</a></li>
            </ul>
        </li>
        <li>
            <a href="frameset.html?cookies.html">Cookies</a>
        </li>
    </li>
</ul>
</nav>
</body>
</html>

これを行う関数をどのように作成できるかについてのアイデアは大歓迎です。

ありがとう

更新 2013 年 6 月 21 日基本的なサイト スケルトン:

索引.html

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">

        <script src="javascript/modernizr-2.6.2.min.js"></script>

<title>Welcome</title>
<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">

<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>

<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript"> 
    $(document).ready(function(){        
        $('nav li ul').hide().removeClass('fallback');
        $('nav li').hover(
            function () {
                $('ul', this).stop().slideDown(300);
            },
            function () {
                $('ul', this).stop().slideUp(300);
            }
        );       
    });
</script>

    <script type="text/javascript">

    function gofor(a) {
    $.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
    }

    function processContent(file_data)
    {
        $("#PageContent").html(file_data);
    }

</script>

</head>
<body>

<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
    <li class="menu--home"><a href="index.html " title="home"><span class="icon-home"></span></a></li>      
        <li>
        <a href="frameset.html?Information.html">Information</a>
        <ul class="fallback">

            <li><a onclick="gofor('information.html')">Information (go for)</a></li>
    <li><a onclick="gofor('openaccount.html')"> New Customer (Go For)</a>

            <li><a onClick="gofor('information.html')">Information Go For onClick</a></li>
    <li><a href="javascript:gofor('information.html')">Information Go For HREF</a></li>


            <li><a href="frameset.html?ovens.html">Ovens</a></li>
            <li><a href="frameset.html?fridges.html">Fridges</a></li>
            <li><a href="frameset.html?tables.html">Tables</a></li>
            <li><a href="frameset.html?costing.html">Costing</a></li>
            <li><a href="frameset.html?install.html">Installation</a></li>
        </ul>
    </li>
    <li>
        <a href="frameset.html?legal.html">Legal Info</a>
        <ul class="fallback">
                     <li><a href="frameset.html?terms.html">Terms & Conditions</a></li>
                 <li><a href="frameset.html?data.html">Data Protection</a></li>                  
                       </ul>
        </li>
        <li>
            <a href="#">Contact Us</a>
            <ul class="fallback">
      <li><a href="javascript:openHelpWind('contact')">Contact Details</a></li>
                <li><a href="frameset.html?comments.html">Your Comments</a></li>
                <li><a href="frameset.html?addingds.html">Adding Directors Searches</a></li>
            </ul>
        </li>
    </li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->

<section>
<div class="page-heading">
    <h1 class="wrap">Welcome to Tables, Ladders and Chairs </h1>
</div>
<div>

Other welcome content

</div>
</section>
<footer class="site-footer" role="contentinfo">
<div class="wrap">
    <small>2013 TL&C’s. </small>
</div>
</footer>

Frameset.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="en">
<head>
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>

<script>
$.get('PageHeader.html', processHeader, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });

function processHeader (file_data)
{
    $("#header").html(file_data);
}
</script>

</head>
<body>
<div>
    <div id="header"></div>
    <div id="PageContent"></div>
    <div id="footer"></div>
</div>
</body>
</html>

</body>
</html>

PageHeader.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>

<title>Page Header</title>

<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">

<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>

<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript"> 
    $(document).ready(function() {       
        $('nav li ul').hide().removeClass('fallback');
        $('nav li').hover(
            function () {
                $('ul', this).stop().slideDown(300);
            },
            function () {
                $('ul', this).stop().slideUp(300);
        }
        );       
    });
</script>

    <script type="text/javascript">

    function gofor(a) {
    $.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
    }

    function processContent(file_data)
    {
        $("#PageContent").html(file_data);
    }

</script>


<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
    <li class="menu--home"><a href="index.html " title="home"><span class="icon-home"></span></a></li>      
        <li>
        <a href="frameset.html?Information.html">Information</a>
        <ul class="fallback">

  <li><a onclick="gofor('information.html')">Information (go for)</a></li>
         <li><a onclick="gofor('openaccount.html')"> New Customer (Go For)</a>

            <li><a href="frameset.html?ovens.html">Ovens</a></li>
            <li><a href="frameset.html?fridges.html">Fridges</a></li>
            <li><a href="frameset.html?tables.html">Tables</a></li>
            <li><a href="frameset.html?costing.html">Costing</a></li>
            <li><a href="frameset.html?install.html">Installation</a></li>
        </ul>
    </li>
    <li>
        <a href="frameset.html?legal.html">Legal Info</a>
        <ul class="fallback">
                     <li><a href="frameset.html?terms.html">Terms & Conditions</a></li>
                 <li><a href="frameset.html?data.html">Data Protection</a></li>                  
                       </ul>
        </li>
        <li>
            <a href="#">Contact Us</a>
            <ul class="fallback">
      <li><a href="javascript:openHelpWind('contact')">Contact Details</a></li>
                <li><a href="frameset.html?comments.html">Your Comments</a></li>
                <li><a href="frameset.html?addingds.html">Adding Directors Searches</a></li>
            </ul>
        </li>
    </li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->

Information.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">

<head>
<title>Information</title>

<link type="text/css" rel="stylesheet" href="css/style.css">
       <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

</head>

<body>
<form>

    Information about Tables Ladders and Chairs etc.

</form>
<br>
</body>
</html>

ありがとう

4

2 に答える 2