zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    Maven ==> 简介
    IDEA结合GIT的使用
    Shell ==> 基础
    Dubbo ==> 简介
    iptables防火墙
    文件系统对比
    supervisord部署
    inotify+rsync安装配置
    前端插件网址
    Nginx高级玩法
  • 原文地址:https://www.cnblogs.com/djlbolgs/p/12591472.html
Copyright © 2011-2022 走看看