Значок всплывающего окна поиска: как Apple.com Angular JS

Я пытаюсь создать такую ​​же интерактивную панель поиска, как apple.com (и я знаю, что есть много других сообщений, которые задают похожие вопросы), и я пытаюсь использовать JS для переключения панели поиска.

Мой подход был с JQuery:

    // inserts a new search_bar
    $(".glyphicon.glyphicon-search").on("click", function(){
      var search_bar = document.createElement("input");
      search_bar.setAttribute("type", "text");
      search_bar.setAttribute("class", "form-control search left rounded");
      search_bar.setAttribute("id", "search-bar");
      search_bar.setAttribute("placeholder", "search");
      search_bar.setAttribute("ng-model", "search.name");

      $(this).parent().replaceWith(search_bar);

    });

HTML:

  <span class="glyphicon glyphicon-search" style="color:white;"></span>

Эта функция заменяет глификон поиска полосой поиска (тега ввода) при нажатии. Но мне нужен хороший способ вернуть панель поиска к глификону поиска при нажатии в другом месте.

Любые идеи?

Скрипка: http://jsfiddle.net/w9pwh7fr/1/

Обновлять:

Использование $ ('html'). On ("click", function () {}), похоже, работает для off click и event.stopPropagation, чтобы предотвратить нажатие на глификон для запуска обоих событий.

Небольшая проблема теперь с одним переключением поиска. При первой казни.

Обновленный Fiddle: http://jsfiddle.net/w9pwh7fr/3/


input html uisearchbar jquery css
person Ninja    schedule 20.10.2014    source источник
comment
как насчет $('body').click(function(){});   -  person starvator    schedule 20.10.2014
comment
Обновил скрипку, зацените. Но проблема в том, что щелчок выключения срабатывает только один раз. Если вы повторите это снова, элемент не будет правильно переключаться. Сценарий: jsfiddle.net/w9pwh7fr/3   -  person Ninja    schedule 20.10.2014

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете использовать $('body').click(function(){}); для проверки клика на странице.

Однако это также обнаружит щелчок по окну поиска. Итак, вам нужно будет обнаружить щелчок по странице, за исключением этого поля. Этого можно добиться с помощью чего-то вроде $('body').on('click', ':not(#popup)', function(){});.

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

В общем, $('body').on('click', ':not(#popup)','.glyphicon.glyphicon-search', function(){}); должен работать на вас!

person starvator    schedule 20.10.2014

arrow_upward
0
arrow_downward

Отлично, только что исправил благодаря некоторым предложениям в Интернете.

Обновленная скрипка:

http://jsfiddle.net/w9pwh7fr/4/

Решение:

Используется .hide () и .show () для переключения панели поиска и значка поиска. Использовал "html" .onClick () для решения проблемы с отключением кнопки.

   $(".glyphicon.glyphicon-search").on("click", function(e){

     $(this).hide();
     $(".form-control.search").show();
     e.stopPropagation();

   });


   $('html').on("click", function() {

     $(".form-control.search").hide();
     $(".glyphicon.glyphicon-search").show();

   });
person Ninja    schedule 20.10.2014
comment
$('html').on("click" ... означает любой щелчок по вашей странице, даже в поле поиска. Ознакомьтесь с моим ответом на вопрос об исправлении. - person starvator; 20.10.2014

arrow_upward
0
arrow_downward

почему вы не используете ".focusout ()" в текстовом поле ввода ... показать, когда пользователь щелкает где-нибудь еще, вы можете закрыть или восстановить этот элемент только до значка!

person Allan    schedule 20.10.2014