个人中心
gpt4 book ai didi

javascript - 带有 Google Apps 脚本的 JQuery Mobile

转载 作者：数据小太阳 更新时间：2023-10-29 04:45:59 25 4
gpt4 key购买 nike

我使用 HTMLService 将 Google Apps 脚本部署为独立的网络应用程序，它提供了一个简单的前端来将预算数据输入到 Google 电子表格中。我将 JQuery Mobile 用于某些 javascript 并将其设计为适合移动设备的方式，因为我对该应用程序的主要用例是从我的手机输入购买内容。

我的问题是，在移动浏览器上，应用程序无法正常缩放。它是浏览器的宽度，但它就像被“缩小”了一样。所有控件在移动设备上基本上无法使用。

如果脚本嵌入到 Google 站点中，它可以适当缩放，但我宁愿能够直接查看网络应用程序，而不是将其嵌入到 Google 站点中。

编辑:我的代表现在可以发布照片了，所以它们在这里(代码下方)。

编辑:我的 HTML 的开头如下。我最初在这里有 javascript 和完整的 HTML，如果需要我可以添加片段，但我再次查看它并且认为它与问题无关它使问题变得困惑，所以我删除了它。

HTML:

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<?!= include('javascript'); ?>

<div data-role="page" data-theme="a" id="main">
        <div data-role="content">
            <form id="myForm">
...

代码.gs:

function doGet() {
    return HtmlService.createTemplateFromFile('index').evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle('Budget Entry');
}

Direct Access (left) and Embedded in Google Sites (right).

完整代码片段:

//<script>  
  function formSuccess() {
    var dateSelect =    document.getElementById("date");
    var dateSelected =  dateSelect.options[dateSelect.selectedIndex].text;
    var catSelect =     document.getElementById("category");
    var catSelected =   catSelect.options[catSelect.selectedIndex].text;
    var amountEntered = document.getElementById("amount").value;
    var noteEntered =   document.getElementById("note").value;

    var successMsg = 'Date: ' + dateSelected + 
                '<br>Category: ' + catSelected + 
                '<br>Amount: $' + amountEntered + 
                '<br>Note: ' + noteEntered;
                
    $('#dialogMain').html(successMsg);
    $.mobile.silentScroll(0);
    $.mobile.changePage( "#dialog", { role: "dialog" } );
    
    requestCategoryInfo(document.getElementById("status"));
    document.getElementById("amount").value = '';
    document.getElementById("note").value = '';    
  }
  
  function submitForm() {
    if (document.getElementById('amount').value.length == 0) {
      alert('Please enter an amount.');
      return;
    }
    $.mobile.loading( 'show' );
    $('#status').html('');
    google.script.run
          .withSuccessHandler(formSuccess)
          .processForm(document.getElementById('myForm'));
  }
  
  function loadUI() {
    $.mobile.loading( 'show' );
    loadDateSelect();
    google.script.run.withSuccessHandler(loadCategoryNamesAndValues).withFailureHandler(sendLog)
      .getCategoryNamesAndValues();
    $.mobile.loading( 'hide' );
  }
  
  function loadDateSelect(){
    var d = new Date();
    var month = d.getMonth()+1;
    var today = d.getDate();
    var daysInAMonth = [0,31,28,31,30,31,30,31,31,30,31,30,31];
    
    for (var n=1; n <= daysInAMonth[month]; n++) {
      var option = $("<option>").attr('value',n).text(month+"/"+n);
      $('#date').append(option);
    }
    $('#date').val(today);
    $('#date').selectmenu('refresh', true);
  }
  
  function loadCategoryNamesAndValues(catNamesAndValues){
    var namesAndValues = catNamesAndValues;
    var optionHTML = '';
    var currentGroup = '';
    var catName = '';
    var catID = '';
    
    for (var i=0; i<namesAndValues.length; i++) {
      catName = namesAndValues[i][0];
      catID = namesAndValues[i][1];
      
      if (catID.toString() == "Group"){ // Handle Group Name
        
        if (currentGroup.length > 0) { // close previous optgroup tag
           optionHTML += "</optGroup>";
        } 
        
        // Open optGroup
        currentGroup = catName;
        optionHTML += "<optGroup label='" + currentGroup + "'>";
        
      } else if (isNaN(parseInt(catID)) || parseInt(catID) == 0){ //Do Nothing
      
      } else { // Create Option HTML as: <option value=namesAndValues[i][1]>namesAndValues[i][0]</option>
      
        optionHTML += "<option value='" + catID + "'>" + catName + "</option>";
      }
    }
    
    // Close current OptGroup
    optionHTML += "</optGroup>"
    
    document.getElementById('category').innerHTML = optionHTML;
    $('#category').selectmenu('refresh', true);
  }
  
  function categoryChanged() {
    setStatus('');
    requestCategoryInfo(document.getElementById('status'));
  }
  
  function requestCategoryInfo(container) {
    $.mobile.loading( 'show' );
    google.script.run
          .withSuccessHandler(displayCategoryInfo)
          .withFailureHandler(sendLog)
          .withUserObject(container)
          .getCategoryInfo(document.getElementById('category').value);
  }
  
  function displayCategoryInfo(categoryInfo, container){
    var spentStr = 'Spent $' + categoryInfo.actual.toFixed(2) + ' of $' + categoryInfo.budgeted.toFixed(2);
    var remainingStr = 'Remaining: $' + categoryInfo.remaining.toFixed(2);
    
    var statusDiv = container;
    if (statusDiv.innerHTML.length > 0){ statusDiv.innerHTML += '<br>'};
    statusDiv.innerHTML += spentStr + '<br>' + remainingStr;
    
    if (String(categoryInfo.fundAmount).length > 0) {
      var fundAmountStr = '';
      
      if (categoryInfo.remaining < 0) {
        fundAmountStr = (categoryInfo.fundAmount + categoryInfo.remaining).toFixed(2);
      } else {
        fundAmountStr = categoryInfo.fundAmount.toFixed(2);
      }
      
      statusDiv.innerHTML += '<br>Fund: $' + fundAmountStr;      
    }
    $.mobile.loading( 'hide' );
  }
  
  function setStatus(html){
    document.getElementById('status').innerHTML = html;
  }
  
  function appendStatus(html){
    setStatus(document.getElementById('status').innerHTML + '<br>' + html);
  }
  
  function sendLog(){
    google.script.run.sendLog();
  }
//</script>
<!DOCTYPE html>

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<?!= include('javascript'); ?>

<div data-role="page" data-theme="a" id="main">
        <div data-role="content">
            <form id="myForm">
            
            <div>Date</div>
            <div><select name="date" id="date"></select></div>
            
            <div>Category</div>
            <div><select name=category id="category" onchange="categoryChanged()" required></select></div>
            
            <div>Amount</div>
            <div><input type="text" name="amount" id="amount" required></div>
            
            <div>Note</div>
            <div><input type="text" name="note" id="note"></div>
            
            <div><input type="button" id="submit" value="Submit" onclick="submitForm()"/></div>
            
            </form>
            
            <!--<a href="#dialog" data-role="button" data-rel="dialog" data-transition="pop">Dialog</a>-->
        </div><!-- /content -->
 
        <div data-role="footer">                
            <div id="status"></div>
        </div><!-- /footer -->
</div><!-- /page -->


<div data-role="page" id="dialog" data-close-btn="none">
  <div data-role="header">
    <h1 id="dialogHeading">Success!</h1>
  </div>

  <div data-role="main" class="ui-content" id="dialogMain">
    <p>Text goes here.</p>
  </div>
  <div class="ui-grid-b">
	<div class="ui-block-a"></div>
	<div class="ui-block-b"><a href="#main" data-role="button" data-icon="check">OK</a></div>
	<div class="ui-block-c"></div>
   </div><!-- /grid-a -->

  <!--><div data-role="footer"></div>-->
</div> 

<script type="text/javascript">
$(loadUI);
</script>

最佳答案 

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');

这会有所帮助

关于javascript - 带有 Google Apps 脚本的 JQuery Mobile，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29922088/

25 4 0
文章推荐： c# - 如何在 Visual Studio 中测试函数速度
文章推荐： c# - 是否可以在 C# 中扩展 'using' block ？
文章推荐： c# - 可以减少类型参数的数量吗？
文章推荐： c# - 测试 float 是否为整数
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com