Bootstrap下拉菜单美化插件

最新推荐文章于 2022-06-06 23:25:30 发布

Leon1509

最新推荐文章于 2022-06-06 23:25:30 发布

阅读量415

点赞数

分类专栏： jQuery Bootstrap 文章标签： jquery bootstrap ViewUI

本文链接：https://blog.csdn.net/Leon1509/article/details/84428312

版权

jQuery 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Bootstrap

1 篇文章 0 订阅

订阅专栏

[img]http://dl2.iteye.com/upload/attachment/0096/4631/8ff417b1-b571-3432-b7b1-63457b09f9db.jpg[/img]


        <!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>