在ElectronJs中找不到SemanticUI Dropdown扩展?

时间:2018-04-11 18:36:10

标签: javascript electron semantic-ui

我正在尝试使用SemanticUI与Electron的下拉列表,但由于某种原因,下拉列表的Javascript组件未被调用/找到。我尝试过使用bower,gulp build和npm。到目前为止,没有任何工作。这是我正在使用的代码。

HTML

<head>
  <title>
    ...
  </title>

  <script>
    window.$ = window.jQuery = require('../bower_components/jquery/dist/jquery.min.js')
  </script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js"></script>

  <script src="../bower_components/semantic-ui-dropdown/dropdown.min.js"></script>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="../bower_components/semantic-ui-dropdown/dropdown.min.css" />
  <script src="view.js"></script>
</head>

<body>
  <div class="ui one column stackable center aligned page grid">
    <div class="column twelve wide">
      <h3 class="ui top attached header" id="dInfo">Title</h3>
      <div class="ui attached segment">
        <select class="ui search selection dropdown" id="search-select">
          <option value="">State</option>
          <option value="AL">Alabama</option>
          ...
        </select>
      </div>
      </div>
    </div>
<!--<script src="view.js"></script> (This also fails)-->
</body>

的JavaScript

const $ = require('jquery');
const {ipcRenderer} = require('electron');

$(document).ready(() => {

  $('#search-select').dropdown();
})

错误最终成为

  

未捕获的TypeError:$(...)。dropdown不是函数

关于为什么这个插件没有结束运行的任何想法?

修改

如果我没有在semantic-ui-dropdown中包含dropdown.js和dropdown.cs,则没有错误,但这就是下拉结果的结果。

enter image description here enter image description here

1 个答案:

答案 0 :(得分:0)

最后用

修复问题
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
  <link rel="stylesheet" href="index.css">

  <script>
    window.$ = window.jQuery = require('jquery')
  </script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
  <script src="view.js"></script>