`
leon1509
  • 浏览: 533253 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Bootstrap下拉菜单美化插件

jquerybootstrap 
阅读更多 



        <!doctype html>
        <html>
        <head>
          <meta charset=utf-8>
          <title>SelectBoxIt demo</title>
          <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
          <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
          <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
          <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.4.0/jquery.selectBoxIt.css" />
        </head>
        <body>

          <!-- <select id="test" name="test">
            <option value="SelectBoxIt is:">SelectBoxIt is:</option>
            <option value="a jQuery Plugin"><i class="icon-help"></i>a jQuery Plugin</option>
            <option value="a Select Box Replacement" data-icon="icon-hand-down">a Select Box Replacement</option>
            <option value="a Stateful UI Widget"><i class="icon-user"></i>sa Stateful UI Widget</option>
          </select> -->
<select>
    <option value="SelectBoxIt themes:" data-iconurl="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/256/themes-icon.png">
    请选择主题：
    </option>
    <option value="Twitter Bootstrap" data-iconurl="http://blog.getbootstrap.com/public/ico/apple-touch-icon-144-precomposed.png">
    Twitter Bootstrap
    </option>
    <option value="jQuery UI" data-iconurl="http://c747925.r25.cf2.rackcdn.com/blog/wp-content/uploads/2010/09/jquery-ui-logo.png">
    jQuery UI
    </option>
    <option value="jQuery Mobile" data-iconurl="https://twimg0-a.akamaihd.net/profile_images/2633978789/80508321d8ce3ba8aa264380bb7eba33.png">
    jQuery Mobile
    </option>
  </select>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
          <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.4.0/jquery.selectBoxIt.min.js"></script>
          <script>
            $(function() {

			$("select").selectBoxIt({

				// Uses the jQuery 'fadeIn' effect when opening the drop down
				showEffect: "fadeIn",

				// Sets the jQuery 'fadeIn' effect speed to 400 milleseconds
				showEffectSpeed: 400,

				// Uses the jQuery 'fadeOut' effect when closing the drop down
				hideEffect: "fadeOut",

				// Sets the jQuery 'fadeOut' effect speed to 400 milleseconds
				hideEffectSpeed: 400,
				theme: "jquerymobile" 
			  });
            });
          </script>
        </body>
        </html>
  • 大小: 9.8 KB
分享到：
| 让一些HTML元素产生滚动条
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    bootstrap下拉选插件

    总的来说，Bootstrap下拉选插件是提升网站用户体验的一个强大工具，它可以为你的网页带来专业且易于使用的下拉菜单，同时避免了切换选项时可能出现的交互问题。在实际开发中，根据具体需求调整配置和样式，能进一步...

    bootstrap下拉列表美化

    通过以上方法，我们可以实现Bootstrap下拉列表的个性化美化。记住，尽管样式调整能够使界面更具吸引力，但也要确保其易用性和可访问性，遵循Web设计的最佳实践。 当然，实际的美化工作可能会涉及到更多细节，例如...

    ASP.NETselect下拉菜单美化

    ASP.NET中的下拉菜单美化是Web开发中一个常见的需求，特别是在构建用户友好的交互界面时。这个主题通常涉及HTML `&lt;select&gt;`元素与CSS样式及JavaScript的结合，以提供美观且功能丰富的选择器。在这个"ASP.NET select...

    bootstrap下拉框菜单多选插件

    在Bootstrap中，下拉框（Dropdown）是一种常见的交互元素，而下拉框菜单多选插件则进一步增强了用户的选择功能，允许用户在一个下拉菜单中选择多个选项。这个插件对于需要用户进行多项选择的场景非常实用，比如在...

    Bootstrap鼠标右键下拉菜单特效.zip

    Bootstrap鼠标右键下拉菜单特效.zip是一个包含jQuery代码和相关资源的压缩包，旨在为开发者提供一种实现鼠标右键点击时出现下拉菜单的交互效果。这个特效在网页设计和开发中十分常见，能增强用户体验，特别是在需要...

    Bootstrap树形菜单JS代码特效

    Bootstrap的JavaScript插件（位于`js`目录）负责处理菜单的交互，比如下拉菜单的展开和关闭。通常，我们通过引入`bootstrap.bundle.min.js`文件，其中包含了jQuery和所有Bootstrap插件。下拉菜单的展开和关闭是通过...

    js,下拉菜单

    在工具方面，开发者可以利用各种框架和库来简化下拉菜单的开发，例如Bootstrap的`&lt;select&gt;`插件，它提供了预定义的样式和行为。另外，一些JavaScript库如jQuery、Vue.js或React也提供了方便的方法来处理下拉菜单，让...

    pretty-dropdowns-master_dropdown_bootstrap_Pretty_prettymaster_j

    "Pretty Jquery Bootstrap Dropdown"正是为了解决这一需求而设计的，它是一个专门用于美化Bootstrap下拉菜单的jQuery插件，旨在让网站的交互更加美观、用户友好。 Bootstrap的默认下拉菜单虽然实用，但在视觉效果上...

    下拉菜单BootstrapDropdownHover.zip

    Bootstrap Dropdown Hover 是一个简单的插件，它能打开 Bootstrap 下拉菜单。 标签：Bootstrap

    基于Twitter Bootstrap 3的炫酷jQuery下拉列表插件

    metisMenu是一款基于Twitter Bootstrap 3的炫酷jQuery下拉列表插件。该下拉列表插件在原生bootstrap下拉列表的基础上进行了美化，使其支持多级下拉菜单、列表树和鼠标滑过展开等特效。

    jQuery多级下拉select选择菜单插件

    `css`文件夹包含了用于美化插件的样式表，可能包含`.css`文件或预处理器（如Sass或Less）的源代码。`images`文件夹则可能包含必要的图标和其他图像资源。`lib`文件夹可能包含插件的JavaScript文件和其他依赖库。 要...

    bootstrap多级导航菜单代码.zip

    2. **下拉菜单（Dropdowns）**：Bootstrap的下拉菜单是实现多级导航的关键，它可以容纳多个子菜单项。通过添加`.dropdown`类和相关的HTML结构，可以轻松创建一个下拉菜单。例如，使用`.dropdown-menu`类定义下拉菜单...

    几款极好的 JavaScript 下拉列表插件

    - **功能介绍**：FancySelect 是一个流行的下拉列表美化插件，它提供了自定义样式和增强的交互性，如搜索过滤、多选支持、动画效果等。 - **使用方法**：通常，通过引入 CSS 和 JS 文件，然后调用相应的初始化函数...

    带复选框的下拉菜单

    可以使用其自定义的下拉菜单插件，配合JavaScript扩展，实现带复选框的下拉菜单。 - **PrimeFaces** 或 **Vaadin**：这两个都是针对Java的UI组件库，它们提供现成的带复选框的下拉菜单组件，可以简化开发过程。 4....

    Bootstrap4导航菜单sina-nav

    该插件允许开发者创建下拉菜单，这是一种常见的交互方式，当用户点击一个菜单项时，会显示一组相关的链接或操作。大型菜单则适用于展示更多信息，如图片、简介或详细信息，通常在屏幕空间充足时使用。属性菜单则允许...

    jQuery简洁下拉菜单导航

    **jQuery简洁下拉菜单导航详解** 在Web开发中，用户友好的导航菜单是任何网站成功的关键因素之一。jQuery，一个轻量级、高性能的JavaScript库，提供了丰富的功能，使得创建动态、交互式的下拉菜单变得异常简单。本...

    bootstrap兼容电脑手机端多级导航菜单特效

    Bootstrap的导航菜单（Navbar）是一个可折叠的头部组件，它包含了品牌标识、导航链接、表单、按钮和下拉菜单等元素。在响应式设计中，当屏幕尺寸变小到一定程度时，菜单会折叠成一个汉堡图标，用户点击后会展开，...

    jQuery下拉搜索菜单选择插件

    2. **CSS样式**：使用Bootstrap的CSS类来美化元素，如`btn`用于按钮样式，`dropdown`和`dropdown-menu`用于下拉菜单的显示和隐藏。 3. **jQuery初始化**：在文档加载完成后，使用jQuery选择器找到相关的DOM元素，...

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

    Bootstrap下拉分页样式结合跳转页码是前端开发中常用于列表数据分页显示的技术。它允许用户在浏览大量数据时通过分页功能快速定位到特定页面，而下拉菜单则提供了每页显示数据条数的选择，使得页面显示更加灵活。...

    基于Bootstrap的CSS3菜单.zip

    在Bootstrap中，JavaScript插件通常依赖于jQuery，它们可以通过数据属性（data attributes）和JavaScript方法触发，例如，通过添加"data-toggle='dropdown'"激活下拉菜单。 在"压缩包子文件的文件名称列表"中，我们...

Magicbox
Global site tag (gtag.js) - Google Analytics