#javascript #jquery
#javascript #jquery
Вопрос:
Я пытаюсь реализовать jQuery Font Selector в своем проекте, но у меня возникают некоторые проблемы с его достижением. Я использую исходный код, который я нашел здесь, jQuery Font Selector Вы можете посмотреть демо здесь
Все работает отлично, за исключением того, что автор этого кода не включил функцию, которая закрывает «меню прокрутки», если мы нажмем в другом месте экрана. Вы вынуждены выбрать что-то внутри этого списка, чтобы этот список закрылся.
Я собираюсь вставить код сюда, чтобы его было легче объяснить.
/**
* Font selector plugin
*/
jQuery.fn.fontSelector = function() {
var fonts = new Array(
'Arial,Arial,Helvetica,sans-serif',
'Arial Black,Arial Black,Gadget,sans-serif',
/* other fonts */);
return this.each(function(){
// Get input field
var sel = this;
// Add a ul to hold fonts
var ul = $('<ul class="fontselector"></ul>');
$('body').prepend(ul);
$(ul).hide();
jQuery.each(fonts, function(i, item) {
$(ul).append('<li><a href="#" class="font_' i '" style="font-family: ' item '">' item.split(',')[0] '</a></li>');
// Prevent real select from working
$(sel).focus(function(ev) {
ev.preventDefault();
// Show font list
$(ul).show();
// Position font list
$(ul).css({ top: $(sel).offset().top $(sel).height() 4,
left: $(sel).offset().left});
// Blur field
$(this).blur();
return false;
});
$(ul).find('a').click(function() {
var font = fonts[$(this).attr('class').split('_')[1]];
$(sel).val(font);
$(ul).hide();
return false;
});
});
});
}
Отсюда я попытался изменить код, например, добавить $(ul).hide();
внутрь функции размытия… Работает, НО я не хочу, чтобы ввод можно было редактировать вручную. Я не хочу, чтобы пользователь мог изменять содержимое входных данных, кроме как путем выбора шрифта.
Я надеюсь, вас не смущает то, о чем я спрашиваю!
Спасибо за вашу помощь
Ответ №1:
РЕДАКТИРОВАТЬ: некоторые изменения после обсуждения:
Добавьте следующее внутри jQuery.fn.fontSelector = function() {
$("body").click(function(){
$(".fontselector").hide();
});
Изменить $(sel).focus
на
$(sel).click(function(ev) {
и добавьте следующее в $(ul).find('a').click(function(ev) {
ev.stopPropagation();
Комментарии:
1. Куда именно я должен поместить этот код? Внутри
$(sel).focus(...)
? Потому что происходит то, что список отображается и немедленно скрывается.2. вторая часть должна быть внутри
$(ul).find('a').click(function() {
, а первая часть должна быть вне любого другого материала.3. если вы можете поместить свой код в jsfiddle (jsfiddle.net ) Я поиграю с этим и посмотрю, смогу ли я найти, что не так.
4. Я поместил свой код сюда: jsfiddle.net/ahkEv/1 — Я пытаюсь заставить jQuery работать с Fiddle, но в основном там мой код. Еще раз спасибо