2

Javascript/CSS を使用して基本的な HTML ナビゲーションを作成しましたが、JSON 構造を使用して次のナビゲーションを作成する必要があります。

したがって、ナビゲーションは次のようになります。

ここに画像の説明を入力

JSON 構造は次のとおりです。

{
   "general":{
      "logo":"assets/images/logo.png",
      "name" : "Company Name"
   },
   "navigation":[
      {
         "title":"Home",
         "link":"index.html"
      },
      {
         "title":"Products",
         "link":"product.html",
         "subnav":[
            {
               "title":"Webapps",
               "link":"products/webapps.html"
            },
            {
               "title":"Mobile Apps",
               "link":"products/mobile-apps.html"
            }
         ]
      }
   ]
}

JSON 構造を使用して HTML を作成するにはどうすればよいですか。

ナビゲーションは、複数レベルのナビゲーション用のデータで構成されています。プレースホルダーはナビゲーションが表示される場所を定義するため、複数の場所に表示されることもあります。また、DOM は JS を使用して作成する必要があり、JS は目立たないようにする必要があります。

私を助けてください。私は実際のコードを見ていませんが、参照用の同様の例へのリンクは本当に役に立ちます...それを達成するための手順/ヒントが必要です。

ありがとうございました。

HTML の例:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=unicode">
<meta name="Generator" content="Microsoft Word 15 (filtered)">
<style>
<!--
 /* Font Definitions */
 @font-face
    {font-family:"Cambria Math";
    panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
    {font-family:"Segoe UI";
    panose-1:2 11 5 2 4 2 4 2 2 3;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman",serif;}
a:link, span.MsoHyperlink
    {color:blue;
    text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
    {color:purple;
    text-decoration:underline;}
p
    {margin:0in;
    margin-bottom:.0001pt;
    font-size:10.5pt;
    font-family:"Arial",sans-serif;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
    {margin-top:0in;
    margin-right:0in;
    margin-bottom:0in;
    margin-left:.5in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman",serif;}
p.msonormal0, li.msonormal0, div.msonormal0
    {mso-style-name:msonormal;
    margin:0in;
    margin-bottom:.0001pt;
    font-size:10.5pt;
    font-family:"Arial",sans-serif;}
p.msolistparagraphcxspfirst, li.msolistparagraphcxspfirst, div.msolistparagraphcxspfirst
    {mso-style-name:msolistparagraphcxspfirst;
    margin-top:0in;
    margin-right:0in;
    margin-bottom:0in;
    margin-left:.5in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman",serif;}
p.msolistparagraphcxspmiddle, li.msolistparagraphcxspmiddle, div.msolistparagraphcxspmiddle
    {mso-style-name:msolistparagraphcxspmiddle;
    margin-top:0in;
    margin-right:0in;
    margin-bottom:0in;
    margin-left:.5in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman",serif;}
p.msolistparagraphcxsplast, li.msolistparagraphcxsplast, div.msolistparagraphcxsplast
    {mso-style-name:msolistparagraphcxsplast;
    margin-top:0in;
    margin-right:0in;
    margin-bottom:0in;
    margin-left:.5in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman",serif;}
p.msochpdefault, li.msochpdefault, div.msochpdefault
    {mso-style-name:msochpdefault;
    margin:0in;
    margin-bottom:.0001pt;
    font-size:10.0pt;
    font-family:"Arial",sans-serif;}
.MsoChpDefault
    {font-size:10.0pt;}
@page WordSection1
    {size:8.5in 11.0in;
    margin:1.0in 1.0in 0in 1.0in;}
div.WordSection1
    {page:WordSection1;}
-->
</style>

</head>

<body lang="EN-US" link="blue" vlink="purple">

<div class="WordSection1" style="page: WordSection1;">

<div align="center">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;background:white;border-collapse:collapse">
 <tr>
  <td width="100%" valign="top" style="width:100.0%;padding:0in 0in 0in 0in">
  <div align="center">
  <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;border-collapse:collapse">
   <tr>
    <td width="100%" style="width:100.0%;padding:0in 0in 0in 0in">
    <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;border-collapse:collapse">
     <tr>
      <td style="background:#E7E6E6;padding:0in 0in 0in 0in">
      <div align="center">
      <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse">
       <tr>
        <td width="608" style="width:456.05pt;padding:.75pt .75pt .75pt .75pt">
        <div align="center">
        <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="606" style="width:454.55pt;border-collapse:collapse">
         <tr style="height:472.5pt">
          <td width="100%" style="width:100.0%;background:white;padding:0in 0in 0in 0in;
          height:472.5pt">
          <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="606" style="width:454.55pt;border-collapse:collapse">
           <tr style="display:none;height:91.8pt">
            <td width="606" style="width:454.55pt;padding:0in 0in 0in 0in;
            height:91.8pt">
            <p style="margin-top: 0in;margin-right: 12.45pt;margin-bottom: .0001pt;margin-left: 10.25pt;margin: 0in;font-size: 10.5pt;font-family: &quot;Arial&quot;,sans-serif;"><span style="font-size:
            10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838;display:
            none">Corporate Account Request<u7:p></u7:p></span><span style="display:none"><u8:p></u8:p><u9:p></u9:p><u10:p></u10:p><u11:p></u11:p><u12:p></u12:p><u13:p></u13:p><u14:p></u14:p><u15:p></u15:p><u16:p></u16:p></span></p>
            </td>
           </tr>
           <tr style="height:17.65pt">
            <td width="606" valign="top" style="width:454.55pt;background:#222B33;
            padding:25.5pt 0in 25.5pt 0in;height:17.65pt">
            <p class="MsoNormal" align="center" style="margin-top: 0in;margin-right: 16.95pt;margin-bottom: .0001pt;margin-left: 46.25pt;text-align: center;text-indent: -31.5pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><u7:p><span style="font-size:16.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;
            color:#E7E6E6"><img width="161" height="36" src="https://marketing-image-production.s3.amazonaws.com/uploads/9e9ac490a745058ed56bbe763644cd76fc608a7dc85d61c0d29a580e7bdd34588ed8b2aea42c524a856597cf5460a1c05dd3abf14743e75be743ef7dc8c4425e.png" alt="Bittrex Logo"></span></u7:p></p>
            </td>
           </tr>
          </table>
          <p class="MsoNormal" align="center" style="margin-top: 0in;margin-right: 16.95pt;margin-bottom: .0001pt;margin-left: 46.25pt;text-align: center;text-indent: -31.5pt;margin: 0in;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:16.0pt;
          font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838"><u7:p><u12:p>&nbsp;</u12:p></u7:p></span></p>
          <u15:p></u15:p>
          <p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center; margin-bottom: .0001pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:16.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;
          color:#3B3838"><u10:p></u10:p>Existing Bittrex Customer Fiat (USD)
          Trading</span></p>
          <u15:p></u15:p>
          <p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center; margin-bottom: .0001pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:16.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;
          color:#3B3838">Request Received<u10:p></u10:p></span><u17:p></u17:p></p>
          <p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center;margin: 0in;margin-bottom: .0001pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-family:&quot;Segoe UI&quot;,sans-serif">&nbsp;</span></p>
          <u15:p></u15:p>

          <!-- START SECTION 1 -->
          <p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;&nbsp;&nbsp;<b>Thank
          You For Your US Dollar Trading Request</b></span></p>
          <u15:p></u15:p>
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;</span></p>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  Bittrex support will respond to your request within 7 business days                   
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                USD trading is now available for both <b>personal and corporate accounts</b>
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  Only customers with operating location <b>outside the United States</b> or inside the United States in <b>CA, WA, NY, or MT</b> currently qualify for USD trading. We cannot approve accounts located in any other US state at this time but we will add more states soon.                    
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  You will receive email confirmation upon approval with more information. If you requested USD deposits and withdrawals in addition to USD trading, your confirmation email <b>will include wire transfer instructions</b>
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  If you are only adding a whitelisted bank account, you will receive confirmation when that bank account has been added to your account                    
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  Follow Bittrex on Twitter for new market announcements (crypto
          and USD) as well as new US states that qualify for fiat (US Dollar)
          trading: <a href="https://twitter.com/BittrexExchange">https://twitter.com/BittrexExchange</a>                
              </div>
          </div>
          <div style="clear: both"></div>

          <!-- END SECTION 1 -->

          <!-- START SECTION 2 -->
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;</span><u17:p></u17:p></p>
          <p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;&nbsp;&nbsp;<b>API Integration Updates</b></span></p>
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838"><u10:p>&nbsp;</u10:p></span><u17:p></u17:p></p>

          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  Please note that we have updated our API with the release of our new site                 
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  For those accessing Bittrex via API, visit </span><span
          style='color:blue'><a href="https://bittrex.github.io/">https://bittrex.github.io/</a></span><span
          style='color:#3B3838'> for recent updates regarding our Websocket.
          Please bookmark, as future API (REST and Websocket) documentation and
          best practices will be posted to that site. 
              </div>
          </div>
          <div style="clear: both"></div>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  If you are not already a member of our #api-developers Slack channel,
          please search for that channel in our Slack or email </span><span
          style='color:blue'><a href="mailto:corpcare@bittrex.com">corpcare@bittrex.com</a></span><span
          style='color:#3B3838'> to receive an invitation to the Bittrex Slack
          (if you are not already a member). Corporate accounts and high volume
          personal accounts can receive an invitation. Our developer community
          is growing as we actively improve the API experience.
              </div>
          </div>
          <div style="clear: both"></div>
          <!-- END SECTION 2 -->

          <!-- START SECTION 3 -->
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;</span><u17:p></u17:p></p>
          <p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;&nbsp;&nbsp;<b>Future Support Requests</b></span></p>
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838"><u10:p>&nbsp;</u10:p></span><u17:p></u17:p></p>
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  <b>Submit a support requests and view support articles and blog here:</b>
                  <a href="https://support.bittrex.com/"><u11:p></u11:p><u18:p></u18:p>https://support.bittrex.com/</a>               
              </div>
          </div>
          <div style="clear: both"></div>         
          <div>
              <div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
                <b>-</b>                        
              </div>
              <div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
                  <b>Sign in to support.bittrex.com and click on "my activities" to reference this ticket</b>
                  <a href="https://support.bittrex.com/hc/en-us/signin">https://support.bittrex.com/hc/en-us/signin</a>
              </div>
          </div>
          <div style="clear: both"></div>         
          <!-- END SECTION 3 -->

          <!-- START SECTION 4 -->
          <p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center;margin: 0in;margin-bottom: .0001pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-family:&quot;Segoe UI&quot;,sans-serif">&nbsp;</span></p>
          <u15:p></u15:p>
          <p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838">&nbsp;&nbsp;&nbsp;<b>Thank you and
          Happy Trading!</b></span></p>
          <p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
          10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif;color:#3B3838"><u10:p>&nbsp;</u10:p></span><u17:p></u17:p></p>
          <!-- END SECTION 4 -->

          </td>
         </tr>
        </table>
        </div>
        </td>
       </tr>
      </table>
      </div>
      </td>
     </tr>
    </table>
    </td>
   </tr>
  </table>
  </div>
  </td>
 </tr>
</table>

</div>

<p class="MsoNormal" style="margin: 0in;margin-bottom: .0001pt;font-size: 12.0pt;font-family: &quot;Times New Roman&quot;,serif;"><span style="font-size:10.0pt;font-family:&quot;Segoe UI&quot;,sans-serif"><u7:p>&nbsp;</u7:p></span><u12:p></u12:p><u14:p></u14:p><u15:p></u15:p><u16:p></u16:p></p>

<u13:p></u13:p></div>

<u10:p></u10:p>
</body>

</html>
4

2 に答える 2

3

何か新しいことを試すために、JavaScriptテンプレート言語であるHandlebars.jsを使用してそれを行う方法を次に示します。

<nav id="nav"></nav>

<script id="nav-template" type="text/x-handlebars-template">
    <ul class="nav">
        {{#each navigation}}
            <li><a href="{{ link }}">{{ title }}</a></li>

            {{#if subnav}}
                <ul class="subnav">
                    {{#each subnav}}
                       <li><a href="{{ link }}">{{ title }}</a></li>
                    {{/each}}
                </ul>
            {{/if}}
        {{/each}}
    </ul>
</script>

そしてあなたのJavaScript：

var template = Handlebars.compile($("#nav-template").html());

$('#nav').html(template(data));

デモ： http： //jsfiddle.net/L8wSB/

于 2013-01-28T06:58:05.550 に答える
0

次の URL を参照できますhttp://www.jqwidgets.com/building-menu-from-json/に役立ちます

于 2013-01-28T06:39:22.317 に答える