92 заметки с тегом
javascript РСС
6 ноября 2009, 7:45
Javascript: Делаем ненавязчивый алерт (попап хабр-стайл)
Тут всё просто, делаем контейнер в начале боди, с абсолютным позиционированием, или просто вставляем пустой тег, или можем по желанию создать тэг с помощью ДЖс и вставить в начало документа
<div id="messages"></div>Дальше небольшой стиль, в котором мы сделаем уголки и прозрачности
div#messages { position: absolute; top: 0px; right: 0px; width: 250px; margin: 0px; padding: 7px; background: transparent; z-index: 2; position: fixed; } div#messages div { color: #fff; padding: 7px; margin-bottom: 7px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-opacity: 0.65; -khtml-opacity: 0.65; opacity: 0.65; filter:alpha(opacity=65); background: #888; font: Georgia 12px #fff; } div#messages div.error {background: #98001b;} div#messages div.message {background: #0d8529;} div#messages div.warning {background: #dd6; color: #333;}А теперь JS
$ = function (oid){ return document.getElementById(oid); } message = function (mtext, mtype, howlong) { var mtype = mtype || 'message'; var howlong = howlong || 5000; var alarm = document.createElement ('div'); alarm.className = mtype; alarm.innerHTML = mtext; alarm.onclick = function () { $('messages').removeChild (alarm); }; $('messages').appendChild (alarm); setTimeout (alarm.onclick, howlong); } error = function (mtext, howlong) { var howlong = howlong || 10000; message(mtext,"error",howlong); } warning = function (mtext, howlong) { var howlong = howlong || 7000; message(mtext,"warning",howlong); }Вкратце:
- Создаём дивку
- Вешаем класс по типу
- Дальше вставляем текст
- Вешаем ивент, чтобы алерт исчез по клику
- Вставляем в контейнер
- и убираем по таймауту
нет комментариев
2 ноября 2009, 10:44
Javscript: get _GET :))) Параметры скриптом
Хеш мы уже можем достать, что же делать с параметрами?:
upd: вылечен баг с хешем
function getUrlVars(){ var vars = [], hash; var hashes = window.location.href.slice (window.location.href.indexOf('?') + 1).split('#'); hashes = hashes[0].split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }
upd: вылечен баг с хешем
21 октября 2009, 5:57
Магия, отменяем загрузку CSS в браузере с включённым JS
Еге-гей! Вот так громкий заголовок ;) Вы спросите для чего? А для того, что бы параллельно загружать несколько стилей, для ускорения так сказать, а можно и дизайн другой для людей с ДЖ-сом замутить ;)) хохо... Код выглядит так:
<script type="text/javascript"> document.write("\x3c!--"); </script> <link type="text/css" href="resource.css" rel="stylesheet"/> <!--[if IE]><![endif]-->И шо, и как? Всё довольно просто ;))
- JS пишет перед стилем комент
- На кондишинал.комментс эта штука закроется
- Получается стили закомментированы, браузер их не грузит (туда можно много их запихать ;)
- И что теперь? А теперь можно вот-так, например, загрузить любой другой стиль %)
- Работает везде!
12 октября 2009, 12:17
Javascript: Get url HASH
document.location.toString().split('#')[1]
upd: из опыта всплыло, что лучше использовать чуть более широкую версию
document.location.toString().split('#',2)[1].split('?',2)[0];
9 октября 2009, 9:21
Великий могучий javascript: Карринг
Каррирование (карринг) — Функция двух переменных x и y f(x,y) = x + y может быть рассмотрена как функция одной переменной x, возвращающая функцию одной переменной y, то есть как выражение . Такой приём работает точно так же для функций любой арности. Это показывает, что функции многих переменных могут быть без проблем выражены в λ-исчислении и являются «синтаксическим сахаром». Описанный процесс превращения функций многих переменных в функцию одной переменной называется карринг (также: каррирование), в честь американского математика Хаскелла Карри, хотя первым его предложилМ. И. Шейнфинкель (1924).
function currying(a) { return function(b) { return function(c) { return (a+b+c); }; }; } currying(1)(2)(3); // => 6
8 октября 2009, 10:46
Динамическая загрузка javascript с обратной связью (load javascript on-demand with callback)
Ну скрипт предельно прост, и продолжает образно говоря тему предшественников
function require(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState) { //IE script.onreadystatechange = function() { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function() { callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }Использовать просто, вот на примере j.mp
require( "http://j.mp/javascript-api.js?version=latest&login=login&apiKey=app_key", function () { BitlyCB.myShortenCallback = function(data) { var result; for (var r in data.results) { result = data.results[r]; result['longUrl'] = r; break; } console.log(result['shortUrl']); }; BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback'); } );
4 октября 2009, 12:42
Распаковка JavaScript (JS unpacker)
У нас есть скрипт запаковыаный Дёней Едвардосом, в виде
eval(function(p,a,c,k,e,r){e=function(c){...Сайт упаковки лежит здесь. Мы идём туда, вставляем наш запакованый код в нижний текстареа. Далье мы копируем бурмарклет что ниже, вставляем в адресную строку и запускаем.
30 сентября 2009, 18:02
Добавляем в Google Analytics русскоязычные поисковики
try { var pageTracker = _gat._getTracker("Ваш ГА номер"); pageTracker._setDomainName(".ваш.домен"); pageTracker._addOrganic("mail.ru", "q"); pageTracker._addOrganic("rambler.ru", "words"); pageTracker._addOrganic("nigma.ru", "s"); pageTracker._addOrganic("blogs.yandex.ru", "text"); pageTracker._addOrganic("webalta.ru", "q"); pageTracker._addOrganic("aport.ru", "r"); pageTracker._addOrganic("akavita.by", "z"); pageTracker._addOrganic("meta.ua", "q"); pageTracker._addOrganic("bigmir.net", "q"); pageTracker._addOrganic("tut.by", "query"); pageTracker._addOrganic("all.by", "query"); pageTracker._addOrganic("i.ua", "q"); pageTracker._addOrganic("online.ua", "q"); pageTracker._addOrganic("a.ua", "s"); pageTracker._addOrganic("ukr.net", "search_query"); pageTracker._addOrganic("search.com.ua", "q"); pageTracker._addOrganic("search.ua", "query"); pageTracker._addOrganic("poisk.ru", "text"); pageTracker._addOrganic("km.ru", "sq"); pageTracker._addOrganic("liveinternet.ru", "ask"); pageTracker._addOrganic("gogo.ru", "q"); pageTracker._addOrganic("gde.ru", "keywords"); pageTracker._addOrganic("quintura.ru", "request"); pageTracker._initData(); pageTracker._trackPageview(); } catch(err) {}
Новый код ГА
var _gaq = _gaq || []; _gaq.push( ['_setAccount', 'UA-XXXXXX-X'], ['_setDomainName', 'your.domain.name'], ["_addOrganic", "mail.ru", "q"], ["_addOrganic","rambler.ru", "words"], ["_addOrganic","nigma.ru", "s"], ["_addOrganic","blogs.yandex.ru", "text"], ["_addOrganic","webalta.ru", "q"], ["_addOrganic","aport.ru", "r"], ["_addOrganic","akavita.by", "z"], ["_addOrganic","meta.ua", "q"], ["_addOrganic","bigmir.net", "q"], ["_addOrganic","tut.by", "query"], ["_addOrganic","all.by", "query"], ["_addOrganic","i.ua", "q"], ["_addOrganic","online.ua", "q"], ["_addOrganic","a.ua", "s"], ["_addOrganic","ukr.net", "search_query"], ["_addOrganic","search.com.ua", "q"], ["_addOrganic","search.ua", "query"], ["_addOrganic","poisk.ru", "text"], ["_addOrganic","km.ru", "sq"], ["_addOrganic","liveinternet.ru", "ask"], ["_addOrganic","gogo.ru", "q"], ["_addOrganic","gde.ru", "keywords"], ["_addOrganic","quintura.ru", "request"], ['_trackPageview'] ); (function() { var ga = document.createElement('script'); ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga.setAttribute('async', 'true'); document.documentElement.firstChild.appendChild(ga); })();
27 сентября 2009, 18:13
Не индексируемый джаваскрипт ;)
Для того что бы поисковики не индексировали ваши ДЖсы, а браузеры не тупили на них при генерации страницы, скрипты лучше всего брать в специальные xml-комменты
<script type="text/javascript"> //<![CDATA[ your.script = here; //]]> </script>Или просто html-комменты
<script type="text/javascript"> <!-- your.script = here; //--> <script>
24 сентября 2009, 13:19
Javascript nl2br
Скрипт с либы Kevin van Zonneveld. Не просто заменяет nl-ки на <br>, а доставляет <br> пред \n
function nl2br (str, is_xhtml) { var breakTag = ''; breakTag = '<br />'; if (typeof is_xhtml != 'undefined' && !is_xhtml) { breakTag = '<br>'; } return (str + '').replace(/([^>]?)\n/g, '$1'+ breakTag +'\n'); }
13 сентября 2009, 15:17
Javascript advancent dump
Хорошо для кастомных объектов, то есть для отладки бизнес-логики, но не ДОМ.
Распарсить атрибуты ДОМелемента, можна используя простой скрипт
Object.prototype.dump = function( excludePrototype, maxDepth, depth ){ var output = [ "" ], key = "", indent = ""; depth = depth || []; maxDepth = maxDepth >= 0 ? maxDepth : -1; excludePrototype = !!excludePrototype; for( var i = 0; i < depth.length; i++ ) indent += " "; if( maxDepth === -1 || depth.length < maxDepth ){ for( key in this ) if( ( this.hasOwnProperty( key ) || excludePrototype ) ){ if( depth.contains( this[ key ] ) ){ output[ 0 ] = "{circular reference}"; } else { depth.push( this[ key ] ); output.push( indent + key + ": " + this[ key ].dump( excludePrototype, maxDepth, depth ) ); depth.pop( this[ key ] ); } } } else output[ 0 ] = "{object}"; return output.join("\n"); }; Array.prototype.contains = function( obj ){ for( var i = 0; i < this.length; i++ ){ if( this[ i ] === obj ){ return true; } } return false; }; // default dumpster method var defaultDumpster = function(){ return this.toString(); }; String.prototype.dump = Number.prototype.dump = RegExp.prototype.dump = Boolean.prototype.dump = defaultDumpster; Function.prototype.dump = function(){ return "{function}"; }; Date.prototype.dump = function(){ return "{" + this.getTime() + "}"; }; alert(obj.attributes.dump());
Распарсить атрибуты ДОМелемента, можна используя простой скрипт
var elm = obj.attributes; for( var x = 0; x < elm.length; x++ ) document.write(elm[x].name + ' ' + elm[x].nodeValue + '</br>');
9 сентября 2009, 13:30
Javascript: Get dynamic image dimensions
У объекта типа IMG есть стандартные свойства width & height, если картинка загружена в ДОМе, но если картинка грузится скриптом, динамически, они пустые (бага старых браузеров, в новых кажись всё ок).
И что же делать? ;) На самом деле всё просто, можно повесить на онлоад небольщой триггер о_О, ну и примерчик для затравочки
И что же делать? ;) На самом деле всё просто, можно повесить на онлоад небольщой триггер о_О, ну и примерчик для затравочки
var imgTesting = new Image(); function CreateDelegate(contextObject, delegateMethod){ return function(){ return delegateMethod.apply(contextObject, arguments); } } function imgTesting_onload(){ alert(this.width + " by " + this.height); } imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload); imgTesting.src = 'yourimage.jpg';
1 сентября 2009, 23:56
JavaScript: submit buttons like default links
При попытке оформить submit как ссылку, мы напоремся на множество костылей, и толстый цсс в итоге. Если подумать, то проще заменить сам сабмит с помощью JavaScriptа на ссылку, с его екшеном и ивентами ;)
По сути, функция не несёт какой-либо пользы, но на ней просто много фич %), и вообще хорошая тренировка для мозгов. Задача была придумана случайно, и от её решения получен клёвый сатисфекшен.
зы: может кто подскажет, как избавится от eval?
function submitToLinks(){ // Если старые брозеры, уходим ;) if(!document.getElementById || !document.createTextNode){return;} var inputs,i,newLink,newText,leng; var formId = -1; // Соберём все инпуты и посчитаем inputs=document.getElementsByTagName('input'); leng = inputs.length; // поехали по инпутам for (i = 0; i < leng; i++){ // не определён - уходим if (typeof inputs[i] == "undefined") return; // проверка на тип инпута, нам нужны сабмиты check = inputs[i].getAttribute && inputs[i].getAttribute('type'); // если тип пустой, не строка, или 0 - следующий if (typeof check != "string" || check.length == null || check.length == 0) continue; // если тип не сабмит - следующий if(check.toLowerCase()!='submit') continue; // приступим к операции на сабмите var submit2kill = inputs[i]; // создадим тэг А, с равными value newLink=document.createElement('a'); newText=document.createTextNode(submit2kill.getAttribute('value')); newLink.appendChild(newText); // если у сабмита был онКлик, прибиндим к ссылке if (typeof submit2kill.onclick == "function"){ if (newLink.addEventListener){// не ИЕ newLink.addEventListener('click', submit2kill.onclick, false); } else if (newLink.attachEvent){// ИЕее newLink.attachEvent('onclick',submit2kill.onclick); } } // пора узнать в какой мы форме, их то может много быть var ourform = submit2kill.parentNode; while (ourform.tagName.toLowerCase() != "form") { // наш шабмит можеть быть в яйце, а яйцо в курке и т.д. // то есть, если сабмит вложен, ищем пока форму не найдём // если нету формы, что мы сдесь забыли-то? if (ourform.tagName.toLowerCase() == "body") return; ourform = ourform.parentNode; } // у каждой формы есть порядковый номер по ДОМу // так его выцепить нельзя, ну мы тогда его приклеим if (typeof ourform.number == "undefined") { formId++; ourform.number = formId; } // у формы может быть ещё и вент онСабмит, вешаем через ЕвилМагию ;) // чёрная сторона ДЖс if (typeof ourform.onsubmit == "function" && typeof ourform.submitReplacer == "undefined") { // в кратце, мы старый нативный сабмит, перебинживаем // и запускаем опосля ивента онСабмит. eval( "document.forms["+formId+"].submitReplacer = " +"document.forms["+formId+"].submit;" +"document.forms["+formId+"].submit = function(){" +"document.forms["+formId+"].onsubmit();" +"document.forms["+formId+"].submitReplacer();" +"}" ); } // делаем таки для ссылки/формы сабмит екшон newLink.setAttribute('href','javascript:document.forms['+formId+'].submit()'); // убиваем старый добрый сабмит, и вешаем надёжный линк ;) submit2kill.parentNode.replaceChild(newLink,submit2kill); // после убийства, массив inputs странным образом худает // мы это начинаем учитывать декриментом i--; } } // по загрузке делаем магию window.onload=submitToLinks;
По сути, функция не несёт какой-либо пользы, но на ней просто много фич %), и вообще хорошая тренировка для мозгов. Задача была придумана случайно, и от её решения получен клёвый сатисфекшен.
зы: может кто подскажет, как избавится от eval?
30 августа 2009, 17:24
DHTML&CSS: prohibit selection (как запретить выделение текста)
В ИЕ есть ивент onSelectStart, достаточно повесить return false; и будет счастье, а вот в других браузерх есть magik-css
Всё это можно делать и скриптом, для разных элементов, или привязать к jQuery
.noselect { -moz-user-select: none; //Firefox -khtml-user-select: none; //Safari user-select: none; //работает в css3 }В конечном итоге получаем нечто такое
<div onSelectStart="return false;" class="noselect">unselectable text</div>
Всё это можно делать и скриптом, для разных элементов, или привязать к jQuery
function prohibitSelection(obj){ obj.style.cursor = "default"; if (typeof obj.onselectstart!="undefined") //IE obj.onselectstart=function(){return false;} else if (typeof obj.style.MozUserSelect!="undefined") //Firefox obj.style.MozUserSelect="none"; else if (typeof obj.style.KhtmlUserSelect!="undefined") //WebKit obj.style.KhtmlUserSelect="none"; else obj.onmousedown=function(){return false;} //All other(Opera) }
19 августа 2009, 7:37
Javascript: Емулируем прототип для IE (Element.prototype в ИЕ)
Как всем известно, в нашем «дорогом» ИЕ версий ниже 8, нету поддержки Element.prototype (а также HTMLElement, Node, Object), образно говоря, ИЕ просто ложил на стандарты, у него свой путь, и зачем им вообще был этот «стандарт» %)
Исходя из предыдущей моей статьи, нужно как-то заставить понимать этого ирода ;) нашу надстройку над прототипом.
Так как ИЕ довольно «гибкий» браузер, мы его будем учить этому стандарту. Для начала мы просто создадим функцию Element, и через прототайп добавим нужную нам функцию
Следующий танец, это танец с бихейворами, или проще говоря css приблудами ИЕ, так называемыми файликами *.htc, ибо возможности раньше добавить паблик метод в старых ИЕ нету, всё обусловлено «архитектурой».
Дальше будет универсальная функция, которая добавит нашу функцию прототипа ко всем HTML-элементам (Только для ИЕ)
Вот и всё, поздравляем Вас, наш прототип для ИЕ работает, гип-гип ;) УРА!
Исходя из предыдущей моей статьи, нужно как-то заставить понимать этого ирода ;) нашу надстройку над прототипом.
Так как ИЕ довольно «гибкий» браузер, мы его будем учить этому стандарту. Для начала мы просто создадим функцию Element, и через прототайп добавим нужную нам функцию
if (typeof(Element) != "object") { Element = function () {}; } Element.prototype.pSib = function() { var node = this; while (node = node.previousSibling) { if (node.nodeType != 3) return node; } return null; }И наши приключения только начались, ибо в ИЕ всё также пСиб не работает.
Следующий танец, это танец с бихейворами, или проще говоря css приблудами ИЕ, так называемыми файликами *.htc, ибо возможности раньше добавить паблик метод в старых ИЕ нету, всё обусловлено «архитектурой».
<PUBLIC:COMPONENT> <PUBLIC:METHOD NAME="pSib" INTERNALNAME="_pSib" /> <script type="text/javascript"> var el = new Element; _pSib = el.pSib; </script> </PUBLIC:COMPONENT>Не забываем подключить наш бихейвор
<!--[if lte IE 7]>
<style type="text/css">
* { behavior: url(test.htc); }
</style>
<![endif]--> И что всё? А фигли ;))) Дальше будет универсальная функция, которая добавит нашу функцию прототипа ко всем HTML-элементам (Только для ИЕ)
var __IEcreateElement = document.createElement; document.createElement = function (tagName) { var element = __IEcreateElement(tagName); var interface = new Element; for (method in interface) element[method] = interface[method]; return element; }Образно говоря, мы расширяем ИЕ-метод createElement, нашим функционалом. Желательно запихать функцию под кондишинал комментс, или в ИФик где создаётся функция Element.
Вот и всё, поздравляем Вас, наш прототип для ИЕ работает, гип-гип ;) УРА!
- Смотрим демо в ИЕ ниже 8го, а вообще кроссбраузерно
- Читаем на английском более детально
- Подчеркнул отсюда ;)
18 августа 2009, 15:06
Кавайная форма, или делаем Логин-форм как у Яндекса. (Labels as hints in form inputs)
У нас есть простая Логин-форма
Дальше будет JavaScript
<form action="#" method="post"> <div class="label_input"> <label for="auth_login">Логин</label> <input type="text" name="auth_login" id="auth_login"> </div> <div class="label_input"> <label for="auth_password">Пароль</label> <input type="password" name="auth_password" id="auth_password"> </div> <input type="submit" value="Отправить"> </form>Метку (label) и инпут зарание возмём в див, пропишем ему в css относительное позиционирование, остальные елементы оформим на свой вкус.
Дальше будет JavaScript
function showLabels(inputs){ // список инпутов приходит обьектом {'input_id':''} // если нет, то мы уходим if (typeof(inputs) != "object") return; // функция которая прячет лейбл, если в форме есть данные function inputValueSH(someinput){ // что бы надёжно спрятать, запихнём повыше // почему-то свойство display не фурычит if (someinput.value) pSib(someinput).style.top = '-9999px'; // данные есть else pSib(someinput).style.top = '0'; // данных нет } for (var i in inputs){ // дальше, разбиваем на список // аля foreach для бедных var obj = document.getElementById(i); // при блуре вызываем функцию проверки obj.onblur = function(){ inputValueSH(this);}; // когда сфокусировались, убираем метку obj.onfocus = function(){ pSib(this).style.top = '-9999px'; }; // проверим на всякий ешё разок inputValueSH(obj); } return; } addLoadEvent(function() { // настраиваем метки, для auth_login и auth_password showLabels({'auth_login':'','auth_password':''}); });
16 августа 2009, 8:41
Javascript: получение/редактирование Doctype
Просто тривиальная задача, которая возникла в голове из-за комментариев к одному из топиков.
У нормальных браузеров есть гет-метод(функция) document.doctype из которой мы можем узнать о нашем Доктайпе, с помощью параметров name, publicId, systemIdзадницу двойной парентНод от тела документа, то естьи т. д. браузерах, мы просто меняем нодВалью, а в других, нормальных, барузерах мы имеем только гет-функцию, и при попытке передать значение, получим еррор, что функция онли геттер, и у неё нету возможности сеттер.
Но, как говорится, на каждого лалала, есть своябалда управа. Мы просто заменим доктайп новым чилдом, вместо его редактирования %)
ПыСы: в опере, это я делал для неё, изменение доктайпа влеяет на рендеринг страниц, в других ничего не происходит. И ещё, изначально опера ведёт себя как нормбраузер, а потом, как ИЕ о_О гавнецо кароче говоря )))
У нормальных браузеров есть гет-метод(функция) document.doctype из которой мы можем узнать о нашем Доктайпе, с помощью параметров name, publicId, systemId
<!-- вот такая строчка --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- соответствует такой --> <!DOCTYPE name PUBLIC "publicId" "systemId">У иных, темных браузерах, доступ к Доктайпу, организован через
document.body.parentNode.parentNode.firstChild.nodeValueИтого, что бы узнать о Доктайпе получаем простую функцию
function getdoctype() { if (document.doctype) { alert("document.doctype:" +"\nname: " + document.doctype.name +"\npublicId: " + document.doctype.publicId +"\nsystemId: " + document.doctype.systemId); } else if (document.body.parentNode) { var dbp = document.body.parentNode; alert("document.body.parentNode:" +"\n.parentNode.firstChild.nodeValue: " + dbp.parentNode.firstChild.nodeValue); } }Теперь мы знаем, как его получить, сразу становится интерестно, можно ли его изменить ;). В ИЕ
Но, как говорится, на каждого лалала, есть своя
var newDoctype = document.implementation.createDocumentType(name,publicId,systemId); document.doctype.parentNode.replaceChild(newDoctype, document.doctype);
ПыСы: в опере, это я делал для неё, изменение доктайпа влеяет на рендеринг страниц, в других ничего не происходит. И ещё, изначально опера ведёт себя как нормбраузер, а потом, как ИЕ о_О гавнецо кароче говоря )))
10 августа 2009, 23:06
Javascript: Как изменить свойства Объекта, не создавая классы, то есть без ООП
Для этого нужна функция eval. Опа, взял и раскрыл все секреты ;)
Вкратце: у нас есть Объект (образно говоря дерево), и что бы им нормально управлять нужно написать куча ООП кода :( А иногда это делать просто лень. Ведь всегда проще написать
Дальше будет ссылка на дурацкий пример, в котором можно:
ps:помните, так делать с объектами нельзя,только на свой страх и риск
Вкратце: у нас есть Объект (образно говоря дерево), и что бы им нормально управлять нужно написать куча ООП кода :( А иногда это делать просто лень. Ведь всегда проще написать
eval("delete tree['branch']['leaf'][123]"); // или eval("delete tree.branch.leaf[123]"); // что по сути одно и тоже
Дальше будет ссылка на дурацкий пример, в котором можно:
- вставлять (добавлять) ноды в объект;
- переименовывать ноды (как со смещением позиции так и без);
- удалять ноды.
- подсчета вложенности дерева;
- генерации евал-предложения (координаты объекта);
- сделан экспорт объекта JSON-like :).
- генерации дерева, используя простой JS/CSS (можно сворачивать/разворачивать);
- прикручено контекстное меню (right-click);
- прикручен даблклик.
ps:помните, так делать с объектами нельзя,только на свой страх и риск
7 августа 2009, 23:50
Javascript: проверка объекта на родителя ;)
Какого такого родителя, вы спросите? :)) Ну их много: Javascript object, DOM node, DOM element, etc — и они как бы разные, и к каждому нужен свой подход ;)
// даст true если это ветка DOM function isNode(o){ return ( typeof Node === "object" ? o instanceof Node : typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string" ); } // отдаст true если это DOM елемент function isElement(o){ return ( typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2 typeof o === "object" && o.nodeType === 1 && typeof o.nodeName==="string" ); }Если ни-то, ни-это ;) значит у нас JS-object ;)
4 августа 2009, 18:52
Javascript insert in html body some tag
Иногда нужно что-то добавить к телу документа, самый быстрый способ вот
if (document.body.firstChild){ document.body.insertBefore(sometag, document.body.firstChild); } else { document.body.appendChild(sometag); }Есть конечно и извращенный метод
var Our_body = document.getElementsByTagName('body')[0]; Our_body.appendChild(sometag);Но в итоге он короче ;) но медленнее
