HTML フォーマットの json のサンプルコード

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
  <メタ文字セット="utf-8">
  <title>JS ビン</title>
  <link rel="スタイルシート" href="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript" src="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.js"></script>
  <script type="text/javascript">
var json = {"hey": "guy","anumber": 243,"anobject": {"whoa": "nuts","anarray": [1,2,"thr<h1>ee"],"anotherarray": [1, 2], "more":"stuff"},"awesome": true,"bogus": false,"meaning": null, "japanese":"明日がある。", "link": "http://jsonview.com", "notLink": "http://jsonview.com は素晴らしい"};
$(関数() {
  $('#json').JSONView(json);
  $('#collapse-btn').on('click', 関数() {
    $('#json').JSONView('折りたたみ');
  });
  $('#expand-btn').on('click', 関数() {
    $('#json').JSONView('展開');
  });
  $('#toggle-btn').on('クリック', 関数() {
    $('#json').JSONView('toggle');
  });
  $('#toggle-level1-btn').on('クリック', 関数() {
    $('#json').JSONView('toggle', 1);
  });
  $('#toggle-level2-btn').on('クリック', 関数() {
    $('#json').JSONView('toggle', 2);
  });
});
  </スクリプト>
</head>
<本文>
  <br/>
  <button id="collapse-btn">折りたたむ</button>
  <button id="expand-btn">展開</button>
  <button id="toggle-btn">切り替え</button>
  <button id="toggle-level1-btn">レベル1を切り替える</button>
  <button id="toggle-level2-btn">レベル2を切り替える</button> <div id="json"></div>
</本文>
</html>

デモに示されているように、フォーマットされたjsonが表示されます

上記はエディターが紹介した HTML 形式の JSON のサンプルコードです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: MySQL で GTID モードをオンラインで有効または無効にする

>>: CSS はモバイルデバイスで水平スクロールナビゲーションバーを実装します (PC デバイスにも適用可能)