bootstrap做搜索下啦窗

2013-09-25 20:33:00 weixin_34061555 阅读数 22
css里面添加

/** 自动弹出下拉菜单 **/
.dropdown-hover .dropdown-menu li:hover .submenu
{
visibility:visible
}
.dropdown-hover .dropdown:hover .dropdown-menu
{
display:block
}
一级ul里面含    <ul class="nav dropdown-hover">
含子菜单的li里面含   <li class="dropdown">
参考网站  http://idc.wopus.org/

html代码 

<div class="navbar ">
                
                    <div class="navbar-inner">
                    
                                
                                
<div class="nav-collapse">
    <ul class="nav dropdown-hover">
        <li class="active"><a href="./idc_files/idc.htm">首 页</a></li>
        <li class="dropdown">
            <a href="http://idc.wopus.org/host/"  >
                国内主机 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                
    <li>
        <a href="http://idc.wopus.org/host/ct/">电信主机</a>
    </li>

    <li>
        <a href="http://idc.wopus.org/host/yun/">多线主机</a>
    </li>

    <li>
        <a href="http://idc.wopus.org/host/netcn/">万网双线主机</a>
    </li>

    <li>
        <a href="http://idc.wopus.org/host/hk/">香港主机</a>
    </li>

            </ul>
        </li>
        <li class="dropdown">
            <a href="http://idc.wopus.org/foreign/" class="dropdown-toggle" data-toggle="dropdown">
                国外主机 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                
    <li>
        <a href="http://idc.wopus.org/foreign/vps/">VPS合租</a>
    </li>

    <li>
        <a href="http://idc.wopus.org/foreign/sin/">新加坡主机</a>
    </li>

    <li>
        <a href="http://idc.wopus.org/foreign/cp/">美国主机</a>
    </li>

            </ul>
        </li>






        <li class="dropdown">
            <a href="http://idc.wopus.org/domain/" class="dropdown-toggle" data-toggle="dropdown">
                域 名 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>
                    <a href="http://idc.wopus.org/domain/">域名注册</a>
                </li>
                <li>
                    <a href="http://idc.wopus.org/domain/price/">域名价格</a>
                </li>
                <li>
                    <a href="http://i.wopus.org/idc/domain/">域名管理</a>
                </li>
            </ul>
        </li>
        <li><a href="http://idc.wopus.org/article/">公 告</a></li>
        <li><a href="http://help.wopus.org/" target="_blank">主机帮助</a></li>
        
    </ul>
</div>

                            </div>
                        </div>

转载于:https://my.oschina.net/xiaons/blog/164212

2016-08-16 09:51:10 wuhawang 阅读数 45858

在项目开发过程中,我们或多或少都会使用到搜索选项,

那么如何制作一个标准,好看的搜索框呢,这里推荐bootstrap自带的一个控件-input-group

这个控件在bootstrap中文网上没有说明,所以需要去看官方的文档,地址在

input-group

先简单看下对于这个控件官方的说明

Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Contents
    Basic example
    Sizing
    Checkboxes and radio addons
    Button addons
    Buttons with dropdowns
    Segmented buttons
    Accessibility

意思就是针对我们平常使用的表单提交功能,可以添加按钮,文本到输入栏的两边的位置,其实很简单

下面的Contents的七个内容就是他能实现的几个基本功能,这里我们关注第四个button addons就可以了,其它的如果有兴趣可以自行学习

Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, 
you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
上面一段话就是指,在input groups里面的button和普通的不一样,他需要一个不一样的嵌套层次.其实简单来说,就是我们不再使用input-group-addon,而使用

input-group-btn来管理按钮.我给出的demo代码如下所示

<div class="input-group col-md-3" style="margin-top:0px positon:relative">
       <input type="text" class="form-control"placeholder="请输入字段名" / >
            <span class="input-group-btn">
               <button class="btn btn-info btn-search">查找</button>
               <button class="btn btn-info btn-search" style="margin-left:3px">添加</button>
            </span>
 </div>
最后出现的效果如下所示

这样就很完美的显示出了搜索栏的选项,且风格保持了一致


2018-02-01 16:47:57 qq_40646143 阅读数 21095

今天学了bootstrap由于官网上没有搜索框,我要做一个网站正好需要,我就自己做了一个搜索框,话不多说直接上代码

下面是jsp代码

<div class="col-sm-5" id="so">
             <div class="input-group">
                 <input type="text" class="form-control" onkeydown="onKeyDown(event)"/>
                 <span class="input-group-addon"><a href="#"><i class="glyphicon glyphicon-search"> <span >搜索   </span></i></a></span>
             </div>
</div> 
<script type="text/javascript">
	/* 搜索框  */
	    function onKeyDown(event){
            var e = event || window.event || arguments.callee.caller.arguments[0];
                 if(e && e.keyCode==27){ // 按 Esc 
                     //要做的事情
                     alert("你按下了Esc");
                 }
                 if(e && e.keyCode==113){ // 按 F2 
                      //要做的事情
                	 alert("你按下了F2");
                 }            
                 if(e && e.keyCode==13){ // enter 键
                      alert("此处回车触发搜索事件");
                 }
                 
             }
<script>

这样就创建了一个搜索框,今天写前端遇到的问题比较多 下面来写一下 加深一下印象,首先


 1.是利用js来接受Action页面map保存的K值,我通过判断k值是否为空,来选择隐藏用户名,如果k值保存的有对象则

显示用户名,隐藏账户登录和注册.

js利用EL来获取k值 判断k值是否为空 下面是代码

action页面

//保存用户名
	ActionContext.getContext().put("name",userBean.getU_name());
jsp页面
	/* 账户隐藏 */
 		var name="${name }";
		if(!$.trim(name)){
			//隐藏用户名称为空
			$("#name1").hide();
		}else{
			// 隐藏登录 注册
			$("#name").hide();
	}

html代码

   <!-- 如果名称为空 显示登录 否则显示账户名称 -->
   <div id="name">
      <ul class="nav navbar-nav navbar-right">
            <li><a href="Logindeng"><span class="font">Hi,请  登录</span></a></li>
             <li><a href="InsertUs"><span></span>注册</a></li>
             </ul>
             </div>
            <div id="name1">
             <ul class="nav navbar-nav navbar-right">
             <li><a href="#"><span class="font">Hi , ${name }</span></a></li>
             </ul>
     </div>


注意的是:  js代码需要放在html下面才能有隐藏div的效果.


消除俩个div之间的空隙差不多20的宽度 一直消不掉,需要加一句

<style type="text/css">
 *{margin:0px;padding:0px}
<style>
如果还是去不掉div之间的空隙 需要在div标签里添加
margin:0px;padding:0px



2016-03-28 17:03:53 xb12369 阅读数 95672

之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索



心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js



不区分大小写,模糊匹配,哈哈,太棒了~~




具体用法:

<script type="text/javascript" src="<%=basePath%>/js/commons/jquery.min.js"></script>


<script type="text/javascript" src="${basePath}/js/silviomoreto-bootstrap/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/js/silviomoreto-bootstrap/bootstrap-select.css">

<!-- 3.0 -->
<link href="${basePath}/js/silviomoreto-bootstrap/bootstrap.min.css" rel="stylesheet">
<script src="${basePath}/js/silviomoreto-bootstrap/bootstrap.min.js"></script>
初始化一下:

$(window).on('load', function () {

    $('.selectpicker').selectpicker({
        'selectedText': 'cat'
    });

    // $('.selectpicker').selectpicker('hide');
});


关键代码是class和后面是否支持搜索
<select id="bs3Select" class="selectpicker show-tick form-control" multiple data-live-search="true">
                        <option>cow</option>
                        <option>bull</option>
                        <option class="get-class" disabled>ox</option>
                       
                    </select>


后面上css和js,今天公司网络不好,不好上传~



========================================老司机开车了=======================================================

源代码,直接复制就可以运行!!!

<!DOCTYPE html>
<html>
<head>
    <title>jQuery bootstrap-select可搜索多选下拉列表插件-www.daimajiayuan.com</title>
    <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js"></script>  
	<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css">  
  


    <!-- 3.0 -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <!-- 2.3.2
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
    -->
    <script type="text/javascript">
        $(window).on('load', function () {

            $('.selectpicker').selectpicker({
                'selectedText': 'cat'
            });

            // $('.selectpicker').selectpicker('hide');
        });
    </script>
</head>
<body>
    <label for="id_select">Test label YEag</label>
    <select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">
        <option>cow</option>
        <option>bull</option>
        <option class="get-class" disabled>ox</option>
        <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
            <option>ASD</option>
            <option selected>Bla</option>
            <option>Ble</option>
        </optgroup>
    </select>

    <div class="container">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="bs3Select" class="col-lg-2 control-label">Test bootstrap 3 form</label>
                <div class="col-lg-10">
                    <select id="bs3Select" class="selectpicker show-tick form-control" multiple data-live-search="true">
                        <option>cow</option>
                        <option>bull</option>
                        <option class="get-class" disabled>ox</option>
                        <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
                            <option>ASD</option>
                            <option selected>Bla</option>
                            <option>Ble</option>
                        </optgroup>
                    </select>
                </div>
              </div>
        <form>
    </div>

</body>
</html>
相关bootstrap-select的js,css在http://www.bootcdn.cn/bootstrap-select/





没有更多推荐了,返回首页