Вебдизайн и Техническая поддержка
Skype: disbb.ru
Контакты: обратная связь
Часы работы:
Пн-Пт 10:00-18:00
* по московскому времени


Всплывающий поиск (karpoff, Alex_63)


Скриншот

  • При нажатии на ссылку поиска всплывает окно с короткой формой поиска
  • Автор: karpoff, Alex_63
  • Платформа: MyBB
  • Категория: Поиск и навигация
  • Оценка: 5.0/1
  • 14.08.2015, 03:23

При нажатии на ссылку в меню Поиск, страница с поиском не загружается, а появляется только окошко с двумя полями: слова для поиска или автор.
При повторном нажатии, оно исчезает.
Также в окошке есть ссылка "Расширенный поиск", которая ведёт к полной странице поиска.
Это нужно, чтобы не грузить каждый раз полную страницу с поиском.
Всплывающая форма поиска версия от karpoff

Код
<script language="JavaScript">
  document.getElementById("pun-navlinks").style.position = "relative"

  function showDiv()
  {
  if( document.getElementById("searchDiv").style.display == 'none' )
  document.getElementById("searchDiv").style.display = ''
  else document.getElementById("searchDiv").style.display = 'none'

  return false;
  }

  str = "<a href=\"search.php\" onclick=\"return showDiv()\"><span>Поиск</span></a>"
  str += "<div id=searchDiv style=\"display: none; \">"

  str += " <form method=\"get\" action=\"search.php\">"
  str += " <input type=\"hidden\" name=\"action\" value=\"search\">"
  str += " <p class=\"inputfield\">"
  str += " <label for=\"fld1\">Ключевые слова</label>
"
  str += " <span class=\"input\"><input type=\"text\" name=\"keywords\" size=\"25\" maxlength=\"100\" /></span>"
  str += " </p>"
  str += " <p class=\"inputfield\">"
  str += " <label for=\"fld2\">Поиск автора</label>
"
  str += " <span class=\"input\"><input type=\"text\" name=\"author\" size=\"25\" maxlength=\"25\" /></span>"
  str += " </p> <br>"

  str += " <input type=\"hidden\" name=\"forum\" value=\"-1\">"
  str += " <input type=\"hidden\" name=\"search_in\" value=\"all\">"
  str += " <input type=\"hidden\" name=\"sort_by\" value=\"0\">"
  str += " <input type=\"hidden\" name=\"sort_dir\" value=\"DESC\">"
  str += " <input type=\"hidden\" name=\"show_as\" value=\"topics\">"

  str += " <p><input type=\"submit\" class=\"button\" name=\"search\" value=\"Отправить\" accesskey=\"s\" title=\"Accesskey:s\" /></p>"
  str += " </form>"

  str += " <a href=\"search.php\">Расширенный поиск</a> "
  str += "</div>"

  document.getElementById('navsearch').innerHTML = str
  </script>
  <style>
  #searchDiv{
  position:absolute;
  background-color : Gray;
  border : solid;
  padding-bottom : 5px;
  padding-left : 5px;
  padding-right : 5px;
  padding-top : 5px;
  z-index:2;
  }
  </style>

Этот скрипт надо вставлять в html-низ

Всплывающая форма поиска версия от Alex_63
В HTML низ
Код

<!-- Всплывающая форма Поиска / © Alex_63 -->
<style>
#Search_Punbb{display:none;}
#P_Search{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; left: 0;
  z-index: 99999;
  background: rgba(0,0,0,.5);
  cursor: pointer;
}
#Search_Punbb > .container {
  background-color: #fafafa;
  position: fixed;
  left: 41%; top: 40%;
  padding: 1em;
  height: 150px;
  vertical-align: middle;
  z-index: 100000;
  border-radius: 10px;
  border: solid 3px #aaa;
}
#Search_Punbb p.inputfield{display:block!important;float:none;}
#Search_Punbb fieldset legend{text-align:center;}
#Search_Punbb fieldset legend span {
  color: #999 !important;
  font-size: 1.4em;
  font-weight: 700;
  background: #fafafa;
  font-family: Tahoma;
}
</style>
<script type="text/javascript">
function add_Search_form (){/*==123==;
<div id="Search_Punbb"><div id="P_Search"><!-- --></div>
<form id="punbbsearch" class="container" method="get" action="/search.php">
<fieldset><legend><span>Поиск по форуму</span></legend>
<div class="fs-box inline"><input type="hidden" name="action" value="search" />
<p class="inputfield"><label for="fld1">Ключевые слова</label><br/>
<span class="input"><input type="text" id="fld1" name="keywords" size="25" maxlength="100" /></span>
</p><p class="inputfield"><label for="fld2">Поиск автора</label><br/>
<span class="input"><input id="fld2" type="text" name="author" size="25" maxlength="25" /></span>
<input type="hidden" name="show_as" value="posts"/><input name="sort_dir" value="DESC" type="hidden"/>
</p></div></fieldset><p class="formsubmit">
<span style="float:left"><input type="submit" class="button" name="search" value="Отправить"/></span>
<span style="float:right"><a href="/search.php">Расширенный поиск</a></span></p>
</form></div>==123==;*/
}add_Search_form=add_Search_form.toString().split('==123==;')[1];
if(!$('#pun-search').length){$('#pun-navlinks').after(add_Search_form);
  $('#navsearch>a,#P_Search').click(function(e){e.preventDefault();$('#Search_Punbb').fadeToggle(200);});
}
</script>
Теги: Alex_63, скрипт, karpoff, Поиск и навигация, mybb

Просмотров: 674, Загрузок: 0, Оценка: 5.0 (1)
Страницы:
Имя *:
Email *:
Код *:
Сайт создан в системе uCoz