[Javascript] Tùy chọn cho thanh Tìm kiếm
Trang 1 trong tổng số 1 trang • Share
[Javascript] Tùy chọn cho thanh Tìm kiếm
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>');
HelpsFMvi- Ban Quản Trị FMvi
- Số bài : 104
HelpsPoints : 15273
Likes : 33
Ngày tham gia : 10/03/2016
Trạng thái :Online Offline
Tuổi : 26
Location : Ninh Thuận
[Click để xem tài sản HelpsFMvi]
Similar topics
» [Javascript] Công cụ tìm kiếm thành viên theo chữ cái
» [Javascript] Cấm thành viên nhanh Ver 2.0
» [Javascript] Cấm thành viên nhanh Ver 1.0
» [Javascript] Ẩn thông tin các thành viên bị cấm
» [Javascript] Widget: Thống kê thành viên
» [Javascript] Cấm thành viên nhanh Ver 2.0
» [Javascript] Cấm thành viên nhanh Ver 1.0
» [Javascript] Ẩn thông tin các thành viên bị cấm
» [Javascript] Widget: Thống kê thành viên
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|