利用jquery實現搜索框效果safari瀏覽器



16 63 22



特效描述:利用jquery實現 搜索框效果 safari瀏覽器,利用jquery實現搜索框效果safari瀏覽器

代碼結構

1. 引入CSS

<link rel="stylesheet" href="./stylesheets/j-searcher.css" type="text/css" media="screen">
<link rel="stylesheet" href="./stylesheets/j-searcher.ie.css" type="text/css" media="screen">
<link rel="stylesheet" href="./stylesheets/j-searcher.ie6.css" type="text/css" media="screen">

2. 引入JS

<script src="./javascripts/global/inheritance.js" type="text/javascript" charset="utf-8"></script>
<script src="./javascripts/global/templating.js" type="text/javascript" charset="utf-8"></script>
<script src="./javascripts/jquery.core-1.3.2.js" type="text/javascript" charset="utf-8"></script>
<script src="./javascripts/jquery.dependClass.js" type="text/javascript" charset="utf-8"></script>
<script src="./javascripts/jquery.searcher.js" type="text/javascript" charset="utf-8"></script>

3. HTML代碼

  <div class="layout">
    <h3>Simple search:</h3>
    <div class="searcher-container" style="width: 200px">
      <input id="SimpleSearcher" type="search" placeholder="Search" autocomplete="off" />
    </div>
    <script type="text/javascript" charset="utf-8">
      $("#SimpleSearcher").searcher();
    </script>
    <p>
<pre>
&lt;div style="width: 200px"&gt; <span class="comment">&larr; Define searcher width by setting width to parent node.</span>
  &lt;input id="SimpleSearcher"
    type="search"
    placeholder="Search"
    autocomplete="off"
  /&gt;
&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
  $("#SimpleSearcher").searcher();
&lt;/script&gt;
</pre>
    </p>
    <br/>
    <h3>Incremental search:</h3>
    <div class="searcher-container" style="width: 200px">
      <input id="IncrementalSearcher" type="search" placeholder="Search" incremental="yes" onsearch="onSearchHandler.apply(this, arguments)" autocomplete="off" />
    </div>
    <script type="text/javascript" charset="utf-8">
      $("#IncrementalSearcher").searcher();
      function onSearchHandler(){
        this.loading(true);
        /* AJAX or simple JavaScript actions */
      }
    </script>
    <p>
<pre>
&lt;div style="width: 200px"&gt;
  &lt;input id="IncrementalSearcher"
    type="search"
    placeholder="Search"
    autocomplete="off"
    <strong>incremental=</strong>"yes"
    <strong>onsearch=</strong>"onSearchHandler.apply(this, arguments)"
  /&gt;
&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
  $("#IncrementalSearcher").searcher();
  function onSearchHandler(){
    this.loading(true);
    <span class="comment">/* AJAX or simple JavaScript actions */</span>
  }
&lt;/script&gt;
</pre>
    </p>
    <br/>
    <h3>Getting Search Object</h3>
    <p>
<pre>
&lt;script type="text/javascript" charset="utf-8"&gt;
  $("#IncrementalSearcher").data("SearchHandler")<span class="comment">.onsearch = function(){ /* whatever */ };</span>
&lt;/script&gt;
</pre>
    </p>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框 搜索框
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表