下拉菜单 | 易学教程

Bootstrap响应式前端框架笔记十七——下拉列表交互

阅读更多关于 Bootstrap响应式前端框架笔记十七——下拉列表交互

Bootstrap响应式前端框架笔记十七——下拉列表交互为dropdown-toggle类添加data-toggle="dropdown"属性可以实现其下拉列表功能的绑定，示例如下： <div class="dropdown col-md-2" id="drop"> <button class="btn dropdown-toggle btn-primary" data-toggle="dropdown"> 下拉列表 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a>金牛座</a> </li> <li> <a>摩羯座</a> </li> <li> <a>狮子座</a> </li> <li> <a>白羊座</a> </li> </ul> </div> 点击此按钮后，可以自动实现下拉列表的显示或隐藏。 Bootstrap中的下拉列表控件也定义了一些方法回调，其会在drop-menu的父标签上进行绑定，示例如下： $('#myDropMenu').on('show.bs.dropdown',function(){ console.log("下拉框将要展示"); }); $('#myDropMenu').on('shown.bs.dropdown',function(){ console

Bootstrap下拉菜单和导航栏的使用

阅读更多关于 Bootstrap下拉菜单和导航栏的使用

1.下拉菜单里面必须是<li> <a> ... </a></li>的形式，否则a标签里面的字体会没有样式； 2.<span class="caret"></span>为下拉箭头的样式下拉菜单和导航栏的html代码如下： <html> <head> <title>下拉菜单和导航栏练习</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <link href="bootstrap-3.3.7-dist\css\bootstrap.min.css" rel="stylesheet"> <script src="bootstrap-3.3.7-dist\js\bootstrap.js" > </script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <li class="dropdown"> <a href="#" data-toggle="dropdown"> Home<span class="caret"></span> </a> <ul class =

JQuery下拉菜单

阅读更多关于 JQuery下拉菜单

<!DOCTYPE html> <html> <head> <title>下拉</title> <style type="text/css"> #input{ width: 100px; height: 20px; position: absolute; top: 10px; left: 100px; border: 2px solid #ccc; } #choose{ width: 100px; height: auto; position: absolute; top: 18px; left: 60px; display: none; } #choose li{ width: 100px; height: 20px; line-height: 20px; text-align: center; list-style: none; border: 1px solid #ccc; border-top: none; } </style> </head> <body> <input id="input" type="text" name=""> <ul id="choose"> <li>1</li> <li>10</li> <li>100</li> </ul> <script src="https://code.jquery.com/jquery-git.js"></script>

《Vue.j实战》一书 p126 页练习 1 & 2 & 3 试做

阅读更多关于《Vue.j实战》一书 p126 页练习 1 & 2 & 3 试做

练、习2 ：扩展clickoutside. ，实现在点击按钮显示下拉菜单后，通过按下键盘的ESC 键也可以关闭下拉菜单。练习3 ：将练习2 的ESC 按键关闭功能作为可选项。提示，可以用修饰符，比如v-clickoutside . esc 。 Demo在线效果浏览解答：修改template，在指令后添加.esc修饰符 <div class="main" v-clickoutside.esc="handleClose" data-id="0" data-first> <button @click="show=!show">点击显示下拉菜单</button> <div class="dropdown" v-show="show"> <p>下拉框的内容，点击外面区域可以关闭</p> </div> </div> 在自定义指令的 bind 钩子中，新增一 handler，用于处理当指令附带了 esc 修饰符时的情形。检测event对象的keyCode是否为27，如是，则表明点击了esc按键，就调用相应函数。 function handleEsc(e){ if(e.keyCode===27){ binding.value(e); } 并绑定至 document 上。 el.__vueEscOutside__=handleEsc; document.addEventListener(

vim c++补全

阅读更多关于 vim c++补全

弄了个vim对c++的补全，主要参考自： http://vim.wikia.com/wiki/C%2B%2B_code_completion 首先确定vim编辑.cc或者.cpp文件时当前自动补全函数，在命令模式下输入 :set omnifunc? 如果得到的结果为：omnifunc=ccomplete#Complete，说明有必要进行以下的操作以实现针对c++的自动补全 1 　首先安装OmniCppComplete，参见： http://www.vim.org/scripts/script.php?script_id=1520 安装的过程很简单，与大多数vim插件一样，cd到~/.vim/目录解压所下载的文件即可 2在~/.vim/目录下创建tags子目录 3创建stdc++ 对应的tags： A）首先下载经高手修改定制的libstdc++头文件，可以到这里下载： http://www.vim.org/scripts/script.php?script_id=2358 并将其解压到~/.vim/tags B) 运行以下命令 $ cd ~/.vim/ tags $ ctags -R --c++-kinds=+p --fields=+iaS --extra=+q --language-force=C++ cpp_src $ mv tags cpp 4按照步骤３为其他库创建tags

细数使用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> <