容器绑定Google Apps脚本中的jQuery？

P. Myer Nore 发表于 Dev

迈尔·诺尔（P. Myer Nore）

当前是否可以在绑定有Google Apps脚本的Google Doc或Google Sheet容器中使用jQuery库？如果是这样，怎么办？

塞尔萨·萨萨斯

它的工作方式与电子表格中的UiApp完全相同，只需使用

  SpreadsheetApp.getActive().show(HtmlService.createTemplateFromFile('index').evaluate());

并使用您的代码和库创建一个HTML文件。

以下是完整的演示代码，屏幕截图和指向共享示例的链接（仅查看）。

代码：

function onOpen() {
  var menuEntries = [ {name: "datePickerTest", functionName: "datePickerTest"}
                     ];
  SpreadsheetApp.getActiveSpreadsheet().addMenu("test",menuEntries);//
}

function datePickerTest(){
  SpreadsheetApp.getActive().show(HtmlService.createTemplateFromFile('index').evaluate());
}

index.html

<div class="demo" >
<style type="text/css"> .demo { margin: 30px ; color : #AAA ; font-family : arial sans-serif ;font-size : 10pt } 
                            p { color : red ; font-size : 8pt } 
</style>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script>

/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au),
              Stéphane Nahmani ([email protected]),
              Stéphane Raimbault <[email protected]> */
jQuery(function($){
    $.datepicker.regional['fr'] = {
        closeText: 'Fermer',
        prevText: 'Précédent',
        nextText: 'Suivant',
        currentText: 'Aujourd\'hui',
        monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
        'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
        monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin',
        'Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
        dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
        dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
        dayNamesMin: ['D','L','M','M','J','V','S'],
        weekHeader: 'Sem.',
        dateFormat: 'dd/mm/yyyy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''};
    $.datepicker.setDefaults($.datepicker.regional['fr']);
});

</script>

Welcome to some random page

<p>Please select a date below :</p>

click here : <input type="text" name="date" id="datepicker" />
<input type="text" id="alternate" size="30">

<script>
    $( "#datepicker" ).datepicker({
      altField: "#alternate",
      altFormat: "DD, d MM, yy",
      showWeek: false,
      firstDay: 1,
      changeMonth: true, 
      changeYear: true, 
      dateFormat: 'dd-mm-yy',
      Locale : 'fr'
    });
</script>

</div>