Example code of html formatted json-H5 Tutorial-php.cn

Example code of html formatted json

零下一度

Release： 2017-05-25 11:41:55

Original

2587 people have browsed it

This article mainly introduces the example code of html formatted json. Friends who need it can refer to it

No more nonsense, I will post the code directly for everyone. The specific code is as follows:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" 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 is great"};
$(function() {
  $(&#39;#json&#39;).JSONView(json);
  $(&#39;#collapse-btn&#39;).on(&#39;click&#39;, function() {
    $(&#39;#json&#39;).JSONView(&#39;collapse&#39;);
  });
  $(&#39;#expand-btn&#39;).on(&#39;click&#39;, function() {
    $(&#39;#json&#39;).JSONView(&#39;expand&#39;);
  });
  $(&#39;#toggle-btn&#39;).on(&#39;click&#39;, function() {
    $(&#39;#json&#39;).JSONView(&#39;toggle&#39;);
  });
  $(&#39;#toggle-level1-btn&#39;).on(&#39;click&#39;, function() {
    $(&#39;#json&#39;).JSONView(&#39;toggle&#39;, 1);
  });
  $(&#39;#toggle-level2-btn&#39;).on(&#39;click&#39;, function() {
    $(&#39;#json&#39;).JSONView(&#39;toggle&#39;, 2);
  });
});
  </script>
</head>
<body>
  <br/>
  <button id="collapse-btn">Collapse</button>
  <button id="expand-btn">Expand</button>
  <button id="toggle-btn">Toggle</button>
  <button id="toggle-level1-btn">Toggle level1</button>
  <button id="toggle-level2-btn">Toggle level2</button>     <p id="json"></p>
</body>
</html>

Copy after login

As shown in the demo, display formatted json

[Related recommendations]

1. Free h5 online video tutorial

2. HTML5 full version manual

3. php.cn original html5 video tutorial

The above is the detailed content of Example code of html formatted json. For more information, please follow other related articles on the PHP Chinese website!