セマンティクスuiコンポーネントの使い方追加のjqueryスクリプトを使用する方法

Question

私はセマンティクスuiを使用しています。たとえば、ドロップダウンコンポーネントを使用する場合は、スクリプトタグ内の関数を呼び出す必要があります。このような。

<script type="text/javascript"> 
$('.dropdown') 
    .dropdown() 
    ; 
</script> 

追加のスクリプトの作成を中止する方法はありますか。ブートストラップなどと同様に行います。

Answer 1

セマンティックUIのモジュールの多くは、javascriptを使用せずに作成できるバージョンがありますが、機能が制限されているか、非常に粗いデザインです。

各モジュールの同等機能を調べるには、マニュアルを参照する必要があります。たとえば、Dropdownには、javascriptなしとsimpleの両方のバージョンがあります。

$(function(){ 
 
    $('#firstDropdown').dropdown(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" rel="stylesheet"/> 
 

 
<div class="ui header">With Javascript</div> 
 
<select id="firstDropdown"> 
 
    <option value="">Select ...</option> 
 
    <option value="one">One</option> 
 
    <option value="two">Two</option> 
 
    <option value="three">Three</option> 
 
</select> 
 

 
<div class="ui header">Without Javascript</div> 
 
<select id="secondDropdown" class="ui selection dropdown"> 
 
    <option value="">Select ...</option> 
 
    <option value="one">One</option> 
 
    <option value="two">Two</option> 
 
    <option value="three">Three</option> 
 
</select> 
 

 
<div class="ui header"> 
 
    Simple Dropdown 
 
    <div class="sub header">Does not require javascript to initialise, but will require it to handle selection &amp; behaviour</div> 
 
</div> 
 
<div class="ui compact menu"> 
 
    <div class="ui simple dropdown item"> 
 
    Dropdown 
 
    <i class="dropdown icon"></i> 
 
    <div class="menu"> 
 
     <div class="item">Choice 1</div> 
 
     <div class="item">Choice 2</div> 
 
     <div class="item">Choice 3</div> 
 
    </div> 
 
    </div> 
 
</div>