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

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 デバイスにも適用可能)

推薦する

jQueryは画像の強調表示を実現します

ページ上の画像を強調表示することは非常に一般的です。ここでは、jQuery を使用して画像を強調表示...

Linux で見つけるためのフレンドリーな代替手段 (fd コマンド)

fd コマンドは、Linux ファイル システムを検索するためのシンプルで簡単な方法を提供します。...

Nginx の http リソース リクエスト制限の詳細な説明 (3 つの方法)

前提条件: nginx には、ngx_http_limit_conn_module モジュールと n...

現在のMySQL接続数を表示する方法の詳細な説明

1. 現在のすべての接続の詳細情報を表示します。 ./mysqladmin -uadmin -p -...

JavaScript 改ざん防止オブジェクトの使用例

目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...

js に基づいて大きなファイルのアップロードとブレークポイントの再開を管理する方法

目次序文フロントエンド構造バックエンド構造（ノード+エクスプレス） FormDataに基づくファイル...

MySQLデータの挿入、更新、削除の詳細

目次1. 挿入2. 更新3. 削除1. 挿入 顧客に挿入( 顧客.顧客住所、 顧客.cust_cit...

Centos7 Zabbix3.4 メールアラーム設定（メール内容がxx.bin添付ファイルになる問題の解決）

目次1. 監視Linuxホストを追加する2. メールボックスを設定する1. 監視Linuxホストを追...

Linux での MySQL データベースのアンインストール

Linux で MySQL データベースをアンインストールするにはどうすればいいですか? 以下では、...

MySQLのCOUNT(*)のパフォーマンスについてお話しましょう

序文基本的に、職場のプログラマーは、count(*)、count(1)、または count(prim...

テーブル関連の配置とJavascript操作テーブル、tr、td

適切に機能するテーブル プロパティ設定:コードをコピーコードは次のとおりです。 <テーブル セ...

HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)

この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...

Tomcat を使用して IntelliJ IDEA によってデプロイされたプロジェクトの場所はどこですか?

IntelliJ IDEA が Tomcat を使用して Javaweb プロジェクトをデプロイし...

ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明

前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...

React コンポーネントのコンストラクタとスーパーの知識ポイントのまとめ

1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...