1.JPG

jQuery UI是一套JavaScript函式庫,提供抽象化,可自訂主題的GUI控制項與動畫效果,基於jQuery JavaScript函式庫,可用來建構互動式的網際網路應用程式,Electron之GUI設計也是基於JavaScript,所以很適合用這套工具來完成應用程式介面設計

首先按照[Electron學習筆記]Electron專案建立這篇文章步驟,把專案建立完成,再來把jQuery UI這工具套入此專案中,jQuery UI可至官方網站下載最新的函式庫,如下連結,

jQuery UI官方網站

點擊右方Download jQuery UI 1.12.1之標準函式庫,如下所示,

2.JPG

下載完成解完壓縮就放置Electron專案資料夾內,如下所示,

3.JPG

把jquery-ui-1.12.1函式庫工具路徑套入index.html裡,如下所示,

<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui.css">
<script src="./jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="./jquery-ui-1.12.1/jquery-ui.js"></script>  

4.JPG

接下來安裝jquery語法,使Electron能使用jquery語法來撰寫程式,安裝指令如下,

npm install jquery --save

安裝完成會在package.json看到jquery與版本,如下所示,

5.JPG

renderer.js這支程式需增加套用jquery語法的程式,如下所示,

window.$ = window.jQuery = require('jquery');

6.JPG

這樣就套用完成,接下來已範例Slider-Snap to increments來測試結果,

index.html程式如下,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <p>
      <label for="amount">Donation amount ($50 increments):</label>
      <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    </p>
     
    <div id="slider"></div>

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
    <link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui.css">
    <script src="./jquery-ui-1.12.1/external/jquery/jquery.js"></script>
    <script src="./jquery-ui-1.12.1/jquery-ui.js"></script>      
  </body>
</html>

7.JPG

renderer.js程式如下,

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

window.$ = window.jQuery = require('jquery');

  $( function() {
    $( "#slider" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
  } );

8.JPG

輸入npm start來測試執行結果,如下所示,

9.JPG

接下來是打包匯出測試,注意如果在專案中已經有打包好的資料夾(dist),請先刪除後再進行打包匯出,

10.JPG

輸入npm run build來進行打包匯出測試,如下所示,

11.JPG

 

arrow
arrow

    鄭智遠 發表在 痞客邦 留言(0) 人氣()