Это MWEB.RU

Не узнаешь, %username%?

Пропустить

Раскрывающиеся списки

Старый mweb

Модератор: [mweb team]

Ответить

Раскрывающиеся списки

Сообщение Padonak Пн окт 27, 2008 16:34

вот тут на одном форуме захотелось поучаствовать в создании циничнораскрывающихся форм. получилась такая хрень:

Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Подход с особым цинизмом</title>
<script language="JavaScript" type="text/javascript">
// ф-ция раскрытия-сжатия заголовков
function xpandText(objID,n,max,direction,step){
var obj = document.getElementById(objID);
if(direction == "fw"){
if(n < max){obj.style.letterSpacing = n + "px"; n+=step;}
else{
// иногда неактивный заголовок заедал поэтому добавлена проверка
// ПРОВЕРКА - НАЧАЛО
var h = document.getElementsByTagName("H3");
for(var i = 0; i < h.length; i++){
if(h[i] === obj){continue;}
if((h[i].className == "pol") && (h[i].style.letterSpacing != 1 + "px") && (h[i] !== obj)){
h[i].style.color = "#666";
h[i].style.letterSpacing = 1 + "px";
}
else{continue;}
}
// ПРОВЕРКА - КОНЕЦ
obj.style.letterSpacing = max + "px";
return;
}
setTimeout("xpandText('" + objID + "'," + n + "," + max + ",'" + direction + "'," + step + ")",1);
}
if(direction == "back"){
if(n > max){obj.style.letterSpacing = n + "px"; n-=step;}
else{obj.style.letterSpacing = max + "px"; return;}
setTimeout("xpandText('" + objID + "'," + n + "," + max + ",'" + direction + "'," + step + ")",1);
}
}

function showTab(obj){
var tabID = "tab_" + obj.id.substr(2);
var tabs = document.getElementsByTagName("TABLE");
for(var n = 0; n < tabs.length; n++){
// тут добавлена возможность открывать и закрывать
// каждую форму кликом по ее заголовку
if(tabs[n].id && (tabs[n].id == tabID)){tabs[n].style.display = (tabs[n].style.display == "block") ? "none" : "block";}
else if(tabs[n].id && (tabs[n].id.indexOf("tab_") != -1) && (tabs[n].style.display == "block") && (tabs[n].id != tabID)){
tabs[n].style.display = "none";
}
else{continue;}
}
}

function setH3(){
var h = document.getElementsByTagName("H3");
for(var i = 0; i < h.length; i++){
if((h[i].className == "pol") && h[i].id && (h[i].id.indexOf("h_") != -1)){
// ИЕ у меня как-то не очень бодро обрабатывает эти вещи
// в принципе ограничение по браузеру можно убрать
// ограничение по браузеру - НАЧАЛО
h[i].onmouseover = function(){
this.style.color = "#dc143c";
if(navigator.userAgent.indexOf("MSIE") < 0){
var n = this.style.letterSpacing.substring(0, this.style.letterSpacing.indexOf("px"));
xpandText(this.id,n,30,"fw",3);
}
if(navigator.userAgent.indexOf("MSIE") > 0){this.style.letterSpacing = 30 + "px";}
}
h[i].onmouseout = function(){
this.style.color = "#666";
if(navigator.userAgent.indexOf("MSIE") < 0){
var n = this.style.letterSpacing.substring(0, this.style.letterSpacing.indexOf("px"));
xpandText(this.id,n,1,"back",2);
}
if(navigator.userAgent.indexOf("MSIE") > 0){this.style.letterSpacing = 1 + "px";}
}
// ограничение по браузеру - КОНЕЦ
h[i].onclick = function(){showTab(this);}
}
else{continue;}
}
}

function selectReaction(obj,selIndex,elemId){
var what = document.getElementById(elemId);
var tab = what.parentNode.parentNode;
if(obj.selectedIndex == selIndex){what.style.display = "block";}
else{
what.style.display = "none";
// Фаерфокс хреново обрабатывал display = "none" (если скрыть больше 1 раза то оставлял гадина
// какое-то пустое место) поэтому для гарантии сделано следующее:
if(navigator.userAgent.indexOf("Firefox") != -1){
tab.style.display = "none";
eval('setTimeout(\'document.getElementById("' + tab.id + '").style.display = "block"\',1)');
}
}
obj.blur();
}

function setSelects(){
var sel = document.getElementsByTagName("SELECT");
for(var k = 0; k < sel.length; k++){
if(sel[k].id && (sel[k].id == "cpl")){sel[k].onchange = function(){selectReaction(this,1,"show_keys");}}
else if(sel[k].id && (sel[k].id == "zpl")){sel[k].onchange = function(){selectReaction(this,1,"file_upload");}}
else{continue;}
}
}

function setMyform(){
document.forms["XZ"].onreset = function(){
var sel = document.getElementsByTagName("SELECT");
for(var k = 0; k < sel.length; k++){
if(sel[k].id && (sel[k].id == "cpl")){selectReaction(this,0,"show_keys");}
else if(sel[k].id && (sel[k].id == "zpl")){selectReaction(this,0,"file_upload");}
else{continue;}
}
}
setH3();
setSelects();
document.forms["XZ"].reset();
// обход глюка Фаерфокса - начало
if(navigator.userAgent.indexOf("Firefox") > 0){
setTimeout('document.getElementById("tab_1").style.display = "none"', 10);
}
// обход глюка Фаерфокса - конец
}
</script>
<style type="text/css">
body{
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
text-align: center;
font-family: Verdana, Helvetica, Arial;
font-size: 11px;
}
table{
border: none;
}
table#gearbox{
width: 100%;
margin: 10px 0px;
}
table#gearbox td{
text-align: center;
}
td{
padding: 5px 5px 5px 5px;
}
td[colspan="2"]{
text-align: left;
}
label{
display: block;
}
select{
width: 250px;
border: 1px solid #fff;
}
input[type="file"]{
width: 250px;
}
textarea{
width: 250px;
}
td.descr{
width: 70%;
font-style: italic;
padding-left: 50px;
text-align: center;
}
textarea{
overflow: auto;
}
h3.pol{
text-align: right;
margin: 5px 0px;
border: 1px solid #ccc;
padding: 4px 30px 4px 4px;
background-color: #EBEBEB;
margin-bottom: 1px;
font-size: 12px;
color: #666;
cursor: pointer;
letter-spacing: 1px;
}
#tab_1,#tab_2,#file_upload,#show_keys{
display: none;
}
.btn{
margin: 0px 10px;
padding: 2px 5px;
font-weight: bold;
letter-spacing: 2px;
font-family: Georgia, Verdana, Helvetica;
font-size: 11px;
cursor: pointer;
}
</style>
</head>

<body onload="setMyform()">
<form name="XZ" id="XZ" action="">
<h3 class="pol" id="h_1" title="Поле 1">Поле 1</h3>
<table id="tab_1" summary="" width="100%">
<tbody>
<tr>
<td colspan="2">
<label>Форма 1</label>
<select size="1">
<option value="gen" selected="true">Ген</option>
<option value="keys" >Кеи</option>
<option value="users" >Юзер</option>
</select>
</td>
<td class="descr">Описание</td>
</tr>
<tr>
<td colspan="2">
<label>Форма 2</label>
<select name="cpl" id="cpl">
<option value="gen" selected="true">Ген</option>
<option value="keys" >Если выбрать, то появится поле</option>
<option value="users" >Юзер</option>
</select>
</td>
<td class="descr">Описание</td>
</tr>
<tr id="show_keys">
<td colspan="2">
<label>Появляющееся поле</label>
<textarea rows="15" cols="30"></textarea>
</td>
<td class="descr">Введите в данное поле слова</td>
</tr>
<tr>
<td colspan="2">
<label>Форма 3</label>
<select name="zpl" id="zpl">
<option value="gen" selected="true">Генерация</option>
<option value="file" >Взять из файла</option>
<option value="users" >Юзер</option>
</select>
</td>
<td class="descr">Описание</td>
</tr>
<tr id="file_upload">
<td colspan="2">
<label>Файл с текстом</label>
<input name="filename" id="filename" type="file" />
</td>
<td class="descr">Выберите файл с текстом для контента страницы</td>
</tr>
</tbody>
</table>
<h3 class="pol" id="h_2" title="Поле 2">Поле 2</h3>
<table id="tab_2" summary="">
<tbody>
<tr>
<td><input type="radio" /></td>
<td><label>Удалить</label></td>
<td> </td>
</tr>
<tr>
<td><input type="radio" checked="checked"/></td>
<td><label>Создавать</label></td>
<td class="descr">Просто</td>
</tr>
<tr>
<td colspan="2"><label>Форма</label><input type="text" /></td>
<td class="descr">Введите текст</td>
</tr>
</tbody>
</table>
<table id="gearbox" summary="">
<tbody>
<tr>
<td><input class="btn" type="submit" value="Отправить" onclick="return false" onfocus="this.blur()" /><input class="btn" type="reset" value="Очистить" onfocus="this.blur()" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону
Вернуться к началу

Re: Раскрывающиеся списки

Сообщение Skay Вт окт 28, 2008 1:45

в чем фишка?) йа что-то не понял...
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01
Вернуться к началу

Re: Раскрывающиеся списки

Сообщение Padonak Вт окт 28, 2008 9:38

никакой фишки нет. просто такой вопрос часто задается и чтобы не парили моск лишний раз я решил выложить этот код раз уж он был.
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону
Вернуться к началу

Re: Раскрывающиеся списки

Сообщение kost Вт окт 28, 2008 11:40

Выложил бы пример, чтобы было видно, о чем речь.
Аватара пользователя
kost
Заядлый `курильщик`
 
Сообщения: 701
Зарегистрирован: Ср апр 16, 2003 16:56
Откуда: Санкт-Петербург
Вернуться к началу

Re: Раскрывающиеся списки

Сообщение Padonak Вт окт 28, 2008 16:11

кост тебе чо трудно код скопировать? :-)) могу подсказать сочетания клавиш для копирования и вставки :-))

http://forum.spravkaweb.ru/index.php?s= ... ost&p=9384

вот линк на топег где эта хрень обсуждалась (не постил линк раньше из политкорректности)
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону
Вернуться к началу
Ответить

Вернуться в Архив

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 27



1998–2008 © Все интересы учтены. Команда mweb
Работает на движке phpBB

Рейтинг@Mail.ru

cron