利用BootStrap創建搜索框--」詳解

今天學了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>    </span></i></a></span>
             </div>
</div> 

<script type="text/javascript">
	/* 搜索框  */
	    function onKeyDown(event){
                //執行搜索點擊事件
                 
             }
<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