semantic-ui 下拉框
UI 下拉框 Semantic
2023-09-14 08:56:53 时间
注意:在使用semantic的下拉框的时候,不仅需要引入semantic.css,还要引入semantic.js,最重要的是引入jquery。否则下拉效果不会显示。
并且,jquery必须先于semantic.js引入,因为semantic.js需要用到jquery。
1、标准的下拉框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉框</title> <link href="../dist/semantic.css" rel="stylesheet" /> <script src="../jquery.js"></script> <script src="../dist/semantic.js"></script> </head> <body style="padding:30px"> <div class="ui selection dropdown"> <input type="hidden" name="gender" id="gender"> <i class="dropdown icon"></i> <div class="default text">性别</div> <div class="menu"> <div class="item" data-value="1">男性</div> <div class="item" data-value="0">女性</div> </div> </div> <button class="ui button" id="btn">提交</button> </body> <script> $(document).ready(function(){ $('.ui.selection.dropdown').dropdown(); $("#btn").on("click",()=>{ alert($("#gender").val()); }); }); </script> </html>
2、搜索功能的下拉框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉框</title> <link href="../dist/semantic.css" rel="stylesheet" /> <script src="../jquery.js"></script> <script src="../dist/semantic.js"></script> </head> <body style="padding:30px"> <div class="ui fluid search selection dropdown"> <input type="hidden" name="alpha" id="alpha"> <i class="dropdown icon"></i> <div class="default text">选择字母</div> <div class="menu"> <div class="item" data-value="ABC">ABC</div> <div class="item" data-value="CDE">CDE</div> <div class="item" data-value="EFG">EFG</div> <div class="item" data-value="GHI">GHI</div> </div> </div> <button class="ui button" id="btn">提交</button> </body> <script> $(document).ready(function(){ $('.ui.selection.dropdown').dropdown(); $("#btn").on("click",()=>{ alert($("#alpha").val()); }); }); </script> </html>
相关文章
- 再见Swagger UI 国人开源了一款超好用的 API 文档生成框架,真香
- element ui toggleRowSelection 回显无效
- SAP UI5 sap.ui.Device.media 公有方法介绍
- 「前端组件化」以Antd为例,快速打通UI组件开发的任督二脉
- UI自动化平台_ui自动化是什么意思
- UI自动化 - 如何判断一个页面上元素是否存在?
- 两位谷歌华人研究员发布首个纯视觉「移动UI理解」模型,四大任务刷新SOTA
- 【Android UI】贝塞尔曲线 ⑥ ( 贝塞尔曲线递归算法原理 | 贝塞尔曲线递归算法实现 )
- SAP CRM WebClient UI 支持的一些 url 参数
- 自动化测试 | UI Automator 入门指南详解程序员
- Qt项目界面文件(.ui)及其作用(超详细)
- 界面优化Linux UI界面优化提升体验(linux的ui)
- Linux系统UI开发实践指南(linuxui开发)
- MySQL UI工具:简化您的数据库管理任务(mysqlui工具)