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' ,//鼠标悬浮显示，默认值是clicktransition:'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>
效果：
Semantic UI 之 下拉菜单 dropdown相关推荐
- Unity3D 重写下拉菜单/Dropdown组件、开启每个按钮可用
Override Dropdown Component 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人! (拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) ...
- android的dropdownmenu,Bootstrap 下拉菜单.dropdown的具体使用方法
本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 下拉菜单.dropdown具体用法 .dropdown ...
- unity代码 获取dropdown_Unity3D UGUI下拉菜单/Dropdown组件用法、总结
Unity3D中UGUI实现下拉菜单 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人! (拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar - ...
- Bootstrap下拉菜单dropdown组件的使用
Bootstrap下拉菜单组件的使用 由于官方文档介绍不全,以及官方下载的包不完整,所以总测试不出效果!这里找条捷径给大家. 我们知道Bootstrap下拉菜单并非是真正意义上的select下拉框组件 ...
- layui学习笔记（五）关于layui按钮下拉菜单dropdown使用。研究dropdown数据提取、显示过长、样式显示问题。
前言 今天做后台文章列表的时候,添加了一个功能:给文章批量移动分类. 方法有很多,比如:选择多条文章-按钮弹窗-下拉菜单select-选择分类-提交.也可以选择多条文章-直接下拉菜单select-选择 ...
- BootStrap3 下拉菜单dropdown
目录 官方地址 基本用法 向上弹出菜单 菜单项默认打开 菜单项对齐 左对齐 右对齐 带标题的下拉菜单 带分割线的下拉菜单 激活的菜单项 禁用的菜单项 整体代码 官方地址 https://v3.boot ...
- Android UI设计 下拉菜单Spinner用法 动态添加删除Spinner菜单项
Spinner是一种下接菜单,类似HTML中的select标签,点击后弹出一个对话框,显示几个供选择的选项,手机屏幕大小有限,如果都用RadioGroup单选按钮,会占用很大的空间.今天的例子最终效果 ...
- bootstrap下拉菜单dropdown点击后阻止自动收起菜单
公司有个切换院区的下拉框,使用的bootstrap的dropdown,以前是单选,因此点击切换后就会自动收起并且将数据传给后台,现在改成了多选,出现了一个问题就是点击一个后也会自动收起,这样的多选肯定 ...
- html中按钮下拉菜单,CSS 下拉菜单
CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 文本下拉菜单 菜鸟教程 www.runoob.com 实例演示 2 实例演示 3 学的不仅是技术 ...
- linux boot菜单列表,Bootstrap 下拉菜单（Dropdowns）简介
Bootstrap 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下拉菜单,只需要在 class ...
最新文章
- 循环数组函数c语言,C语言练习题2(分支结构循环结构数组函数2009-2012二级真题)..doc...
- 使用read_html爬取网页表哥,Python笔记：用read_html()爬取table形式表格的网络数据...
- 5高并发服务器：socket IPC
- NFS客户端、服务器协商读写粒度（rsize、wsize）流程 【转】
- 混合云K8s容器化应用弹性伸缩实战
- Android之CheckBox进行代码设置setChecked(true)会触发setOnCheckedChangeListener事件
- OpenNI2 + NiTE2开发教程
- Codeforces Round #617 (Div. 3) String Coloring（E1.E2）
- WebService之Java原生态支持（二）
- IO流（八）之InputStreamReader类与OutputStreamWriter类
- boost.asio mysql_boost asio学习笔记
- 4-1.最大子数组分治法实现
- 《机器学习》周志华--第5章神经网络。 笔记+习题
- 黑苹果配置挑选，教你组装一台苹果机
- 使用fastlane match自动化管理证书和描述文件
- 英文单词cipher 和password的区别，用法有什么不同，
- 为什么说JCLGMP必将带来更实实在在的就学等方面权益？
- Python 斐波那契数
- android录音声波动画,Android开发:仿微信 录音声波
- MySQL之InnoDB主键索引的B+树的高度计算