Semantic UI 之 下拉菜单 dropdown

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Semantic UI 之 下拉菜单 dropdown相关的知识，希望对你有一定的参考价值。

第一步：创建项目

添加JQuery和Semantic UI包、创建dropdown.html页面：

第二步：dropdown.html页面

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

最简单的下拉菜单：不需要JavaScript就可下拉

<H2>最简单的下拉菜单：不需要JavaScript就可下拉</H2>
<div class="ui simple dropdown">
    课程
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item">语文</div>
        <div class="item">英语</div>
        <div class="item">数学</div>
    </div>
</div>

效果：

普通下拉菜单

<h2>普通下拉菜单</h2>
<div class="ui dropdown">
    课程 <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item">语文</div>
        <div class="item">英语</div>
        <div class="item">数学</div>
    </div>
</div>

本菜单以及下面的菜单都需要借助以下JavaScript代码才能显示出来：

<script type="text/javascript">
    $(".ui.dropdown").dropdown(
        on:hover ,//鼠标悬浮显示，默认值是click
        transition:swing right, //设置动画效果
        allowAdditions:true //允许添加新的菜单项
    );
</script>

效果：

可以选择的下拉菜单

<h2>可以选择的下拉菜单</h2>
<div class="ui selection dropdown">
    <div class="default text">课程</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item">语文</div>
        <div class="item">英语</div>
        <div class="item">数学</div>
    </div>
</div>

效果：

其它下拉菜单

<h2>其它下拉菜单</h2>
<div class="ui floating selection dropdown">
    课程 <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item">语文</div>
        <div class="item">英语</div>
        <div class="item">数学</div>
    </div>
</div>
<div class="ui pointing selection dropdown">
    课程 <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item">语文</div>
        <div class="item">英语</div>
        <div class="item">数学</div>
    </div>
</div>
<div class="ui left pointing selection dropdown">
    课程 <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item">语文</div>
        <div class="item">英语</div>
        <div class="item">数学</div>
    </div>
</div>

效果：

可以选择的文本框下拉菜单：下拉菜单自动设置隐藏域的值

<h2>可以选择的文本框下拉菜单：下拉菜单自动设置隐藏域的值</h2>
<div class="ui selection dropdown">
    <input type="hidden" name="course">
    <div class="default text">课程</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item" data-value="11">语文</div>
        <div class="item" data-value="22">英语</div>
        <div class="item" data-value="33">数学</div>
    </div>
</div>

效果： 可以使用浏览器的控制台查看隐藏域的值：

可以搜索的下拉菜单

<h2>可以搜索的下拉菜单</h2>
<div class="ui search selection dropdown">
    <div class="default text">课程</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item">Java</div>
        <div class="item">JavaScript</div>
        <div class="item">Python</div>
    </div>
</div>

效果：

带标签的图标按钮下拉菜单

<h2>带标签的图标按钮下拉菜单</h2>
<div class="ui dropdown labeled icon button">
    <i class="dropdown icon"></i>
    <div class="text">课程</div>
    <div class="menu">
        <div class="item">Java</div>
        <div class="item">JavaScript</div>
        <div class="item">Python</div>
    </div>
</div>

效果：

带标签的图标按钮下拉菜单

<h2>带标签的图标按钮下拉菜单</h2>
<div class="ui dropdown labeled icon button">
    <i class="dropdown icon"></i>
    <div class="text">课程</div>
    <div class="menu">
        <div class="ui icon search input">
            <i class="search icon"></i>
            <input type="text" placeholder="搜索">
        </div>
        <div class="item">Java</div>
        <div class="item">JavaScript</div>
        <div class="item">Python</div>
    </div>
</div>

多选下拉菜单

 <label for="language">国家</label>
    <div id="language" class="ui  selection multiple search dropdown">
    <input type="hidden" name="lang">
    <i class="dropdown icon"></i>
    <div class="default text">请选择语言</div>
    <div class="menu">
        <div class="item" data-value="2">JavaScript</div>
        <div class="item" data-value="1">Java</div>
        <div class="item" data-value="2">Python</div>
        <div class="item" data-value="2">Cshap</div>
    </div>
</div>

效果：

语义 ui 滚动下拉列表不显示所选项目

【中文标题】语义 ui 滚动下拉列表不显示所选项目【英文标题】：semantic ui scrolling dropdown doesn't show the selected item 【发布时间】：2019-07-13 05:08:49 【问题描述】：

我正在使用语义 UI 滚动下拉菜单。

在页面加载时，我设置了选定的值。

问题是当我们默认打开下拉菜单时，semantic-ui 会显示下拉菜单的第一个元素并且不显示所选值。

如果您选择另一个值，则新的下拉位置是所选值之一。

有没有办法在第一次打开下拉菜单时显示所选元素。

下拉菜单

$('.dropdown').dropdown();
$('.dropdown').dropdown( 'set selected', '10');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.3/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<div class="ui scrolling dropdown">
  <div class="text">10</div>
		<i class="dropdown icon"></i>
		  <div class="menu">
		    <div class="item" data-value="1">1</div>
        <div class="item" data-value="2">2</div>
        <div class="item" data-value="3">3</div>
        <div class="item" data-value="4">4</div>
        <div class="item" data-value="5">5</div>
        <div class="item" data-value="6">6</div>
        <div class="item" data-value="7">7</div>
        <div class="item" data-value="8">8</div>
        <div class="item" data-value="9">9</div>
        <div class="item" data-value="10">10</div>
      </div>
	</div>

【问题讨论】：

【参考方案1】：

经过一番调查，我使用 .index() 和 .scrollTop() 以及下拉回调 .onShow 解决了

$('.dropdown').dropdown();
$('.dropdown').dropdown('set selected', '10');
$('.dropdown').dropdown(
  onShow: function(value, text) 
    setTimeout(function() 
      var preSelected = $('#dd > div.item.active.selected').index('.item');
      $('#dd').scrollTop((preSelected - 2) * 36);
    , 100);
  
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.3/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

<div class="ui scrolling dropdown">
  <div class="text">10</div>
  <i class="dropdown icon"></i>
  <div class="menu" id="dd">
    <div class="item" data-value="1">1</div>
    <div class="item" data-value="2">2</div>
    <div class="item" data-value="3">3</div>
    <div class="item" data-value="4">4</div>
    <div class="item" data-value="5">5</div>
    <div class="item" data-value="6">6</div>
    <div class="item" data-value="7">7</div>
    <div class="item" data-value="8">8</div>
    <div class="item" data-value="9">9</div>
    <div class="item" data-value="10">10</div>
  </div>
</div>

【讨论】：

以上是关于Semantic UI 之 下拉菜单 dropdown的主要内容，如果未能解决你的问题，请参考以下文章

Semantic-UI复习

HTML导航之下拉菜单方法3——JQuery下拉菜单

语义 ui 滚动下拉列表不显示所选项目

在 React 中使用 Semantic-UI 固定菜单和侧边栏

使用 React 和 Semantic-Ui 更新菜单中的活动项

iOS 如何理解Semantic选项