Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jquery или сделать самому? / 19 сообщений из 19, страница 1 из 1
04.03.2010, 15:17:47
    #36502688
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
Приблуд вроде не особо много - определение точной позиции static элемента относительно окна браузера, плавно разворачивающиеся/сворачивающиеся блоки, постепенное появление полупрозрачного блока (fadeIn), назначение всем дочерним элементам конкретного блока определённых свойств (точнее фона), обработка в js-файле событий элементов с определённым id или свойством.
В самой странице написание скриптов запрещено, только отдельно подключаемый кешируемый *.js.
Вроде всё.
Вопрос - долго это всё самому переделывать на js или лучше оставить всё как есть, на jquery - 56 кб (хотя большинство из них ненужного мусора, но интернет нынче быстрый в крупнейших городах России)?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.03.2010, 15:20:17
    #36502703
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
st_st,

Самому - раз плюнуть.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.03.2010, 15:20:46
    #36502705
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
st_stjquery - 56 кбУ иных страниц html на 50 мб, так что для одной загрузки это вообще копейки
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.03.2010, 12:19:35
    #36508588
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
Яростный Мечst_stjquery - 56 кбУ иных страниц html на 50 мб, так что для одной загрузки это вообще копейки

Встречаются и мегабайтные страницы, но в основном у начинающих.
56 кб тоже много, на dial-up в лучшем случае 12 секунд загрузки только одного js (если конечно не включен gzip/deflate). Поэтому хочется как можно больше уменьшить вес страницы.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.03.2010, 17:18:07
    #36512272
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
Так, jquery понемногу поддаётся.
авторопределение точной позиции static элемента относительно окна браузера jquery делать это вроде неумеет (глючный offset() даже не рассматриваем), ну да ладно, полный перебор parent + дописывание корректировочных пикселей решило проблему.
авторобработка в js-файле событий элементов с определённым id решено.
авторобработка в js-файле событий элементов с определённым стилемв стадии разработки.
Допустим у элемента есть стили - "bn bs". Пока первое, что пришло на ум, через indexOf найти например bn и проверить символы справа и слева на пробелы и ". Есть ли более красивые варианты?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.03.2010, 17:26:37
    #36512302
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
st_st...Допустим у элемента есть стили - "bn bs". Пока первое, что пришло на ум, через indexOf найти например bn и проверить символы справа и слева на пробелы и ". Есть ли более красивые варианты?
Нехорошо как-то по стилю. Может лучше такому элементу какой-нибудь "левый" атрибут присвоить, например:
Код: plaintext
<div leftattr="чего-то там"></div>
и проверять атрибут leftattr?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.03.2010, 17:52:45
    #36512392
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
Элементам можно id присвоить и по нему изменять свойства стилей. Но тут тоже вопрос, если многим элементам задан один и тот же стиль и по нему можно обратиться к ним, зачем тогда id. Навеяно от jquery - "$(.bn)".
Пока код такой:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
var allTags=new Array();

function getClass(theClass,node,tag,stl,ord) {

if (node==null) node=document;
if (tag==null) tag='*';

var allTags=node.getElementsByTagName(tag);

	for (i= 0 ; i<allTags.length; i++) {

		if (allTags[i].className==theClass) {

		eval('allTags[i].style.'+stl+'=ord');

		}
	}
}
Вызов:
Код: plaintext
1.
getClass('bc bn',this,null,'background','url("/images/but_back.gif") repeat-x');
html:
Код: plaintext
1.
<div class="bc bn">xxx</div>
Приходится указывать два класса - 'bc bn', хотя изменения должны быть сделаны элементам класса 'bc', назависимо, в паре он с другими классами или нет. Поэтому хочется идентифицировать 'bc' как класс, может ведь быть 'abcd xxx', indexOf выдаст наличие 'bc', но это никак не класс. Пока думаю +- символом искать пробел, либо ", но может есть идея лучше.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.03.2010, 09:19:42
    #36513108
iConst
iConst
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
.hasClass( className )
Перевернув мир - оглянись, может перевернулся ты сам?!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.03.2010, 15:39:59
    #36514373
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
.hasСlass - это что-то вроде из jquery, от которого и пытаюсь избавиться.

Пока набросал код, сверяю по пробелам, ещё не тестировал, получилось нечто вроде:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
// if (allTags[i].className==theClass)  //bc==bc// { return; } иначе - 
var i= 0 ;
var valid= 0 ;
var x='bc bn bf';
var cls='bn';
while (x.indexOf(cls,i)!=- 1 ) {
	items=x.indexOf(cls,i);

	// берём предыдущий символ, спереди ничего нет

	if ((items+cls.length==x.length) && (items!= 0 )) {
		symb=x.substr(x.length-(cls.length+ 1 ), 1 );
		if (symb==" ") { valid= 1 ; break; }
	}
	else {

		// берём следующий символ, сзади ничего нет

		if ((cls.length!=x.length) && (items== 0 )) {
				symb=x.substr(cls.length, 1 );
				if (symb==" ") { valid= 1 ; break; }
		}
		else {

		// берём по символу спереди и сзади

			if ((items+cls.length!=x.length) && (items!= 0 )) {
				symb1=x.substr(items- 1 , 1 );
				symb2=x.substr(items+cls.length, 1 );
				if ((symb1==" ") && (symb2==" ")) { valid= 1 ; break; }
			}
		}
	}
i=x.indexOf(cls,items+cls.length);
if (i==- 1 ) break;
}

alert(valid);
Осталось это всё соединить с главной функцией и прогнать на предмет ошибок.

ShSerge
Самому - раз плюнуть.


С пивом нормально. А без оного процесс как-то медленно идёт.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2010, 17:03:59
    #36517318
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
Соединено, проверено, вроде работает.
Получилось так:
Код: plaintext
1.
getClass('bm',null,null,'func','onmouseover',"getClass('bc',this,null,'css','background','url(/images/but_back.gif) repeat-x');getClass('bd',this,null,'css','background','url(/images/but_l.gif) no-repeat');");
что означает - при наведении указателя мыши на элемент с классом 'bm', изменять фон у дочерних элементов с классами 'bc' и 'bd'.

Выглядит немного криво по сравнению с jquery -
Код: plaintext
1.
2.
3.
4.
$(".bm").hover(function(){ 
$(this).children(".bc").css("background","url('/images/but_back.gif') repeat-x");
$(this).children(".bd").css("background","url('/images/but_l.gif') no-repeat");
});
но зато в сумме весит всё это дело намного меньше.

Осталось последних 3 испытания и прощай jquery -
Код: plaintext
1.
2.
3.
 1  - $(document).not('#m_sh').click(function() { });
 2  - $('#cat').slideToggle('slow');
 3  - $("#l_cnt").fadeOut("slow");
Если есть мысли как реализовать, пишите (код особо не нужен).

P.S. Сам пока не искал решений и не вникал в оставшиеся 3 пробемы.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2010, 10:15:55
    #36518020
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
Добавил function, чтобы в одной строке обработчик не писать.
Код: plaintext
1.
2.
3.
4.
getClass('bm',null,null,'func','onmouseover',function() {
	getClass('bc',this,null,'css','background','url(/images/but_back.gif) repeat-x');
	getClass('bd',this,null,'css','background','url(/images/but_l.gif) no-repeat');
});
Первая проблема -
Код: plaintext
1.
 1  - $(document).not('#элемент').click(function() { });
Решение -
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
$x('элемент').onclick=function(e) {
открыть_элемент;
e=e||window.event; // internet explorer иначе не понимает
e.stopPropagation?e.stopPropagation():(e.cancelBubble=true); // опять этот ie...
}

document.onclick=function() {
if (элемент_открыт) закрыть_элемент;
}
Осталось теперь плавное раздвижение и нарастающее уменьшение прозрачности.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2010, 02:30:18
    #36519942
vladgrig
vladgrig
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
авторДопустим у элемента есть стили - "bn bs". Пока первое, что пришло на ум, через indexOf найти например bn и проверить символы справа и слева на пробелы и ". Есть ли более красивые варианты?
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
HTMLDocument.prototype.getElementsByClassName = function (c) {       
        var a = [];
        var r = new RegExp('\\b' + c + '\\b');
        var e = this.getElementsByTagName("body")[ 0 ].getElementsByTagName("*");
        for (var i =  0 , j = e.length; i < j; i++) if (r.test(e[i].className)) a.push(e[i]);
        return a;
};
вызов
Код: plaintext
1.
var ele = document.getElementsByClassName("bs");
Успехов!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2010, 12:06:45
    #36520484
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
vladgrig , спасибо, забыл я совсем о регулярках, да и запомнить их всё никак не могу.

Обновлённый код:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
function getClass(cls,node,tag,type,stl,ord) {

var r=new RegExp('\\b' + cls + '\\b');

if (node==null) node=document;
if (tag==null) tag='*';

var allTags=node.getElementsByTagName(tag);

	for (i= 0 ; i<allTags.length; i++) {

		if (r.test(allTags[i].className)) {

			if (type=='css') eval('allTags[i].style.'+stl+'=ord');

			if (type=='func') eval('allTags[i].'+stl+'='+ord);

		}
	}
}
Вызов:
Код: plaintext
1.
2.
3.
4.
getClass('bm',null,null,'func','onmouseover',function() {
	getClass('bc',this,null,'css','background','url(/images/but_back.gif) repeat-x');
	getClass('bd',this,null,'css','background','url(/images/but_l.gif) no-repeat');
});
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2010, 13:30:44
    #36520745
vladgrig
vladgrig
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
хм...
а ты не мог бы словами объяснить, что должен делать твой код? + кусочек искомой разметки.
я так понял - в элементе с класснэйм "bm" по маусовер у дочерних элементов с класснэйм "bc" и "bd" поменять бэкграунд!?
ИМХО ты как то не так, и не туда идёшь!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2010, 14:15:29
    #36520947
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
При возникновении события (всего, что начинается на "on" - onclick, onfocus и т.д.) у элемента с определённым классом, назначать свойства/обработчики_функций его определённым дочерним элементам, которые могут распознаваться как по классу, так и по id.

Приведённый код вызова - это один из частных примеров.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2010, 18:13:41
    #36524489
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
Добрался до прозрачности - opacity, плавное появление/исчезание элемента.
В IE js сильно тормозит по сравнению с другими браузерами. Видимо придётся делать поправку на задержку вызова функции. C jquery точно так же тормозил, но там оставили всё как есть. К тому же ie (даже восьмой) не понимает стилевое свойство opacity, приходится лепить через фильтры.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.03.2010, 03:26:28
    #36527312
vladgrig
vladgrig
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
авторПри возникновении события (всего, что начинается на "on" - onclick, onfocus и т.д.) у элемента с определённым классом, назначать свойства/обработчики_функций его определённым дочерним элементам, которые могут распознаваться как по классу, так и по id.

Приведённый код вызова - это один из частных примеров.
Ну незнаю, у мну получилось вот так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
$ = function(context) {

    var o = [];
    
    o.children = function(context) {

        for (var i =  0 ; i < this.length; i++) {
            return $(context, this[i]);
        }
    }
    o.mouseover = function(func) {

        attachEvent(this, "mouseover", func);
        return o;
    }
    o.mouseout = function(func) {

        attachEvent(this, "mouseout", func);
        return o;
    }
    o.style = function(val) {

        for (var i =  0 ; i < this.length; i++) {
            this[i].style.cssText = val; ;
        }
    }
    function attachEvent(ele, event, func) {

        for (var i =  0 ; i < ele.length; i++) { 

            eval("ele[i].on" + event + "=" + func);
        }
    }

    var classname = $.arguments[ 0 ];
    var ele = $.arguments[ 1 ];
    var regexp;

    if (typeof (classname) == "string") {

        regexp = new RegExp('\\b' + classname.slice( 1 ) + '\\b');
    }
    else {

        o.push(classname)
        return o;
    }

    ele = (ele ? ele : document).getElementsByTagName("*");

    for (var i =  0 ; i < ele.length; i++) {

        if (regexp.test(ele[i].className)) o.push(ele[i]);
    }

    return o;
}
Стр. с вызовом:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
    <script type="text/javascript">
        function doWork() {
            
            $(".bm")
            .mouseover(
                function() {
                    $(this).children(".bp").style("background-color:Black;");
                }
            )
            .mouseout(
                function() {
                    $(this).children(".bp").style("background-color:White;");
                }
            );
        }

    </script>

    <p class="bm">
        this is bm <b class="bp">this is bp</b><b>this is bp  1 </b><b class="bp">this is bp  2 </b>
    </p>
    <p>
        this is p <b>this is b in p</b>
    </p>
    <p class="bm">
        this is bm <b class="bp">this is bp</b><b>this is bp  1 </b><b class="bp">this is bp  2 </b>
    </p>
    <input id="Button1" onclick="doWork();" type="button" value="button" />
Не всё гладко, конечно. НО! Понравилась возможность расширять и дополнять (в стиле ООП!)

ЗЫ: вообще было интересно - даже книгу начал читать LOL! ;)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.03.2010, 11:40:36
    #36541699
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
Немного занят был укрощением ie6, пришлось пока отвлечься от этого js.
Код пока не пробовал в деле, но на первый взгляд вроде должно нормально работать. Событий впринципе не так много (onclick, onmouseover, onfocus и т.д.), можно пожертвовать (кило)байтами кода и все их перечислить.
Ладно, закончу с ie6 и вернусь к этому вопросу.

По теме ie6 -
Код: plaintext
1.
2.
3.
4.
.h {
width:expression(document.body.clientWidth <  980 ? "980px": "auto");
width:expression(document.getElementById('pad').offsetWidth< 980 ?'980px':'auto');
}
от любой из этих строк при ширине <980 (можно открыть в развёрнутом окне и затем устроить ресайз) ie6 намертво виснет и ietester тоже. Пока ищу причину.

Ещё ie6 при position:absolute непонимает одновременно заданные параметры положения (например top и bottom), hover непонимает, png прозрачность непонимает и т.д., всё заменяется js. В итоге скриптов получилось больше, чем css.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.03.2010, 12:28:23
    #36541880
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery или сделать самому?
Решение -
Код: plaintext
1.
width:expression(document.getElementById('pad').offsetWidth< 981 ?'980px':'auto');
нужен дополнительный минимум 1 пиксель, иначе ie6 уходит в бесконечный цикл (видимо так задумано создателем ie6).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jquery или сделать самому? / 19 сообщений из 19, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 2035ms
Закрыть
start [/forum/search_topic.php?author=usver_dc&author_mode=last_posts&do_search=1]:
 0ms
get settings:
 7ms
get forum list:
 11ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 795ms
get topic data:
 15ms
get forum data:
 4ms
get page messages:
 61ms
get tp. blocked users:
 1ms
others: 1110ms
total:  2035ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]