[Tự làm] Tìm kiếm nhanh với công cụ tìm kiếm của forumotion

  Bài viết hay nhất1
Demo: http://fcatest4.forumvi.com/ Nhập từ khóa bất kì trong khung ở thanh nav rồi nhấn cái nút be bé xinh xinh bên cạnh
Cái này méo đã thử ở Invision, một số phiên bản khác chắc cũng thế =))

Thêm ở đâu đó trong Overall_Header
Code:
<div class="finding">
    <form action="/search?mode=results" method="get" name="searchform">
      <input type="text" name="search_keywords" style="width: 270px;" id="keyfind" required/>
      <input type="hidden" name="google" value=""/>
      <input id="clicktofind" type="submit" value="" onclick="document.searchform.google.value='';" class="button"/>
    </form>
</div>
<div class="showmyfind">Từ khóa đã tìm: <span class="key"></span>
  <div class="showfind"></div>
</div>
<div class="closefind"></div>

Thêm vào CSS:
Code:
/* Search */
.finding {padding: 12px;background: #fff;position:fixed;bottom:0;right:20px}
.showmyfind {display:none;text-align: center;position: fixed;width: 90%;height: 80%;background: #fff;top: 10%;left: 5%;box-shadow: 0 0 10px;padding:10px}
.closefind {display:none;background: url(http://www.iconsdb.com/icons/preview/black/close-window-m.png) center no-repeat;width: 40px;height: 40px;position: fixed;right: 0;top: 0;cursor: pointer;}
.showmyfind .msg {padding: 10px;background: #fff;border: 1px solid #d7d7d7;}
.showmyfind .showfind {text-align: left;margin-top: 10px;}

Thêm vào cuối Overall_Footer_End
Code:
<script>
  $(function(){
    $('.finding #clicktofind').click(function(stop){
      stop.preventDefault();
      $('.showmyfind').delay(800).fadeIn(250);
      $('.closefind').show();
      kword = $('.finding #keyfind').val();
      $('.showmyfind .key').text(kword);
      $('.showfind').load('/search?search_keywords='+kword+' .borderwrap');
    });
    $('.closefind').click(function(){
      $('.showmyfind').delay(0).fadeOut(250);
      $(this).hide();
    });
  });
</script>
  Bài viết hay nhất2
delay(0) để làm gì ko biết -_-
Code khá, chạy tốt, hoàn thành nhiệm vụ. Giờ là lúc cần tối ưu code, thêm hiệu ứng màu mè :3

Góp ý: Cấu trúc HTML chưa rõ ràng nên làm cho code javascript dài dòng hơn. Vì thế cần đặt các thành phần vào một khối chung và đặt lại tên rõ ràng để tiện sửa chửa, phát triển sau này, ví dụ: finding_overlay, finding_search, finding_result... Nên bổ sung overlay để không click nhầm vào các thành phần khác và thêm hiệu ứng loading và hiển thị kết quả sau khi tải xong hay vì dùng delay.
  Bài viết hay nhất3
Là key ESC tắt luôn méo ơi :d
  Bài viết hay nhất4
Không ném đá hội nghị!
  Bài viết hay nhất5
Zzbaivong wrote:Góp ý: Cấu trúc HTML chưa rõ ràng nên làm cho code javascript dài dòng hơn. Vì thế cần đặt các thành phần vào một khối chung và đặt lại tên rõ ràng để tiện sửa chửa, phát triển sau này, ví dụ: finding_overlay, finding_search, finding_result... Nên bổ sung overlay để không click nhầm vào các thành phần khác và thêm hiệu ứng loading và hiển thị kết quả sau khi tải xong hay vì dùng delay.

Về phần đặt tên thì từ từ méo sửa
Về phần overlay thì rồi méo sẽ thêm
Hiệu ứng loading theo kết quả méo còn chẳng biết làm -_-
  Bài viết hay nhất6
You cannot reply to topics in this forum