Jump to content
СофтФорум - всё о компьютерах и не только

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

Alexander-V-Sh
 Share

Recommended Posts

Alexander-V-Sh

Alexander-V-Sh

Posted
Posted (edited)

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

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

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

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

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

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

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

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

Edited by Alexander-V-Sh
Link to comment
Share on other sites
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Posted
Posted

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>
Link to comment
Share on other sites
alex45

alex45

Posted
Posted

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

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

Код:

<!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>

Link to comment
Share on other sites
Alexander-V-Sh

Alexander-V-Sh

Posted
  • Author
Posted (edited)

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

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

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

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

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

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

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

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

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

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

Лорд Дмитрий

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

showthread.rar

showthread.rar

Edited by Alexander-V-Sh
Link to comment
Share on other sites
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Posted
Posted (edited)

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

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

Edited by Лорд Дмитрий
Link to comment
Share on other sites
Alexander-V-Sh

Alexander-V-Sh

Posted
  • Author
Posted

Лорд Дмитрий

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

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

2.gif

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

1.gif

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

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

post-1537-1162323310_thumb.jpg

post-1537-1162323326_thumb.jpg

Link to comment
Share on other sites
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Posted
Posted

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

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

<table width="99%">

замени на

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

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

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

Link to comment
Share on other sites
Alexander-V-Sh

Alexander-V-Sh

Posted
  • Author
Posted (edited)

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

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

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

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

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

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

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

Edited by Alexander-V-Sh
Link to comment
Share on other sites
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Posted
Posted

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 но выводит предупреждение в консоль ошибок...

Link to comment
Share on other sites
Alexander-V-Sh

Alexander-V-Sh

Posted
  • Author
Posted

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

window.onload;

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

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

function myfun() {

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

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

}

window.onload=myfun;

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

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

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

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

Link to comment
Share on other sites
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Posted
Posted

Alexander-V-Sh:

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

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

зависит от скрипта навигации! скорее всего обойтись нельзя, если есть событие, то оно нужно!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...