BootStrap下jQuery自动完成的样式调整

1. 覆盖层调整

在bootstrap的对话框中，当其中的输入项使用了自动完成控件，则其中下拉框中的内容就会被bootstrap对话框的覆盖层遮盖。

为了能够使后面的自动完成的层显示出来，可以使用如下的样式定义：

ul.ui-autocomplete{
z-index: 9999;
}

2. 自动完成选择项滚动

当有很多项选择时，自动完成的下拉就会显示很长的列表。为了能够更好地显示那么多的选项，希望能够有一个滚动选择的功能。

ul.ui-autocomplete{
z-index:9999;
max-height: 200px;
overflow-y: scroll;
}

以上所述是小编给大家介绍的BootStrap下jQuery自动完成的样式调整的相关知识，希望对大家有所帮助！

赞 (0)

相关推荐

  • 基于bootstrap3和jquery的分页插件

    自己写的一款基于bootstrap3和jquery的分页插件,初学jquery插件写法,写的很一般.拿出来献丑了. /** * 基于bootstrap3的jquery分页插件 * 调用方式分两种 * 1.直接调用法 * 普通大小 * $.mypage(id,now,max,fn); * 大尺寸 * $.mypagelg(id,now,max,fn); * 小尺寸 * $.mypagesm(id,now,max,fn); * * 参数说明:id为放置分页容器的ID,now为当前页,max为最大页,

  • JQuery组件基于Bootstrap的DropDownList（完整版）

    JQuery组件基于Bootstrap的DropDownList（完整版）

    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆盖菜单右侧的两个圆角.使得下拉菜单左侧有2个圆角,右侧没有,看上去不是很完美.如下图所示: 本文的内容就是如何恢复右侧的圆角 先看看原本的下拉菜单的HTML结构: <ul class="dropdown-menu dropdown-menu-right" role="me

  • 基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

    基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

  • 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫) 关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框 看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的某一项,菜单

  • 基于Bootstrap和jQuery构建前端分页工具实例代码

    基于Bootstrap和jQuery构建前端分页工具实例代码

    前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询

  • BootStrap下jQuery自动完成的样式调整

    BootStrap下jQuery自动完成的样式调整

    1. 覆盖层调整 在bootstrap的对话框中,当其中的输入项使用了自动完成控件,则其中下拉框中的内容就会被bootstrap对话框的覆盖层遮盖. 为了能够使后面的自动完成的层显示出来,可以使用如下的样式定义: ul.ui-autocomplete{ z-index: 9999; } 2. 自动完成选择项滚动 当有很多项选择时,自动完成的下拉就会显示很长的列表.为了能够更好地显示那么多的选项,希望能够有一个滚动选择的功能. ul.ui-autocomplete{ z-index:9999; m

  • bootstrap下拉列表与输入框组结合的样式调整

    bootstrap下拉列表与输入框组结合的样式调整

    输入框组默认是div.input-group 已知可在input表单元素前后加入两类元素[分别是文本和按钮]如下所示: div.input-group-addon{文字或符号} input.form-control div.input-group-btn 其中按钮还可嵌套下拉菜单(包括分裂式下拉菜单) 一.基本用法如下: <div class="input-group"> <span class="input-group-addon">@&l

  • Bootstrap下拉菜单样式

    Bootstrap下拉菜单样式

    本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu

  • bootstrap下拉分页样式 带跳转页码

    bootstrap下拉分页样式 带跳转页码

    本文实例为大家分享了bootstrap实现带跳转页码的下拉分页样式,供大家参考,具体内容如下 bootstrap 默认页码是没有下拉页码和分页页码跳转效果的,实际开发中需要对样式进行修改 <!--/分页--> <div class="container"> <div class="row myCenter"> <div class="col-xs-6 col-md-12 col-center-block"

  • JS模拟bootstrap下拉菜单效果实例

    本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的

  • BootStrap下拉菜单和滚动监听插件实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no

  • 基于BootStrap与jQuery.validate实现表单提交校验功能

    基于BootStrap与jQuery.validate实现表单提交校验功能

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 直接看demo:http://www.suchso.com/code/bootstrapvalidate/ 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极

  • jQuery中的CSS样式属性css()及width()系列大全

    jQuery中的CSS样式属性css()及width()系列大全

    目录 1.css()基本使用: 1.1 获取css属性 1.2 设置css属性 2.width()系列基本使用(height()系列同理) 2.1 width() 2.2 innerWidth()与outerWidth() 3.offset()与position() 3.1 取值对比 3.2 设置值对比 4.scrollLeft()与scrollTop() 4.1 取值 4.2 设置值 4.3 小demo 1.css()基本使用: 1.1 获取css属性 1.1.1 获取单个属性值(传入字符串)

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

    在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

    本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

随机推荐