下拉菜单 | 易学教程

Bootstrap单按钮的下拉菜单

阅读更多关于 Bootstrap单按钮的下拉菜单

简介把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。插件依赖按钮式下拉菜单依赖下拉菜单插件，因此需要将此插件包含在你所使用的 Bootstrap 版本中。完整代码： <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <script src="/scripts/jquery.min.js"></script> <script src="/scripts/bootstrap.min.js"></script> </head> <body> <div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 默认 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="javascript:void(0)">功能</a></li> <li><a href="javascript:void(0)">另一个功能</a></li>

SharePoint Online 开发：修改站点导航宽度和下拉菜单

阅读更多关于 SharePoint Online 开发：修改站点导航宽度和下拉菜单

Blog链接： https://blog.51cto.com/13969817 从个人喜好而言，我比较喜欢SharePoint的Olso风格，导航栏显示在顶部，但如果我新增加的一些页面如果能显示在导航的下拉菜单中，就完美了。那么我该如何改善这种体验呢？理想的情况下，我希望下拉菜单中的每个菜单项都在一行，我们来看带有下拉菜单的导航，你可以看到有一个类：dynamic，双击并复制它，然后在右侧style标签下添加一条rule, 我们可以设置宽度为一个特定的像素宽度或者可以设置其宽度为auto，这样它可以根据屏幕的大小来自动设置，我想我们需要再加上Important因为这是一个重要的规则，另外我们还不需要换行。在Style 标签下添加的Rule，示例代码： .dynamic { width: auto !important; white-space: nowrap !important; } 我们来看一下效果，展开导航的下拉菜单，可以看到链接中的文字显示在一行内，效果很好，如果你想永久性保留，需要将此规则复制，然后到样式表中进行粘贴，保存，这会永久性使用这个规则如果我们导航下拉菜单中有多个链接，如果我们想在子菜单项之间添加一些空间呢? 我们在dynamic类中继续添加一个rule: 在Style 标签下添加的Rule，示例代码： .dynamic li { padding: 5px

细数使用View UI（iView）开发中遇到的坑

阅读更多关于细数使用View UI（iView）开发中遇到的坑

一、前言 View UI，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。官网地址： https://www.iviewui.com/docs/introduce 二、正文由于之前Vue的项目主要使用的UI框架为elementUI，近期有个新项目有机会可以使用一下没有使用过的UI框架，在使用中遇到一些问题，总结如下： 1.下拉菜单的点击事件 <Select v-model="model1" style="width:200px"> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> </Select> 这是官网中下拉菜单的API，实际使用中，发现on-change并不生效（@change也不生效），正确写法应为@on-change=" "，例如： <Select v-model="model1" style="width:200px" @on-change="changeFunc"> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> <

<el-menu>菜单标签（里面可以包括：<el-submenu>和<el-menu-item>）

阅读更多关于菜单标签（里面可以包括：和）

<el-menu> 1、router属性，若使用router属性menu-item的index将对应router的path属性 2、mode,下拉菜单的模式分为horizontal和vertical两种模式 3、background-color，background-color属性为下拉菜单整体的背景颜色 4、text-color，text-color为下拉菜单中的文字的颜色 5、active-text-color为选中的菜单的颜色 <el-menu>标签中可以有el-submenu和el-menu-item标签组成 demo <el-menu :router="true" mode="horizontal" background-color="#1c213f" text-color="#fff"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-menu"></i> </template> <el-menu-item index="1-1">选项一</el-menu-item> <el-submenu index="2"> <template slot="title">选项二</template> <el-menu-item index="2-1">选项二-一</el-menu-item> </el

DevExpress：带表格的下拉菜单LookUpEdit

阅读更多关于 DevExpress：带表格的下拉菜单LookUpEdit

本文为我的.NET控件库DevExpress使用笔记，我的DevExpress版本为13.1 1、控件类型全称：DevExpress.XtraEditors.LookUpEdit 2、控件所在程序集：DevExpress.XtraEditors.v13.1.dll 3、工具箱内分类：DX.13.1: Common Controls 4、控件样式截图 5、LookUpEdit控件是一个下拉菜单，下拉菜单中存放了一个可以同时存放多列的数据源，左下角的“×”可以关闭下拉菜单，右下角可以拉动下拉菜单的大小，列的宽度可以自由拉动，如果数据源条目较多以致显示区域不能显示全部的条目，控件右侧会提供滚动条供用户拖动。 6、当LookUpEdit的EditValue属性为空的时候，控件会显示Properties下NullText属性的值 7、控件Properties下的DataSource内用于存放下拉菜单的数据源，DisplayMember决定了在选择了数据源中的一个条目后，下拉菜单中的文本显示该条目中哪一列的内容 8、可以在控件右上角的小箭头中设置控件的DataSource和DisplayMember，点击“Edit Columns”可以编辑列，点击“Populate Columns”可以清空当前列 9、DevExpress提供了一个专门用于编辑列的界面：

DevExpress：带图片的下拉菜单ImageComboBoxEdit

阅读更多关于 DevExpress：带图片的下拉菜单ImageComboBoxEdit

本文为我的.NET控件库DevExpress使用笔记，我的DevExpress版本为13.1 1、控件类型全称：DevExpress.XtraEditors.ImageComboBoxEdit 2、控件所在程序集：DevExpress.XtraEditors.v13.1.dll 3、工具箱内分类：DX.13.1: Common Controls 4、控件样式截图 5、ImageComboBoxEdit控件除了具备下拉菜单的功能外，还可以再下拉菜单中某个条目前加入图片， 6、ImageComboBoxEdit控件本身不保存图片，也无法在属性中直接设置某一项的图片。确立每一条数据与图片的关系可以通过如下方式： 1）在Resource中插入7张图片，上面画着数字0-6，分别取名为Sunday、Monday、……、Saturday 2）设有一个ImageComboBoxEdit控件的实例imageComboBoxEdit1，在窗体的Load函数下输入如下代码： DevExpress.Utils.ImageCollection imageCollection = new DevExpress.Utils.ImageCollection(); imageCollection.Images.Add(Properties.Resources.Sunday); imageCollection

css--下拉菜单

阅读更多关于 css--下拉菜单

一、下拉菜单 1、示例代码如下 <!doctype html> <html> <head> <meta charset="utf-8"/> <title>下拉菜单</title> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width:160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown

DevExpress：带记录历史功能的下拉菜单MRUEdit

阅读更多关于 DevExpress：带记录历史功能的下拉菜单MRUEdit

本文为我的.NET控件库DevExpress使用笔记，我的DevExpress版本为13.1 1、控件类型全称：DevExpress.XtraEditors.MRUEdit 2、控件所在程序集：DevExpress.XtraEditors.v13.1.dll 3、工具箱内分类：DX.13.1: Common Controls 4、控件样式截图 5、DevExpress.XtraEditors.MRUEdit继承自类DevExpress.XtraEditors.ComboBoxEdit，是一个特殊的下拉菜单，该下拉菜单可以记录之前输入过的文本作为菜单项，并在下拉菜单中每项的最后提供一个红色的×型标记用于将该项从菜单中移除。MRU是英文单词“the M ost R ecently U sed”的缩写。 6、可以在属性管理器中找到Properties下的Item，打开字符串集合编辑器添加MRUEdit的默认菜单项。从窗体的Designer.cs文件中可以看到这些字符串是用的Items集合下的AddRange函数添加的： this.mruEdit1.Properties.Items.AddRange(new object[] { "www.2014.com", "www.2015.com", "www.2016.com"}); 也可以直接使用Items集合下的Add函数手动添加：

小蚂蚁学习Bootstrap（1）——导航条的设置和下拉菜单

阅读更多关于小蚂蚁学习Bootstrap（1）——导航条的设置和下拉菜单

久闻Bootstrap的大名，也没有亲手实践过，真是让人手痒的。这也难怪，后端的逻辑往往忙活的令人不可开交，平时几乎没有机会来做前端的东西。前两天在动弹里看到有人吐槽，话说什么一个java程序员什么都要做，HTML、js、数据库等，我想说的是，php程序员才是这样的呢，前端程序员不一定要懂后端的技术，但是后端的程序员是一定要懂前端的技术。就用这几天的空余时间，对Bootstrap做一个初步的了解吧。 Bootstrap是移动设备优先的，它针对移动设备的样式融合进了框架的每个角落，使得只需要通过简单的编码，便可以实现漂亮的响应式布局。今天的就先了解一下导航条和下拉菜单的制作，手写了一个小案例，把笔记写在了注释之中，这样看起来比较清晰明了。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>学PHP的小蚂蚁的博客</title>  <link

Bootstrap响应式前端框架笔记八——按钮组

阅读更多关于 Bootstrap响应式前端框架笔记八——按钮组

Bootstrap响应式前端框架笔记八——按钮组在Bootstrap定义的Css样式中，开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件，组合后的控件左右两侧的按钮将被圆角处理，示例代码如下： <p>正常的按钮组</p> <div class="btn-group"> <button class="btn btn-default">左按钮</button> <button class="btn btn-danger">中心按钮</button> <button class="btn btn-primary">右按钮</button> </div> 效果如下：也可以将一组按钮组包裹在btn-toolbar类中，使其组合成为按钮组工具栏，示例如下： <p>按钮组工具栏</p> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-default">左按钮</button> <button class="btn btn-danger">中心按钮</button> <button class="btn btn-primary">右按钮</button> </div> <div class="btn-group"> <button class="btn btn

订阅下拉菜单