Перейти к содержанию
СофтФорум - всё о компьютерах и не только

Скрипт с выпадающей формой

Alexander-V-Sh

Автор Alexander-V-Sh
в Веб-строительство

 Поделиться

Рекомендуемые сообщения

Alexander-V-Sh

Alexander-V-Sh

Опубликовано
Опубликовано (изменено)

Нужно сделать 3 кнопки (buttom) при нажатии на которые ниже вылетит табличка с формой поиска, авторизацией и массшатбом (3 кнопки - 3 меню).

Аналогично выпадающему меню, только с формами. И соотв. при повторном нажатии или нажатии вне открывшегося окна чтобы убиралась.

Выдернул скрипт из VBulletin, хорошо, удобно, красиво, но там под 15кб скрипт получился... Я в яве мало понимаю, но там в теории 2 функции - Show и Hide.

Наподобе как сдесь - Опции и Рейтинг (только при переходе с одного на другое не нужно выбрасывать другое меню).

Сохранил страничку - посмотреть, тут скриптов море, это мне пару дней рыться, отсеивая ненужное :dntknw:. Да и похоже он такой же как в VBulletin

Красоты никакой не нужно, нужно минимум кода - показать таблицу с формой и убрать.

Может у кого то есть нечто похожее?

Заранее Спасибо.

Изменено пользователем Alexander-V-Sh
Ссылка на комментарий
Поделиться на другие сайты
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Опубликовано
Опубликовано

Alexander-V-Sh: помести форму в тег div с любым(уникальным) параметром id

<div id="myform"><form ... </form></div>

На кнопку пропиши параметр onclick="showhide('myform')"

далее в тег head вставь скрипт:

<script language="javascript"><!--var showed = null;function showhide(id) { if(showed == null) {showed = document.getElementById(id);showed.style.display = "block"; } else {showed.style.display = "none";if(showed.innerHTML == document.getElementById(id).innerHTML) {  showed = null;} else {  showed = document.getElementById(id);  showed.style.display = "block";} }}//--></script>
Ссылка на комментарий
Поделиться на другие сайты
alex45

alex45

Опубликовано
Опубликовано

Короче есть код, он правда не совсем коректно работает. Когда нажимаеш слой появляется, а когда нажимаеш еще раз слой почему-то не исчезает.

А так все нормально.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

<script language="javascript" type="text/javascript">

function show(layer)

{

if (document.getElementById(layer).style.visibility="hidden")

{

document.getElementById(layer).style.visibility="visible";

}

else

if (document.getElementById(layer).style.visibility="visible")

{

document.getElementById(layer).style.visibility="hidden";

}

}

function hide(layer)

{

document.getElementById(layer).style.visibility="hidden";

}

</script>

<style type="text/css">

#menu01 {

margin-left: 0px;

visibility: hidden;

}

#menu02 {

margin-left: 0px;

visibility: hidden;

}

#menu03 {

margin-left: 0px;

visibility: hidden;

}

.a {

width: 150px;

background-color: #3399FF;

color: #FFFFFF;

}

</style>

</head>

<body>

<table width="60%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="20%"><a href="#" onClick="show('menu01');" onBlur="hide('menu01')">Link01</a></td>

<td width="20%"><a href="#" onClick="show('menu02');" onBlur="hide('menu02')">Link02</a></td>

<td width="20%"><a href="#" onClick="show('menu03');" onBlur="hide('menu03')">Link03</a></td>

</tr>

<tr>

<td width="20%"><div class="a" id="menu01">Суда вставиш свою форму</div></td>

<td width="20%"><div class="a" id="menu02">Суда вставиш свою форму</div></td>

<td width="20%"><div class="a" id="menu03">Суда вставиш свою форму</div></td>

</tr>

</table>

</body>

</html>

Ссылка на комментарий
Поделиться на другие сайты
Alexander-V-Sh

Alexander-V-Sh

Опубликовано
  • Автор
Опубликовано (изменено)

Лорд Дмитрий:

Наподобе у меня есть, используется много где. Но спасибо, этот другой немного, приспособлю куда нибудь. Сдесь просто форма сверху должна быть, а не на странице (места нет для нее). Тоесть открываться сверху (как "Опции" сдесь)

Нужно как написал alex45, только при щелчке на форме (в открывшемся меню) - она не пропадала, а пропадала при щелчке на ссылке или в вне открывшемся меню. И чтобы работало в Опере.

Хотя сдесь помоему место тоже выделено на странице и открывается в своем месте, а не поверху...

Менюшка (с формой) будет накладывается на текст и таблицы, которые идут ниже ссылки.

В общем как "Опции" и "Рейтинг", но без прибамбосов (в виде красивого вылета меню, открытия и закрытия при перемещении и т.д.).

В архив выложил скрипт. Там мусора наверно полно... Я удалял куски явы, пробуя в броузерах (работает-неработает).

Наверняка осталось что то лишнее.

Плюс эффект - перехода с одной кнопки на другую (открытие одного меню и закрытие другого) - ненадо. Нажал - открылось - нажал - закрылось.

Эффект открывания красивый, с боку. Может еще что то удалить можно, чтобы он хотя бы кб 5 весил.

Лорд Дмитрий

Если не сложно, может хлам лишний выкинешь оттуда? (если аналога проще нет) Так то скрипт хороший, много где пригодится.

showthread.rar

showthread.rar

Изменено пользователем Alexander-V-Sh
Ссылка на комментарий
Поделиться на другие сайты
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Опубликовано
Опубликовано (изменено)

Alexander-V-Sh: вот сделал, правда не то что было у тебя, а по новому.

То что ты дал, то ли чистил многое неглядя, то ли сделано неправильно

Изменено пользователем Лорд Дмитрий
Ссылка на комментарий
Поделиться на другие сайты
Alexander-V-Sh

Alexander-V-Sh

Опубликовано
  • Автор
Опубликовано

Лорд Дмитрий

Там я действительно удалял все подрят, проверяя на работоспособность скрипт. Подругому я в яве не умею. Удаляю часть - обновляю страницу (если работает, то ОК), потому удаляю другое (не работает - вертаю назад) и т.д.

А можно ли сделать, как на рисунке:

2.gif

а сейчас как рисунке:

1.gif

чтобы открывшееся меню, не двигала текст вниз, а накладывалось на него.

И еще чтобы при клике вне формы (которая открылась) - она бы закрывалась.

post-1537-1162323310_thumb.jpg

post-1537-1162323326_thumb.jpg

Ссылка на комментарий
Поделиться на другие сайты
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Опубликовано
Опубликовано

Alexander-V-Sh: совсем забыл прописать в стилях )))

пропиши у самой таблицы наверно там где

<table width="99%">

замени на

<table width="99%" style="z-index:10;position:absolute;left:15;top:0;">

а перед текстом набей <br> чтобы выровнять его под таблицей.

Хотя если такой метод тебе не нравится (в IE текст будет чуть ниже чем в опере или фаерфоксе) то можно сделать скрипт по серьёзнее.

Ссылка на комментарий
Поделиться на другие сайты
Alexander-V-Sh

Alexander-V-Sh

Опубликовано
  • Автор
Опубликовано (изменено)

Лорд Дмитрий:

Вроде все фунциклирует теперь :nerd: Спасибо еще раз :D Осталось только все разместить, вставить формы и красоту навести.

Вопрос один еще. У меня на главной странице стоит скрипт прокрутки новостей, в котором присутсвует строка:

var SBiedom=document.all||document.getElementById;

Из за нее менюха не работает... На всех остальных страницах как надо.

Я думал из-за document.getElementById, но это встречается сплош и рядом в яве. А больше ничего общего то и нет со скриптом менюхи...

И еще маленький вопросик. Можно ли сделать, чтобы меню закрывалось при клике вне формы (что открылось). Это необязательно, поэтому если что то много менять, то ненужно.

Изменено пользователем Alexander-V-Sh
Ссылка на комментарий
Поделиться на другие сайты
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Опубликовано
Опубликовано

Alexander-V-Sh: всё что делает эта строка, это присваевает переменной SBiedom массив document.all (если он есть) или функцию document.getElementById (если первого нет)

ошибка в том, что если это массив (document.all) то id объекта пишется строкой в квадратных скобках, или через точку (как объект)

если же это функция (document.getElementById) то id объекта пишется строкой в круглых скобках и не как иначе

Немного теории:

Когда JavaScript только появился и было всего два браузера (NN и IE) у них было очень много разногласий в объектной модели

В Internet Explorer объектная модель была взята из VBScript с его document.all

В Netscape Navigator создал более удобную модель с функциями document.getElementById и document.getElementByTagName

Сегодня вариант NN поддерживают все браузеры включая IE

вариант с document.all не поддерживается последними версиями NN и Mozilla

хоть и последние версии Firefox поддерживают document.all но выводит предупреждение в консоль ошибок...

Ссылка на комментарий
Поделиться на другие сайты
Alexander-V-Sh

Alexander-V-Sh

Опубликовано
  • Автор
Опубликовано

Ошибка (что не работают 2 скрипта) в

window.onload;

Используется и там и там.

Как вариант, сделать:

function myfun() {

menu(); - функция со скрипта навигации

SBpopulate(); - функция со скрипта скролинга

}

window.onload=myfun;

Но поскольку скролинг только на 1 странице, придется делать условие, на проверку страниц.

Это не сложно.

Вопрос, можно ли в навигации этой обойтись без window.onload? чтобы не мудрить с пхп и явой, а просто подключить 1 скрипт.

Если нет, то делаю с условием на страницы.

Ссылка на комментарий
Поделиться на другие сайты
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Опубликовано
Опубликовано

Alexander-V-Sh:

Вопрос, можно ли в навигации этой обойтись без window.onload? чтобы не мудрить с пхп и явой, а просто подключить 1 скрипт.

Если нет, то делаю с условием на страницы.

зависит от скрипта навигации! скорее всего обойтись нельзя, если есть событие, то оно нужно!
Ссылка на комментарий
Поделиться на другие сайты
Alexander-V-Sh

Alexander-V-Sh

Опубликовано
  • Автор
Опубликовано

Лорд Дмитрий:

Разберусь :) У меня тут альтернатива еще появилась, подумать надо.

Еще раз тебе спасибо, что не пожалел время помочь :)

Ссылка на комментарий
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...