Позиционирование с помощью механизма проверки jQuery

Я использую плагин под названием jQuery Validation Engine, и у меня серьезные проблемы с поиском поддержки для моей проблемы.

Движок в основном создает всплывающую подсказку в моей форме, когда поле остается пустым. У меня все исправно работает, просто пытаюсь правильно позиционировать.

Скрипка JS, показывающая код формы и встроенный скрипт, полные файлы JS и CSS связаны в JSFiddle

Плагин можно найти здесь . jQuery можно найти здесь (через сайт, на котором я его использую), а также здесь. Файл CSS можно найти здесь.

В документации указано, что вы можете позиционировать, используя некоторые предустановленные значения (верхний правый, нижний правый, верхний левый и т. Д.). Я использую topRight.

По сути, мне нужно решить, как немного сместить позиционирование. Позиционирование работает правильно, но из-за того, что на моем графике стрелка в центре была изменена, это выглядит неправильно.

Я изо всех сил пытаюсь выяснить, как устанавливается свойство topRight и как я могу подтолкнуть его на несколько пикселей, чтобы привести его в нужное положение.

Может ли кто-нибудь, у кого глаз немного лучше, увидеть, могут ли они указать мне правильное направление?


jquery jquery-validation-engine
person Francesca    schedule 07.09.2012    source источник
comment
Не могли бы вы создать jsfiddle, который показывает минимальную версию вашей проблемы? Это может облегчить людям помощь / понимание того, что вам нужно.   -  person Logard    schedule 08.09.2012
comment
Привет, попробую что-нибудь собрать. Дело в том, что я знаю, что позиционирование будет где-то в одном из этих файлов, я просто не могу его найти, поэтому я опубликовал все это, потому что я не знаю, какие биты опустить, а какие оставить.   -  person Francesca    schedule 08.09.2012
comment
Я добавил скрипт JS, показывающий часть кода, но я не могу сделать то же самое для других файлов, потому что я не знаю, что пропустить, и именно там будет решение ... Я просто могу не найду.   -  person Francesca    schedule 08.09.2012

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, что div всплывающей подсказки контролируется этим классом в css:

(Находится по адресу: http://www.position-relative.net/creation/formValidator/css/validationEngine.jquery.css или ваш местный аналог.)

.formError .formErrorContent {
    width: 100%;
    background: #ee0101;
    position:relative;
    color: #fff;
    width: 150px;
    font-size: 11px;
    border: 2px solid #ddd;
    box-shadow: 0 0 6px #000;
    -moz-box-shadow: 0 0 6px #000;
    -webkit-box-shadow: 0 0 6px #000;
    padding: 4px 10px 4px 10px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

Переопределение значений в этом классе css своими собственными должно позволить вам делать почти все, что вы хотите, с помощью всплывающей подсказки: цвет, позиционирование и тому подобное. Например: решение вашей проблемы с позиционированием может быть выполнено с помощью добавления полей в переопределение (селектор оверидинга можно изменить, если он не соответствует вашим потребностям):

 fieldset .formError .formErrorContent {
    margin-bottom: 10px;
}

Это переместит всю всплывающую подсказку на 10 пикселей вверх.

Надеюсь, это поможет решить вашу проблему!

person Logard    schedule 07.09.2012