[Javascript] Tùy chọn cho thanh Tìm kiếm

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Yêu thích [Javascript] Tùy chọn cho thanh Tìm kiếm

Bài gửi by HelpsFMvi on Tue Jun 28, 2016 2:17 pm


Demo:


[You must be registered and logged in to see this image.]

Hướng dẫn:

1. ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Creat a new javascript:

- Title: Search Bar Option
- Placement: In all the pages
- Codes:
Code:
$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t493-search-bar-options#6588';
 
  // language config
  var lang = {
    display_as : '<b>Hiển thị kết quả như: </b>',
    posts : 'Bài viết',
    topics : 'Chủ đề',
    tags : '<b>Hashtags : </b>',
    advanced : '<b>Tùy chọn nâng cao</b>',
 
    options_title : 'Tùy chọn tìm kiếm'
  },
 
  // search options layout
  settings = $(
  '<div class="fa_search_options" style="display:none;">'+
 
    '<img class="fa_search_arrow" src="http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png" />'+ // arrow
 
    '<p>' + lang.display_as + '</p>'+
 
    '<p>'+
      '<input type="radio" name="show_results" value="posts"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.posts + '</label>'+
 
      '<input type="radio" name="show_results" value="topics" checked="true"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.topics + '</label>'+
    '</p>'+
 
    '<p>'+
      '<label onclick="this.nextSibling.checked = this.nextSibling.checked ? 0 : 1;">' + lang.tags + '</label>'+
      '<input type="checkbox" name="is_tag" value="tags"/>'+
    '</p>'+
 
    '<hr class="dashed"/>'+
 
    '<p>'+
      '<a href="/search">' + lang.advanced + '</a>'+
    '</p>'+
 
  '</div>'),
 
  // search options toggler
  cog = $('<a href="#" class="fa_search_cog" title="' + lang.options_title + '"><i class="fa fa-cog"></i></a>').click(function() {
    var settings = this.nextSibling,
        arrow = $('.fa_search_arrow', settings)[0];
 
    settings.style.display = /none/.test(settings.style.display) ? 'block' : 'none'; // toggle options display
 
    // popup position
    if (!arrow.style.right) {
      var width = this.getBoundingClientRect().width;
      arrow.style.right = width + 'px';
      settings.style.right = $(this).closest('form').find('input[type="submit"]')[0].getBoundingClientRect().width - width + 'px';
    }
 
    return false;
  }),
 
  search = $('form[action^="/search"]'), // all search forms
  i = 0, j = search.length, frag;
 
  // get fontawesome if unavailable
  if (!$('link[href$="font-awesome.min.css"]')[0]) {
    document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />');
  }
 
  for (; i < j; i++) {
    var keywords = search[i].search_keywords;
 
    if (keywords && search[i].name != 'searchform' && search[i].parentNode.id != 'search_menu') {
      frag = document.createDocumentFragment();
      frag.appendChild(cog.clone(true).attr('style', 'left:' + keywords.getBoundingClientRect().width + 'px;')[0]);
      frag.appendChild(settings.clone()[0]);
 
      search[i].className += ' fa_search_form';
      keywords.onfocus = function() {
        var settings = $(this).closest('form').find('.fa_search_options')[0];
        if (!/none/.test(settings.style.display)) settings.style.display = 'none';
      };
 
      search[i].appendChild(frag);
    }
  }
});
 
document.write('<style type="text/css">.fa_search_form{position:relative;display:inline-block;}a.fa_search_cog{color:#999;font-size:16px;position:absolute;margin-top:-8px;margin-left:-8px;top:50%}.fa_search_cog:hover{color:#69C}.fa_search_options{color:#333;font-size:12px;font-family:arial,sans-serif;text-align:center;background:#FFF;border:1px solid #DDD;border-radius:3px;box-shadow:0 3px 9px rgba(0,0,0,.175);position:absolute;top:100%;margin-top:15px;right:0;z-index:1;padding:3px;width:175px}.fa_search_options .fa_search_arrow{position:absolute;top:-10px;right:30px}.fa_search_options p{font-size:12px;margin:3px 0}.fa_search_options label{padding:0 6px 0 3px;vertical-align:middle;cursor:pointer}.fa_search_form input[type="text"] {padding-right:18px !important}</style>');

2. Tùy biến:

1. Ngôn ngữ:

Code:

  // language config
  var lang = {
    display_as : '<b>Hiển thị kết quả như: </b>',
    posts : 'Bài viết',
    topics : 'Chủ đề',
    tags : '<b>Hashtags : </b>',
    advanced : '<b>Tùy chọn nâng cao</b>',
 
    options_title : 'Tùy chọn tìm kiếm'
  },
 

2. Search Option POPUP:

Code:
 settings = $(
  '<div class="fa_search_options" style="display:none;">'+
 
    '<img class="fa_search_arrow" src="http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png" />'+ // arrow
 
    '<p>' + lang.display_as + '</p>'+
 
    '<p>'+
      '<input type="radio" name="show_results" value="posts"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.posts + '</label>'+
 
      '<input type="radio" name="show_results" value="topics" checked="true"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.topics + '</label>'+
    '</p>'+
 
    '<p>'+
      '<label onclick="this.nextSibling.checked = this.nextSibling.checked ? 0 : 1;">' + lang.tags + '</label>'+
      '<input type="checkbox" name="is_tag" value="tags"/>'+
    '</p>'+
 
    '<hr class="dashed"/>'+
 
    '<p>'+
      '<a href="/search">' + lang.advanced + '</a>'+
    '</p>'+
 
  '</div>'),

3. Theme:

Code:
document.write('<style type="text/css">.fa_search_form{position:relative;display:inline-block;}a.fa_search_cog{color:#999;font-size:16px;position:absolute;margin-top:-8px;top:50%}.fa_search_cog:hover{color:#69C}.fa_search_options{color:#333;font-size:12px;font-family:arial,sans-serif;text-align:center;background:#FFF;border:1px solid #DDD;border-radius:3px;box-shadow:0 3px 9px rgba(0,0,0,.175);position:absolute;top:100%;margin-top:15px;right:0;z-index:1;padding:3px;width:175px}.fa_search_options .fa_search_arrow{position:absolute;top:-10px;right:30px}.fa_search_options p{font-size:12px;margin:3px 0}.fa_search_options label{padding:0 6px 0 3px;vertical-align:middle;cursor:pointer}.fa_search_form input[type="text"] {padding-right:18px !important}</style>');



Cập nhật chữ ký !!

HelpsFMvi
Ban Quản Trị FMvi
Ban Quản Trị FMvi


Số bài : 96
HelpsPoints : 2354
Likes : 28
Ngày tham gia : 10/03/2016
Trạng thái :
Online
Offline

Tuổi : 19
Location : Ninh Thuận
Google Chrome
Phpbb3

[Click để xem tài sản HelpsFMvi]

Xem lý lịch thành viên http://helps.forumvi.com

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

- Similar topics

 
Permissions in this forum:
Bạn không có quyền trả lời bài viết
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Create a free blog
Stylish responsive footer | Script Tutorials