语义 UI 中的脚本不起作用答案

【问题标题】：Scripts in Semantic UI not works语义 UI 中的脚本不起作用
【发布时间】：2016-03-10 02:26:31
【问题描述】：

我是 Semantic UI 的新手。我使用了官方网站提供的所有设计元素，如菜单、搜索下拉菜单、单选框。（我只是复制并尝试过）。但没有任何效果。

我发现这可能是因为脚本部分不起作用。

$(document).ready(
  function() {
    $('.ui.checkbox')
      .checkbox();

    $('#select')
      .dropdown();
    $('.ui.radio.checkbox')
      .checkbox();

    $('.ui.dropdown')
      .dropdown();



  });

<link href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.19.3/css/semantic.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.19.3/javascript/semantic.js"></script>

<!DOCTYPE html>
<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic UI Second Example</title>

  <!-- Linking to Semantic UI -->

  <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
  <script src="semantic/dist/semantic.min.js"></script>
  <script type="text/javascript" src="src/myscript.js"></script>
  <script src="jquery.min.js"></script>


</head>

<body>

  <div class="ui red pointing menu">
    <h3 class="header item">Menu</h3>
    <a class="active item">Add New</a>
    <a href="#" class="item">View</a>
    <a href="#" class="item">Search</a>
    <a href="#" class="item">Delete</a>
    <span class="floated right item">Logged in as User</span>
  </div>
  <h2 class="ui center aligned header">Income and Expense</h2>

  <div class="ui page grid main">


    <form class="ui form">
      <h4 class="ui dividing header">Category</h4>

      <div class="field">
        <label>Institution Name</label>
        <div class="field">
          <select class="ui fluid search dropdown" name="institution">
            <option value="">Select Institution</option>
            <option value="1">School</option>
            <option value="2">College</option>
            <option value="3">BED</option>
            <option value="4">Fuels</option>
            <option value="5">Mess</option>
            <option value="6">Transport</option>
            <option value="7">Farm</option>
            <option value="8">Others</option>
          </select>
        </div>
        <div class="field">
          <select class="ui search dropdown">
            <option value="">State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District Of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>

          </select>
        </div>
        <div class="field">
          <div class="ui fluid search selection dropdown">
            <input type="hidden" name="country">
            <i class="dropdown icon"></i>
            <div class="default text">Select Country</div>
            <div class="menu">
              <div class="item" data-value="af">Afghanistan</div>
              <div class="item" data-value="ax">Aland Islands</div>
              <div class="item" data-value="al">Albania</div>
            </div>
          </div>
        </div>
        <div class="field">
          <select name="gender" class="ui dropdown" id="select">
            <option value="">Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>

        </div>
        <div class="grouped fields">
          <label for="transaction_type">Select the Transaction type:</label>
          <div class="field">
            <div class="ui radio checkbox">
              <input type="radio" name="transaction_type" checked="">
              <label>Income</label>
            </div>
          </div>
          <div class="field">
            <div class="ui radio checkbox">
              <input type="radio" name="transaction_type">
              <label>Expense</label>
            </div>
          </div>

        </div>

      </div>

      <h4 class="ui dividing header">Billing Information</h4>
      <div class="field">
        <label>Card Type</label>

        <div class="ui input">
          <input type="date" placeholder="Select the date">

        </div>
      </div>
    </form>

  </div>

</body>

</html>

【问题讨论】：

这和jQuery uI..有什么关系？
找到了答案...我们必须先初始化Jquery...

标签： jquery frameworks semantic-ui

【解决方案1】：

在 css 和所有其他脚本之前包含 JQuery Link。

【讨论】：