Semantic的Dropdown(下拉框)要怎么用
Posted djlbolgs
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Semantic的Dropdown(下拉框)要怎么用相关的知识,希望对你有一定的参考价值。
在Semantic找到Dropdown(下拉框)的使用例子,仿照输入,但没有下拉效果,搜索查询一些资料后,得知"selection dropdown"还需要js配合,才能有效果。如果不想执行js,还可以使用别的class,如"ui simple dropdown item" (见本文最后)。
记录如下:
1、首先要连接所需的css和js(我是在django中调试的,需要根据实际位置进行连接):
<link rel="stylesheet" href="{% static ‘dist/semantic.css‘ %}"> <script src="{% static ‘dist/jquery.min.js‘ %}"></script> <script src="{% static ‘dist/semantic.js‘ %}"></script>
2、输入dropdown的代码:
<div class="ui selection dropdown"> <input type="hidden" name="Area"> <!-- 这句不要好像也可以 --> <i class="dropdown icon"></i> <div class="default text">请选择地区</div> <div class="menu"> <div class="item" id="CY">朝阳</div> <div class="item" id="HD">海淀</div> <div class="item" id="TZ">通州</div> </div> </div>
3、放入js代码:
<script> $(function(){ $(‘.ui.selection.dropdown‘).dropdown(); }); </script>
完事,大功告成,截图如下:
另外,用"ui simple dropdown item" 不用执行js也能实现类似效果,"ui simple dropdown item" 使用样例如下:
<div class="ui simple dropdown item"> Area <i class="dropdown icon"></i> <div class="menu"> <div class="item" id="CY">朝阳</div> <div class="item" id="HD">海淀</div> <div class="item" id="TZ">通州</div> </div> </div>
以上是关于Semantic的Dropdown(下拉框)要怎么用的主要内容,如果未能解决你的问题,请参考以下文章
bootstrap dropdown下拉框如何从数据库取值然后动态赋值 ,目前只是单纯赋值