Question

我对jquery和jquery mobile完全不熟悉。如果以下问题使您感到尴尬，我为此感到遗憾。

最近，我尝试通过使用json和jquery来学习如何编写页面以从谷歌表中获取数据。经过一番努力，我成功地获得了预期的结果。

在此之后，我想进一步，并尝试使其在移动设备上工作。我知道jquery mobile是可以在移动设备上运行的界面，但我在学习jquery mobile时完全迷失了。因此，我想向你们寻求帮助。谢谢！

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">




  <style>
  table,
    th,
    td {
      margin: 10px 0;
      border: solid 1px #333;
      padding: 2px 4px;
      font: 15px Verdana;
    }
    
    th {
      font-weight: bold;
    }
    
    //#loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-bottom: 16px solid blue;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    visibility:hidden;
  }
  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
    
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    
    100% {
      transform: rotate(360deg);
    }
  }
  </style>
  <!--script src="cordova.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>


  <form>
    Select Predrill Hole Number:
    <select id="HoleList" onchange="Predrill()">
            <option>Pose 1</option>
            <option>Pose 2</option>
        </select>

    <name="name" id="name">


  </form>
  <br>

  <input type="button" onclick="update_value()" value="Update" />
  <input type="button" onclick="read_value()" value="Read" />

  <div id="showData"></div>
  </div>
  <a href="" id="photo1"><img id="pic" src="" alt="">
    <a>


      <script>
        var script_url = "https://script.google.com/macros/s/AKfycbzHtuKZACiuwQmCc8PqrRAK-nWm61ZtaZpy1Rr7c1Bub1GeThA/exec";

        // Make an AJAX call to Google Script

        function update_value() {
          $("#re").css("visibility", "hidden");
          document.getElementById("loader").style.visibility = "visible";

          var id1 = $("#id").val();
          var name = $("#name").val();

          var url = script_url + "?callback=ctrlq&name=" + name + "&id=" + id1 + "&action=update";

          var request = jQuery.ajax({
            crossDomain: true,
            url: url,
            method: "GET",
            dataType: "jsonp"
          });
        }

        // print the returned data
        function ctrlq(e) {
          $("#re").html(e.result);
          $("#re").css("visibility", "visible");
          read_value();
        }

        function read_value() {
          $("#re").css("visibility", "hidden");
          document.getElementById("loader").style.visibility = "visible";
          var url = script_url + "?action=read";

          $.getJSON(url, function(json) {
            // Set the variables from the results array

            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");

            var header = table.createTHead();
            var row = header.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "<b>ID</b>";
            cell2.innerHTML = "<b>Name</b>";

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < json.records.length; i++) {

              tr = table.insertRow(-1);
              var tabCell = tr.insertCell(-1);
              tabCell.innerHTML = json.records[i].Heading;
              tabCell = tr.insertCell(-1);
              tabCell.innerHTML = json.records[i].Information;
            }
            var myObj = json.records[0];
            document.getElementById("photo1").href = myObj.Photo1;
            document.getElementById("pic").src = myObj.Photo1;


            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("showData");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
            document.getElementById("loader").style.visibility = "hidden";
            $("#re").css("visibility", "visible");
          });
        }


        function Predrill() {
          var HoleList = document.getElementById("HoleList");
          document.getElementById("name").value = HoleList.options[HoleList.selectedIndex].text;
        }
      </script>
</head>

<body>
  <div id="loader"></div>

  <p id="re"></p>
</body>

<div align="center">
  <p> | All Rights Reserved</p>
</div>

＆＃13;

Answer 1

首先，我对jQuery mobile并不熟悉，但我可以告诉你HTML文档的基础知识，也许你可以从那里开始：

您的HTML文档应如下所示：

<html>
<head>
   <<meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>


</head>
<body>

//Here will your html code be

</body>
</html>

将所有链接放在head-tag中包含jquery CDN链接的样式表和脚本标签中。

我的建议是将css文件和javascript文件分开，而不是1个文档中的所有内容，因为它实际上是非结构化的，并且是压倒性的。从一开始就保持你的代码干净，这样你以后就不必再清理它了，而且它会变得更容易。

希望它有所帮助！拉蒙

PS：没有不好的问题，每个人都在某个地方开始，当我开始时我问自己同样的事情，所以只要继续谷歌搜索哈哈！祝你好运！

html可以在PC上运行但不能在移动设备上运行

1 个答案: