VPF::jQuery: показ формы поиска при наведении

Gold Dragon

Дата 8.6.2013, 09:06 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

Суть в следующем. Есть кнопка. если на неё навести, должна появиться форма поиска (DIV) и поле INPUT получает фокус . Если убрать, то форма должна убраться через определённое время, но только при условии что поле INPUT пустое. Ну то есть никто не начал искать или вводить данные. При потере фокуса форма сразу закрывается..

Как такое реализовать?

--------------------

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

Gold Dragon

Дата 9.6.2013, 09:29 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

В общем вот собрал код в один файл..

Код


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <script src="../includes/js/jquery/jquery.js"></script>
    <style>
        .moduletable-search {
            background-color: #d1f093;
            padding: 15px;
            height: 60px;
            width: 300px;
            margin: 20px 0;
        }

        .moduletable-search input.inputbox-search {
            background-color: #f0f0f0;
            color: #666;
            border: 1px solid #0c7a09;
            padding: 5px 10px;
        }

        .moduletable-search input.inputbox-search:focus {
            border: 1px solid #5bc30a;
            background-color: #fff;
            color: #000;
        }

        .moduletable-search input.button-search {
            border: 1px solid #0c7a09;
            margin: 10px 0;
            padding: 1px 5px;
            border-radius: 5px;
            background-color: #018400;
            color: #f4f4f4;
        }

        .moduletable-search input.button-search:hover {
            background-color: #01a900;
            color: #fff;
        }
    </style>
</head>
<body>
<a class="mainlevel-2" title="Поиск" href="index.php?option=com_search">@@@</a>

<div id="tpl_search" style="display: none;">
    <div id="module_15" class="moduletable-search">
        <form method="post" action="index.php?option=com_search">
            <div class="search-search">
                <input type="text" value="" size="40" class="inputbox-search" alt="search" maxlength="100" id="mod_search_searchword" name="searchword">
                <br>
                <input type="submit" class="button-search" value="Поиск...">
            </div>
        </form>
    </div>
</div>
<script>
    $(function () {
        $(".mainlevel-2").mouseover(function () {
            $("#tpl_search").fadeIn().slideDown(300);
            $("#mod_search_searchword").focus();
            }).mouseout(function () {
                    setTimeout(function () {
                        if($.trim($("#mod_search_searchword").val() == '')){
                            $("#mod_search_searchword").val('');
                            $("#tpl_search").fadeOut().slideUp(300);
                        }
                    }, 3000);
                });
        $("#mod_search_searchword").blur(function () {
            $("#tpl_search").fadeOut().slideUp(300);
        });


    });
</script>
</body>
</html>

По логике блок должен скрываться и INPUT обнуляться если поле пустое. Но реально условие выполняется при любых условиях. В чём проблема, что не усмотрел?

--------------------

Amphiluke

Дата 9.6.2013, 20:06 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112

Цитата(Gold Dragon @ 9.6.2013, 13:29

)

if($.trim($("#mod_search_searchword").val() == '')){

Для начала, не там поставлена закрывающая скобка.

Код


if($.trim($("#mod_search_searchword").val()) == ''){

Чаще встречается такой вариант реализации, при котором всплывающая форма лежит в общем контейнере с элементом, чувствительным к наведению мыши. Этот общий контейнер слушает события mouseenter и mouseleave (не mouseover/mouseout), это позволяет пользователю спокойно возить указателем мыши внутри всплывающей формы.
У вас сейчас получается так, что стоит только перевести мышь с кнопки на форму, запускается таймер для сокрытия формы, и не особо расторопные юзеры могут потерять ее прямо перед началом набора текста.

Можно без особого ущерба для вашего примера исправить хотя бы так:

Код


<div class="search-container">
    <a class="mainlevel-2" title="Поиск" href="index.php?option=com_search">@@@</a>
    <div id="tpl_search" style="display: none;">
        <div id="module_15" class="moduletable-search">
            <form method="post" action="index.php?option=com_search">
                <div class="search-search">
                    <input type="text" value="" size="40" class="inputbox-search" alt="search" maxlength="100" id="mod_search_searchword" name="searchword">
                    <br>
                    <input type="submit" class="button-search" value="Поиск...">
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".search-container").mouseenter(function () {
            $("#tpl_search").fadeIn().slideDown(300);
            $("#mod_search_searchword").focus();
        }).mouseleave(function () {
            setTimeout(function () {
                if($.trim($("#mod_search_searchword").val()) == ''){
                    $("#mod_search_searchword").val('');
                    $("#tpl_search").fadeOut().slideUp(300);
                }
            }, 3000);
        });
        $("#mod_search_searchword").blur(function () {
            $("#tpl_search").fadeOut().slideUp(300);
        });
    });
</script>

Этот ответ добавлен с нового Винграда - http://vingrad.com

Это сообщение отредактировал(а) Amphiluke - 9.6.2013, 20:12

Gold Dragon

Дата 11.6.2013, 05:06 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

Amphiluke, спасибо. Проблема была в скобке! +1

А то что касается в одном контейнере - это не возможно по дизайну и вёрстке сайта smile

Это я просто "выжимку" привёл

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »