無法在使用 GAS 的 HTML 對話框中使用 Jquery UI 效果
[英]Unable to use Jquery UI effects inside a HTML Dialog using GAS
問題描述
我需要 Google Apps Script 的 HTML 對話框中的滾動效果。
https://docs.google.com/spreadsheets/d/1IHf2SkmoEyxDAs86FIdHWKfQ19i19-jUDFDlbMKJE8A/copy是我試過的，代碼也放在代碼編輯器里。
當高亮按鈕被按下時，當 html 代碼被放置在 HTML 對話框中時，它的高亮顯示但不滾動。
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="//ssl.gstatic.com/docs/script/css/add-ons1.css"> <style> .sidebar{padding:0} .branding-below { bottom: 80px; top: 0; } </style> <body> <div class="sidebar branding-below" data-select2-id="58"> <div class="block"> <div id="main"> <button onclick="highlightSelect2('#sel3')" >Highlight sel3</button> <button onclick="highlightSelect2('#sel5')">Highlight sel5</button> <button onclick="highlightSelect2('#sel7')">Highlight sel7</button> <br/> <br/> <table border="0" id="fields" style="padding:5px;width:100%;table-layout:fixed;"> <tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel1"> <option>Example0 test</option> <option>Beta test</option> </select> <br/> <br/> <br/> <br/> <br/> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel2"> <option>Example1 test</option> <option>Beta test</option> </select> <br/> <br/> <br/> <br/> <br/> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel3"> <option>Example3 test</option> <option>Beta test</option> </select> <br/> <br/> <br/> <br/> <br/> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel4"> <option>Alpha test</option> <option>Beta test</option> </select> <br/> <br/> <br/> <br/> <br/> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel5"> <option>Alpha test</option> <option>Beta test</option> </select> <br/> <br/> <br/> <br/> <br/> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel6"> <option>Alpha test</option> <option>Beta test</option> </select> <br/> <br/> <br/> <br/> <br/> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel7"> <option>Alpha test</option> <option>Beta test</option> </select> </tr> </table> <br/> <br/> <br/> <br/> <br/> <button onclick="highlightSelect2('#sel3')" >Highlight sel3</button> <button onclick="highlightSelect2('#sel5')">Highlight sel5</button> <button onclick="highlightSelect2('#sel7')">Highlight sel7</button> </div> </div> </div> <div class="sidebar bottom"> <table width="100%" style="table-layout:fixed;"> <tbody> <tr> <td colspan="2" style="border-bottom:0px;" align="left"> <small align="center" id="status"></small>  </td> </tr> <tr> <td colspan="2" align="right"> <button id="reset">Reset</button> </td> </tr> </tbody> </table> </div> <script> function highlightSelect2(selector) { $(selector) .next(".select2-container") .find(".select2-selection") .effect("highlight", { color: "#f88" }, 10000); $('html, body').animate({ scrollTop: $(selector).offset().top }, 1000); } $(document).ready(function () { $('select').select2(); listen("select") }); function listen(selector) { $(selector).on('change', function() { alert("Cannot use this field as you have already used!"); highlightSelect2("#sel7") $(this).val(""); }); } </script> </body> </html>
1 個解決方案
解決方案1
2 已采納 2020-10-05 10:06:00
您可以在.sidebar上添加動畫
function highlightSelect2(selector) { $(selector) .next(".select2-container") .find(".select2-selection") .effect("highlight", { color: "#f88" }, 10000); $('.sidebar').animate({ scrollTop: $(selector).offset().top }, 1000); } $(document).ready(function() { $('select').select2(); listen("select") }); function listen(selector) { $(selector).on('change', function() { alert("Cannot use this field as you have already used!"); highlightSelect2("#sel7") $(this).val(""); }); }
.sidebar { padding: 0 } .branding-below { bottom: 80px; top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="//ssl.gstatic.com/docs/script/css/add-ons1.css"> <div class="sidebar branding-below" data-select2-id="58"> <div class="block"> <div id="main"> <button onclick="highlightSelect2('#sel3')">Highlight sel3</button> <button onclick="highlightSelect2('#sel5')">Highlight sel5</button> <button onclick="highlightSelect2('#sel7')">Highlight sel7</button> <br /> <br /> <table border="0" id="fields" style="padding:5px;width:100%;table-layout:fixed;"> <tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel1"> <option>Example0 test</option> <option>Beta test</option> </select> <br /> <br /> <br /> <br /> <br /> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel2"> <option>Example1 test</option> <option>Beta test</option> </select> <br /> <br /> <br /> <br /> <br /> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel3"> <option>Example3 test</option> <option>Beta test</option> </select> <br /> <br /> <br /> <br /> <br /> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel4"> <option>Alpha test</option> <option>Beta test</option> </select> <br /> <br /> <br /> <br /> <br /> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel5"> <option>Alpha test</option> <option>Beta test</option> </select> <br /> <br /> <br /> <br /> <br /> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel6"> <option>Alpha test</option> <option>Beta test</option> </select> <br /> <br /> <br /> <br /> <br /> </tr> <tr> <td class="gray" colspan="2"> <select class="field" style="width:50%" id="sel7"> <option>Alpha test</option> <option>Beta test</option> </select> </tr> </table> <br /> <br /> <br /> <br /> <br /> <button onclick="highlightSelect2('#sel3')">Highlight sel3</button> <button onclick="highlightSelect2('#sel5')">Highlight sel5</button> <button onclick="highlightSelect2('#sel7')">Highlight sel7</button> </div> </div> </div> <div class="sidebar bottom"> <table width="100%" style="table-layout:fixed;"> <tbody> <tr> <td colspan="2" style="border-bottom:0px;" align="left"> <small align="center" id="status"></small>  </td> </tr> <tr> <td colspan="2" align="right"> <button id="reset">Reset</button> </td> </tr> </tbody> </table> </div>
如何將HTML注入iframe，並在jquery-ui對話框中顯示
[英]How to inject html into iframe, and display inside jquery-ui dialog
如何使用JQuery UI在模式對話框內顯示javascript圖形？
[英]How to display a javascript graph inside a modal dialog using JQuery UI?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.