Подход «Не повторяйся» к меню jQuery - PullRequest
Новая
       13

Подход «Не повторяйся» к меню jQuery

1 голос
/ 28 февраля 2012

У меня есть форма с несколькими входами. Когда щелкают эти входные данные, в раскрывающемся списке исчезновения загружается дополнение выбора цвета для jquery (farbtastic).

Каждый вход уникален и каждый раз будет загружать различную палитру цветов. Код, который я использую для этого: 

// Color Picker Popup Menus
$('html, #mgBgColor, input').click(function() { 
    $('#picker-mgBgColor').fadeOut('fast'); 
});

$('#mgBgColor, #picker-mgBgColor').click(function(e){ 
    if(!$('#picker-mgBgColor').is(":visible")) { 
        $('#picker-mgBgColor').stop().fadeIn('fast'); 
    }
    e.stopPropagation(); 
});

#mgBgColor - идентификатор конкретного поля ввода.

#picker-mgBgColor - это идентификатор, вызывающий палитру цветов

HTML: 

<p>
    <label for="bg">BG color:</label>
    <input type="input" id="mgBgColor" name="bg" value="" />    
    <span id="picker-mgBgColor"></span>
</p>
<p>
<label for="textcolor">Text color:</label>
    <input type="input" id="mgTextColor" name="textcolor" value="" />
    <span id="picker-mgTextColor"></span>   
</p>

Моя проблема в том, что я повторяю этот большой кусок кода для нескольких различных полей ввода. Как мне кодировать только одно выпадающее меню, которое работает для всех идентификаторов палитры цветов?

Ответы [ 3 ]

3 голосов
/ 28 февраля 2012

Сначала добавьте классы к каждому типу элемента, чтобы сгруппировать их вместе: 

               <p>
                    <label for="bg">BG color:</label>
                    <input class="input-class" type="input" id="mgBgColor" name="bg" value="" />    
                    <span class="picker" id="picker-mgBgColor"></span>
                </p>
                <p>
                    <label for="textcolor">Text color:</label>
                    <input class="input-class" type="input" id="mgTextColor" name="textcolor" value="" />
                    <span class="picker" id="picker-mgTextColor"></span>   
                </p>

Затем вы можете нацелить элементы по следующим классам: 

$('html, .input-class, input').click(function() { 
    $('.picker').fadeOut('fast'); 
});

$('.input-class').click(function(e){ 
    if(!$(this).next().is(":visible")) { 
        $(this).next().stop().fadeIn('fast'); 
    }
    e.stopPropagation(); 
});

$('.picker').click(function(e){ 
    $(this).fadeOut('fast');
    e.stopPropagation(); 
});​

Вот демоверсия: http://jsfiddle.net/jasper/xW2g6/

0 голосов
/ 28 февраля 2012

Используйте функцию 

function ConfigurePicker(picker) {    
    $('html, #mgBgColor, input').click(function() { 
        picker.fadeOut('fast'); 
    });

    picker.click(function(e){ 
        if(!picker.is(":visible")) { 
            picker.stop().fadeIn('fast'); 
        }
        e.stopPropagation(); 
    });
};

Использование: 

var picker = $('#mgBgColor, #picker-mgBgColor');
ConfigurePicker(picker);

Таким образом, вы СУХОЙ и не выполняете один и тот же селектор столько раз, что вам также следует попробоватьизбежать.

0 голосов
/ 28 февраля 2012

Я не использовал farbtastic, но общий способ сделать это - использовать классы, а не идентификаторы. У вас будет какой-то класс многократного использования "colorPickable" или как вы хотите его называть. Затем вы пройдете через DOM, чтобы ограничить себя определенным набором элементов, на которые вы хотите воздействовать.

API для обхода DOM довольно богат, но краткий список методов для поиска будет включать .siblings(), '.closest(), .parent(), .next(), .prev(), .children() и .find(). Вам они не понадобятся, но без примера кода вашей структуры трудно сказать.

[обновление: я вижу, что пример HTML теперь включен, но другие люди уже работают с конкретными примерами кода, поэтому я оставлю их в покое ... хотя я думаю, что есть неправильное понимание ваших потребностей]

...