2016-05-13 46 views
2

我知道我必須錯過一些東西,因爲我的電腦中沒有任何作品的例子。語義UI根本不起作用

在網站上取最簡單的第一個example

我複製了代碼原樣,它根本不適用於我。我包括semantic.min.csssemantic.min.js也只是爲了防止我使用谷歌CDN的jQuery。

以下是我的html的代碼。

<!DOCTYPE html> 
<html> 
<head> 

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> 
<script src="semantic/dist/semantic.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 

</head> 
<body> 


<script> 
$('.ui.dropdown') 
    .dropdown() 
; 
</script> 



<div class="ui dropdown"> 
    <input type="hidden" name="gender"> 
    <i class="dropdown icon"></i> 
    <div class="default text">Gender</div> 
    <div class="menu"> 
    <div class="item" data-value="male">Male</div> 
    <div class="item" data-value="female">Female</div> 
    </div> 
</div> 



</body> 
</html> 

輸出是這樣的.. enter image description here

謝謝!我對JavaScript和語義UI非常陌生。

回答

2

我使用鏈接js文件的這個命令,做工精細

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="../bower_components/semantic/dist/semantic.min.css"> 
    <script src="../bower_components/semantic/dist/semantic.min.js"></script> 
</head> 
<body> 


<select name="gender" class="ui dropdown" id="select"> 
    <option value="">Gender</option> 
    <option value="male">Male</option> 
    <option value="female">Female</option> 
</select> 


<script type="text/javascript"> 
    $('#select') 
    .dropdown() 
    ; 
</script> 
</body> 
</html> 
+0

我一直有這個問題爲好,這個固定爲了我。 – TheIcemanCometh

0

我需要包括.js文件之前,包括jQuery的和.css