1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery教學-打造一個屬於自已的搜尋網

jQuery教學-打造一個屬於自已的搜尋網

2009/06/14

梅問題-教學網-cookie加iframe跨網域自動延展

  趁這一個假日閒來無事,梅干又開始胡搞蝦搞,將先前的搜尋網重整一下讓它再度亮相,但其實那並不是重點,重點在於先前梅干曾分享過iframe跨網域自動長高,由於抓到高度後,會自動將值POST出來,這時候網頁就會重新整理,所以無論是頁籤還是所輸入的關鍵字都會不見,這時就想到先前在男丁老師上課的範例中,有提到jQuery的cookie外掛模組,因此梅干就想說,那就來給它整合看看,哈~果真成功了,搜尋完網頁重整後,便會再把值再傳回輸入框中,另外有人可能也會覺得很納悶為何要作此搜尋網,呵~其實一部分是為了滿足梅干的小夢想,能擁有一個屬於自已版面的搜尋網,另一方面是希望各位能在梅問題中,除了找尋相關教學工具外,同時還可以直接查尋一些資料,且不用再切換到搜尋網去,直接梅問題的網站中就可完成這些動作,梅干是覺得蠻好玩的,有興趣的朋友們不坊坊可玩玩看喔!


放在<head>…..</head>之間:

<script type=“text/javascript” src=“js/jquery.js”></script>
<script type=“text/javascript” src=“js/jquery.cookie.js”></script><!– jQuery cookie模組 –>
<script type=“text/javascript”>
    $(function(){
        //新增一個addCookie變數名稱來存放cookie
        var addCookie = $.cookie(‘addCookie’);
        //當cookie不等於空時,就將cookie alert出來
        if(addCookie!=null){alert(“剛所新增的Cookie值為:”+addCookie);}
        //當滑鼠按下時,將input值寫到cookie中
        $(“#btn”).click(function(){
            var cookie = $(“#sbi:text[name=q]“).val();
            $.cookie(‘addCookie’, cookie);
            alert(“cookie新增成功,請重新整理網頁,測試剛所新增的cookie值”);
}); }); </script>

放在<body>…..</body>之間:

<form id=“myform”>
    <input type=“text” name=“q” size=“39” style=“width:300px;” maxlength=“255” id=“sbi” value=“”/>
    <input type=“button” name=“button” id=“btn” value=“新增cookie值” />
</form>

※參考相關教學文章:iframe跨網域依內容自動延展高度


[範例預覽1] [範例預覽2] [範例下載]