[Electron學習筆記]Electron + jQuery UI專案建立－Michael_Jheng的部落格

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

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

jQuery UI官方網站

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

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

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

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

npm install jquery --save

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

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

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

這樣就套用完成,接下來已範例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>

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" ) );
} );