今天學了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標籤裡新增