Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[18.224.39.32] |
|
Сообщ.
#1
,
|
|
|
Как сделать таблицы на странице удобнее?
Автор: Tishaishii Скрипт кроссбраузерный. Проверен на MSIE 6.0 и в Mozilla 5.0 FireFox 0.8. В Opera просто не работает, Netscape 7.0 - только подсветка строк без сортировки по столбцам. Это сообщение было перенесено сюда или объединено из темы "FAQ" Прикреплённый файлtable2xls.zip (3.03 Кбайт, скачиваний: 1194) |
Сообщ.
#2
,
|
|
|
1. Как отключить правую кнопку мыши? Автор: Mastilior Язык: HTML и JavaScript Два одинаковых решения на HTML и JavaScript: HTML: <body oncontextmenu="return false;"> </body> JavaScript: <script language="JavaScript"> <!-- document.oncontextmenu=function() { return false; } //--> </script> Но имейте ввиду, что этот способ будет работать только в том случае, если пользователь не отключил в своем обозревателе возможность перехвата нажатия правой кнопки мыши. |
Сообщ.
#3
,
|
|
|
2. Как при нажатии на одну ссылку загрузить сразу две? Автор: Mastilior Язык:HTML и JavaScript index.htm <html> <frameset rows="30,*,60"> <frame name=topframe src="topframe.htm"> <frame name=frame1> <frame name=frame2> </frameset> </html> topframe.htm <html> <head> <script language="JavaScript"> <!-- function load_two_links(link1,link2) { top.frames["frame1"].location=link1; top.frames["frame2"].location=link2; } //--> </script> <body> <a href="javascript:load_two_links('frame1.htm','frame2.htm');">Загрузить две ссылки!</a> </body> </html> frame1.htm и frame2.htm - любые HTML-файлы Прикреплённый файлExample.zip (0.75 Кбайт, скачиваний: 1075) |
Сообщ.
#4
,
|
|
|
3. Как на JavaScript заставить кнопку не реагировать на нажатие? При отправке формы на сервер, существует риск, того что форма будет отправленна несколько раз (например, если мышка у юзера барахлит). Как бы сделать так, чтобы кнопку отправки формы можно было бы нажать только один раз? Автор: Mixxx Язык: JavaScript У кнопок, как и у других элементов формы есть такое замечательное свойство — «disabled». По умолчанию оно установленно в false, сие означает, что кнопку можно нажимать. Если же его значение поменять на true, то кнопка перестанет поддаваться нажатию. Осталось только ответить на два вопроса После того как форма (которая активируется по нажатию кнопки) будет приготовленна к отправке — это событие в javascript называется onsubmit. Второй вопрос несколько сложнее: первое, что приходит в голову так это дать кнопке уникальное имя (атрибут id), и воспользоваться стандартным DOM методом объекта document — document.getElementById('уникальное_имя'): <form onsubmit="document.getElementById('mybutton').disabled=true"> <input type="submit" value="knopka" id="mybutton"> </form> Этот способ будет работать, однако он весьма громоздкий и не универсальный (если мы захотим сделать несколько кнопок с запретом после нажатия, придёться изменять id поскольку уникальный идентификатор не может повторяться ). В нашем случае кнопку из скрипта можно достать более компактным кодом. Всё дело в том, что если мы пишем какой-нибудь обработчик события внутри какого-нибудь тега, то нам становится доступен указатель на этот самый тег и называется он «this» А из тега форм до любой её кнопки - добраться очень просто, для этого достаточно знать её имя (в нашем примере она называеться - "subm"). Ввиду всего выше сказанного получаем следующее: <form onsubmit="this.subm.disabled=true"> <input type="submit" value="knopka" name="subm"> </form> Данный пример можно украсить, например, до нажатия кнопка будет иметь зелёный цвет (символизируя свою доступность), а после нажатия она окрасится в красный (который у многих ассоциируется с опасностью или запретным плодом) <form onsubmit="this.subm.disabled=true;this.subm.style.backgroundColor='red'"> <input type="submit" value="knopka" style="background-color:green" name="subm"> </form> |
Сообщ.
#5
,
|
|
|
4. Пример создания собственного интефейса событий на JavaScript. Этот вариант для загрузчика картинок. //////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// function EventHandle(object) { this.parent=object; this.hasParent=this.parent!=null; this.events={}; return this; } function EventHandle.prototype.eventName(name) { return "On"+name; } function EventHandle.prototype.Call(name) { name=this.eventName(name); if(this.events[name]==null)return null; else return this.events[name](); } function EventHandle.prototype.Attach(name, func) { name=this.eventName(name); this.events[name]=func; if(this.hasParent)this.parent[name]=func; return true; } function EventHandle.prototype.Detach(name) { name=this.eventName(name); delete this.events[name]; if(this.hasParent)delete this.parent[name]; return true; } function EventHandle.prototype.Assign(events) { if(events==null)return null; for(this.last_name in events) this.Attach(this.last_name, events[this.last_name]); return true; } //////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// function BitmapLoader(events) { this.event=new EventHandle(this); this.event.Assign(events); this.event.Call("BeforeCreate"); this.images=[]; this.events=[]; this.counter=0; this.event.Call("AfterCreate"); return this; } function BitmapLoader.prototype.Add(path) { this.event.Call("Add"); this.img=new Image(); this.img.src=path; this.images.push(this.img); return this.img; } function BitmapLoader.prototype.Length() { this.event.Call("Length"); return this.images.length; } function BitmapLoader.prototype.Count() { this.event.Call("Count"); this.counter=0; for(this.i=0; this.i<this.images.length; this.i++) if(this.images[this.i].complete)this.counter++; return this.counter; } function BitmapLoader.prototype.Loaded() { this.event.Call("Loaded"); this.result=this.Count()==this.Length(); if(this.result)this.event.Call("Load"); return this.result; } function BitmapLoader.prototype.Wait(bmploader) { if(this.loader==null) { if(bmploader==null)return null; else this.loader=bmploader; } if(this.loader.Loaded())return true; return setTimeOut("BitmapLoader.prototype.Wait()"); } function BitmapLoader.prototype.Begin(images) { this.event.Call("Begin"); while(images.length)this.Add(images.pop()); BitmapLoader.prototype.Wait(this); return this.images; } //////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// var base=[]; var path="images/"; var ext=".gif"; for(var i=0; i<17; i++) base.push(path+i.toString()+ext);//Создаётся список путей к // картинкам типа "images/%s.gif" var bmpLoader=new BitmapLoader({ "Load":new Function("alert('Картинки загружены');") //При загрузке. }); var img_handle=bmpLoader.Begin(base); //Или bmpLoader.OnLoad();// Вызов процедуры для события "OnLoad" автономно от сыбытия //////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// |
Сообщ.
#6
,
|
|
|
5. Пример многопоточного клиентского макроса на JavaScript. Эта реализация работает только во MSIE >=5.0. Требует плагин VML. На самом деле одной из таракашек можно управлять с помощью стрелок на клавиатуре, только она сопротивляется. Прикреплённый файлthreads.zip (34.75 Кбайт, скачиваний: 1142) |
Сообщ.
#7
,
|
|
|
Починенный плагин с кодовым именем "таблица-ца-ца" и новый с кодовым же именем "кнопка-ца-ца".
Что внутри? Плагины на JavaScript, которые делают старые компоненты страницы TABLE и BUTTON удобнее или красивее. Ни к чему не обязывают, ничего на странице менять не надо. Только подгрузить файл с плагином и запустить соответствующую функцию. Остальное сделается само. Плагин "кнопка-ца-ца" работает в Netscape 7, FireFox 0.93, MSIE >=5.0, в Opera - ничего не работает. Вообще Opera, наверное, самый безопасный браузер, - там ничего не работает. Плагин "табли-ца-ца" работает, как и прежде, во MSIE >=5.0, Netscape 7, FireFox 0.93, во всяком случеа, там испытано. Это сообщение было перенесено сюда или объединено из темы "FAQ" Прикреплённый файлtza_tza.zip (6.96 Кбайт, скачиваний: 1563) |
Сообщ.
#8
,
|
|
|
6. Как подгрузить XML на страницу? Автор: Tishaishii Язык: HTML и JavaScript test.html: <html> <body> <script ID="xml_doc" language="xml" src="test.xml"></script> <script language="JavaScript"> alert(xml_doc.XMLDocument.documentElement.getElementsByTagName("item")[0].text); </script> </body> </html> test.xml: <root> <item id="i1">Содержание 1</item> <item id="i2">Содержание 2</item> </root> А можно прямо так: <html> <body> <script ID="xml_doc" language="xml"><root> <item id="i1">Содержание 1</item> <item id="i2">Содержание 2</item> </root></script> <script language="JavaScript"> alert(xml_doc.XMLDocument.documentElement.getElementsByTagName("item")[0].text); </script> </body> </html> А работает только в IE >=6, раньше не проверял. |
Сообщ.
#9
,
|
|
|
Программка на JavaScript - выводит 10 чаще всего встречающихся слов из документа Word. HTA - Hyper Text Application - набивное чучело Micrisoft - построение приложений на основе локализованных web-страниц. По крайней мере в Win2000 Professional, файл *.hta запускать можно двумя щелчками. Прикреплённый файлwordtree.zip (1.66 Кбайт, скачиваний: 4225) |
Сообщ.
#10
,
|
|
|
7. Как обозначить все checkbox-ы Автор: Mixxx Язык: JavaScript Вот сама функция function selAll(E) { for(var i=0;i<E.length;i++) if(typeof E[i].type!='undefined' && E[i].type.toLowerCase()=='checkbox') E[i].checked=true; } А вот небольшой пример <form> <input type="checkbox" > <input type="CHECKBOX" > <input type="checkbox" > <input type=button value=Всё onclick="selAll(this.form.elements)"> <input type=reset value=Ничего> </form> |
Сообщ.
#11
,
|
|
|
7. Работа с курсором мыши. 7.01. Наведение мыши на элементы формы <html> <body> <script language="javascript" type="text/javascript"> <!-- function OnMouseOver() { myText.innerText = "Курсор над кнопкой"; } function OnMouseOut() { myText.innerText = "Курсор бродит по странице"; } // --> </script> <input id="myButton" type="button" value="button" language="javascript" onmouseover="return OnMouseOver()" onmouseout="return OnMouseOut()" /> <br/> <span id="myText"></span> </body> </html> 7.02. Подсказки при наведении на ссылки <!--HTML код--> <html> <body> <table onmouseout=show(0.1);> <tr><td> <table> <tr><td> <a href=yourlink.html onmouseover=show(1);>Здесь ваша ссылка №1</a></td></tr> <tr><td> <a href=yourlink.html onmouseover=show(2);>Здесь ваша ссылка №2</a></td></tr> </table> </td> <td id=desc valign=top> Здесь будут появляться подсказки</td></tr> </table> </body> </html> <!-- JavaScript --> <SCRIPT LANGUAGE="JavaScript"> function show(n) { var cdesc; switch (n) { case 0.1: cdesc="Ваш текст, который будет по умолчанию"; break; case 1: cdesc="Текст, при наведении на ссылку 1"; break; case 2: cdesc="Текст, при наведении на ссылку 2"; break; } desc.innerText=cdesc; } </SCRIPT> 7.03. Изменение цвета фона <html> <body> <table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center> <tr> <td align=center bgcolor=#CCCCCC onMouseOver="this.style.background='#FFCC33'" onMouseOut="this.style.background='#CCCCCC'"> <a href="link1.htm">Пункт 1</a></td> <td align=center bgcolor=#CCCCCC> <a href="link2.htm">Пункт 2</a></td> </tr> </table> </body> </html> 7.04. Создание ячейки как ссылки <html> <body> <table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center> <tr> <td align=center bgcolor=#CCCCCC onMouseOver="this.style.background='#FFCC33'" onMouseOut="this.style.background='#CCCCCC'" onClick="document.location='1.html'" style="cursor: hand"> <a href="link1.htm">Пункт 1</a></td> <td align=center bgcolor=#CCCCCC> <a href="link2.htm">Пункт 2</a></td> </tr> </table> </body> </html> 7.05. Изменение свойств ячейки <!--HTML код--> <html> <body> <table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center> <tr> <td align=center bgcolor="#CCCCCC" ID="c1"> <a href="link1.htm" onMouseOver="newColor('c1')" onMouseOut="backColor('c1')">Пункт1</a> </td> <td align=center bgcolor="#CCCCCC" ID="c2"> <a href="link2.htm" onMouseOver="newColor('c2')" onMouseOut="backColor('c2')">Пункт2</a> </td> </tr> </table> </body> </html> <!-- JavaScript --> <script language="JavaScript"> function newColor(idCell) { if (document.all) eval('document.all.'+idCell+'.style.background = "#FFCC33"'); else eval('document.getElementById("' + idCell + '").style.background = "#FFCC33"'); } function backColor(idCell) { if (document.all) eval('document.all.'+idCell+'.style.background = "#CCCCCC"'); else eval('document.getElementById("' + idCell + '").style.background = "#CCCCCC"'); } </script> 7.06. Коментарии при наведение на ссылку <html> <head> <script> function load(evt) { for(i=0; i<document.links.length; i++) { document.links[i].setAttribute("host", document.links[i].host); } } </script> <style> a { color: gray; } a:before { background-image: url("/img/external.link.gif"); width: 20px; height: 20px; } a[host="internal.com"] { color: red; } a[host="internal.com"]:before { background-image: url("/img/internal.link.gif"); } </style> </head> <body onload="load(event);"> <ul> <li> <a href="http://external.com/dsfsdf">http://external.com</a> </li> <li> <a href="http://internal.com/internal.html">/internal.html</a> </li> </ul> </body> </html> 7.07. Наведение на img первый способ: <HTML><HEAD> <script language="JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v3.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </HEAD> <BODY onLoad="MM_preloadImages('1.gif','2.gif')"> <P ALIGN="CENTER"> <img name="Image1" alt="Text" border="0" src="1.gif" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','2.gif',1)"> </P></BODY></HTML> второй способ: <a href="xlam.htm"> <img src="xlam1.gif" WIDTH="120" HEIGHT="24" alt="XLAM" border="0" onMouseover="this.src='xlam2.gif' " onMouseout="this.src='xlam1.gif'"> </a> и там и там всё работает одинакого. 7.08. Проигрывание wav, наведением на объект <HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var strOver = "Data.wav"; var strClick = "Data.wav"; var a = new Array("never", "say", "die"); for (var i = 0; i < a.length; i++) document.writeln('<p><a href="#"' + ' onmouseover="soundIt(false)"' + ' onclick="soundIt(true)">' + a[i] + '</a></p>'); function soundIt(cause) { sounder.src = (cause ? strClick : strOver); } //--> </SCRIPT> <bgsound id="sounder"/> </BODY> </HTML> </sample> |
Сообщ.
#12
,
|
|
|
1.18 Координаты курсора мышки при нажатии на кнопку
ltscript language="JavaScript"> <!-- window.captureEvents(Event.CLICK); window.onclick= displayCoords; function displayCoords(e) { alert("x: " + e.pageX + " y: " + e.pageY); } // --> </script> 1.19 При щелчке мыши не выезжает контекстное меню document.oncontextmenu = function(){return false;}; 1.20 Смена курсора мыши function changeCursor(obj,i) { t=i; if(i==0)t="DEFAULT" else if(i==1)t="CROSSHAIR" else if(i==2)t="HEND" else if(i==3)t="MOVE" else if(i==4)t="TEXT" else if(i==5)t="WAIT" obj.style.cursor=t; } Изменение курсора над ссылкой OnMouseOver="changeCursor(this,1)" href="my_file.htm">Ссылка</a> |
Сообщ.
#13
,
|
|
|
1.15 Коментарии при наведение на ссылку не будет работаить в IE 6-
|
Сообщ.
#14
,
|
|
|
Пример Меню на JavaScript:
<script type="text/javascript"> var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3','sub_menu_4','sub_menu_5','sub_menu_6','sub_menu_7','sub_menu_8'); function allclose() { for (i=0; i < id_menu.length; i++){ document.getElementById(id_menu[i]).style.display = "none"; } } function openMenu(id){ for (i=0; i < id_menu.length; i++){ if (id != id_menu[i]){ document.getElementById(id_menu[i]).style.display = "none"; } } if (document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; }else{ document.getElementById(id).style.display = "block"; } } </script> <style type="text/css"> #menu_body{background:#81A192;width:200px} #menu_body ul li{list-style-type:none;border-bottom:1px solid #fff;margin-left:-40px;padding-left:7px} #menu_body ul li a{color:#fff;font-family:verdana,arial,sans-serif;text-decoration:none} #menu_body ul li ul li{border:0;list-style-type:square;color:#fff;list-style-position:inside} #menu_body ul li ul{border-top:1px solid #fff;margin-left:-7px;padding-left:50px} </style> </head> <body onload="allclose()"> <div id="menu_body"> <ul> <li><a href="#" onclick="openMenu('sub_menu_1');return(false)">menu 1</a> <ul id="sub_menu_1"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> <li><a href="#" onclick="openMenu('sub_menu_2');return(false)">menu 2</a> <ul id="sub_menu_2"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> <li><a href="#" onclick="openMenu('sub_menu_3');return(false)">menu 3</a> <ul id="sub_menu_3"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> <li><a href="#" onclick="openMenu('sub_menu_4');return(false)">menu 4</a> <ul id="sub_menu_4"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> <li><a href="#" onclick="openMenu('sub_menu_5');return(false)">menu 5</a> <ul id="sub_menu_5"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> <li><a href="#" onclick="openMenu('sub_menu_6');return(false)">menu 6</a> <ul id="sub_menu_6"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> <li><a href="#" onclick="openMenu('sub_menu_7');return(false)">menu 7</a> <ul id="sub_menu_7"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> <li><a href="#" onclick="openMenu('sub_menu_8');return(false)">menu 8</a> <ul id="sub_menu_8"> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a></li> <li><a href="#">sub menu 4</a></li> <li><a href="#">sub menu 5</a></li> <li><a href="#">sub menu 6</a></li> <li><a href="#">sub menu 7</a></li> </ul> </li> </ul> </div> </body> Реализовывайте это меню под себя (горизонтально и т.д.) |
Сообщ.
#15
,
|
|
|
Core JavaScript Reference v.1.5 [content]
Core JavaScript Reference v.1.5 [index] --- CSS2 [content] CSS2 [index] --- Функция округления числа до нужной степени и обрезания буковок function my_round (obj, stepen) { some_num = obj.value.replace (/[^0-9.]/gi, ''); if (stepen == 0) { if (!(isNaN(parseInt(some_num, 10)))) { res_ = (some_num * Math.pow(10, stepen)); res_ = Math.round (res_); res_ = (res_ / Math.pow(10, stepen)); } } else if (stepen != 0) { if (!(isNaN(parseFloat(some_num)))) { res_ = (some_num * Math.pow (10, stepen)); res_ = Math.round (res_); res_ = (res_ / Math.pow (10, stepen)); } } return res_; } Вызов: <input type = "text" id = "txt3" value = "12345.3213123" onChange = "my_round (this, 0);"> Суть: my_round (параметр1, параметр2); где: параметр1 - что округляем, параметр2 - до какой степени. Т.е.: если нужно получить на выходе целочисленное округленное число, то параметр2 = 0, иначе - округляем до нужной степени округления. |
Сообщ.
#16
,
|
|
|
Функция определяет высоту к примеру дива (по id) и применяет её к контенту, можно использовать для того чтоб поднать контент в самый верх
<script> function RunTime() { //alert(document.getElementById('div_content').offsetheight); document.getElementById('js_cont').style.height = document.getElementById('div_content').offsetHeight; } </script> |
Сообщ.
#17
,
|
|
|
Q: Как отметить все checkbox'ы в форме?
A: function SelectAllCheckbox (chbox, chtext){ for(var i =0; i < document.forms[chbox].elements.length; i++){ if(document.forms[chbox].elements[i].name.indexOf(chtext) == false){ document.forms[chbox].elements[i].checked = true; } } } Пример: <form name=boxes method=POST> <input type=checkbox name=box[]> <input type=checkbox name=box[]> <input type=checkbox name=box[]> <input type=checkbox name=box[]> <input type=checkbox name=box[]> <input type=checkbox name=box[]> <input type=checkbox name=box[]> <input type=checkbox name=box[]> </form> <a href="javascript:SelectAllCheckbox('boxes','box');">Отметить все</a> |
Сообщ.
#18
,
|
|
|
Vadikov, в посте #5 есть ссылка, по которой написано как отмечать чекбоксы, причём короче и элегантнее:
<script type="text/javascript"> function checkAll(oForm, cbName, checked) { for (var i=0; i < oForm[cbName].length; i++) oForm[cbName][i].checked = checked; } </script> <form name="form1" method="post" action=""> <input type="checkbox" name="total" value="checkbox" onClick="checkAll(this.form,'checkbox[]',this.checked)">Отметить все <input type="checkbox" name="checkbox[]" value="checkbox">1 <input type="checkbox" name="checkbox[]" value="checkbox">2 <input type="checkbox" name="checkbox[]" value="checkbox">3 </form> |
Сообщ.
#19
,
|
|
|
Q: Где найти бесплатный WYSIWYG редактор для сайта? Краткий обзор бесплатных WYSIWYG редакторов: http://habrahabr.ru/blogs/webdev/29244/ Краткое содержание: ConceptRTE RTEditor FCKeditor FreeTextBox htmlArea NicEdit openWYSIWYG SPAW Editor TinyMCE |
Сообщ.
#20
,
|
|
|
Q: Как получить доступ к значению поля выбора файла (<input type="file">)? Никак. Настройками большинства браузеров запрещен доступ к значению поля <input type="file">, то есть к полному пути файла, выбранного в это поле. Надеюсь не надо объяснять почему? Существуют некроссбраузерные решения, но здесь они не рассматриваются. |
Сообщ.
#21
,
|
|
|
Q: Как получить координаты элемента? 1. Относительно страницы: function element_point(pElement) { if (!pElement || pElement == document.body || pElement == document.documentElement) return { x : 0, y : 0 }; var ppt = element_point(pElement.offsetParent); return { x : pElement.offsetLeft + ppt.x, y : pElement.offsetTop + ppt.y }; } 2. Если у родительского блока стоит position: relative; то все его дети (у которых позицирование absolute) offsetTop будет указываться не с начала страницы, а с начала родительского блока. Добавляем условие, при котором родительский элемент является началом координат для данного элемента: function element_point(pElement) { if (!pElement || pElement == document.body || pElement == document.documentElement || pElement.style.position == 'static') return { x : 0, y : 0 }; var ppt = element_point(pElement.offsetParent); return { x : pElement.offsetLeft + ppt.x, y : pElement.offsetTop + ppt.y }; } |