Собственный модуль на jQuery
Здравствуйте.
Вопрос, наверное глупый, но как писать собственный модуль на jQuery? Взял за основу вот этот пример: http://www.rsdn.ru/article/inet/jQuery.xml Пишу в .php файле: ...
<script type="text/javascript" src="ingredientsStorage.js"></script>
...
<script type="text/javascript" charset="utf-8">
$("#ingredients input").click(function(){
$("#ingredients input").check('on');
});
</script>
Сам ingredientsStorage.js (в точности, как в примере из ссылки выше) jQuery.fn.check = function(mode) {
// если mode не определен, используем 'on' по умолчанию
var mode = mode || 'on';
// В функцию неявно передана коллекция выбранных элементов.
// Поэтому с этой коллекцией можно работать, как с любой другой
// коллекцией элементов в jQuery
// В нашем случае мы воспользуемся методом each()
return this.each(function()
{
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};
В результате FireBug пишет: $("#ingredients input").check is not a function [Break on this error] $("#ingredients input").check('on');\r P.S.: сайт пишу на Zend Frameword, но это не должно никак влиять на расширение jQuery своим модулем. |
Цитата:
А киньте-ка минимальную страничку, на которой не работает. Я просто скопипастил содержимое ingredientsStorage.js в консоль, и плагин работает. UPD Вот рабочий пример. Отличие в присутствии .ready, иначе не будет бинда. Но ошибка в консоль все равно не должна падать. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Без имени</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript"><!--
jQuery.fn.check = function(mode) {
// если mode не определен, используем 'on' по умолчанию
var mode = mode || 'on';
// В функцию неявно передана коллекция выбранных элементов.
// Поэтому с этой коллекцией можно работать, как с любой другой
// коллекцией элементов в jQuery
// В нашем случае мы воспользуемся методом each()
return this.each(function()
{
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};
//--></script>
<script type="text/javascript"><!--
$(function(){
$(':checkbox').click(function(e){
$(':checkbox').check('on');
});
});
//--></script>
</head>
<body>
<p><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /></p>
</body>
</html>
|
Это кажется бредом, но код заработал после перезагрузки компьютера. Может это как-то связано с кэшем, денвером и т.п.?
|
Даже не знаю, что ответить :)
Да, по поводу плагина: попробуйте сделать $(':checkbox').click(function(e){
$(':checkbox').check('toggle');
});
И сразу видно неприятный баг: чекбокс, на который кликнули, ведет себя неправильно. |
Уже и не знаю на что грешит, думаю скоро сойду ума. Если мой код запихнут в отдельный html файл - все работает. Когда вношу его же в на страницу сайта, который строю на Zend Framework - не работает. Как найти причину...
|
Скиньте ссылку на проблемную страницу.
|
Все, надеюсь нашел окончательную причину проблемы. У Zend Framework есть такой плагин Zend Debug, который облегчает разработку сайта. Когда его отключил, все заработало!!! Все силы из меня высосала эта хрень. Теперь вопрос, как работать без таких ошибок при включенном Zend Debug.
Ссылку к сожалению скинуть не могу, т.к. работаю локально, а все сайт скидывать не имеет смысла. Проблемный код вот: <script type="text/javascript" charset="utf-8">
if (typeof jQuery == "undefined") {
var scriptObj = document.createElement("script");
scriptObj.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
scriptObj.type = "text/javascript";
var head=document.getElementsByTagName("head")[0];
head.insertBefore(scriptObj,head.firstChild);
}
var ZFDebugLoad = window.onload;
window.onload = function(){
if (ZFDebugLoad) {
ZFDebugLoad();
}
jQuery.noConflict();
ZFDebugCollapsed();
};
function ZFDebugCollapsed() {
if (1 == 1) {
ZFDebugPanel();
jQuery("#ZFDebug_toggler").html("»");
return jQuery("#ZFDebug_debug").css("left", "-"+parseInt(jQuery("#ZFDebug_debug").outerWidth()-jQuery("#ZFDebug_toggler").outerWidth()+1)+"px");
}
}
function ZFDebugPanel(name) {
jQuery(".ZFDebug_panel").each(function(i){
if(jQuery(this).css("display") == "block") {
jQuery(this).slideUp();
} else {
if (jQuery(this).attr("id") == name)
jQuery(this).slideDown();
else
jQuery(this).slideUp();
}
});
}
function ZFDebugSlideBar() {
if (jQuery("#ZFDebug_debug").position().left > 0) {
document.cookie = "ZFDebugCollapsed=1;expires=;path=/";
ZFDebugPanel();
jQuery("#ZFDebug_toggler").html("»");
return jQuery("#ZFDebug_debug").animate({left:"-"+parseInt(jQuery("#ZFDebug_debug").outerWidth()-jQuery("#ZFDebug_toggler").outerWidth()+1)+"px"}, "normal", "swing");
} else {
document.cookie = "ZFDebugCollapsed=0;expires=;path=/";
jQuery("#ZFDebug_toggler").html("«");
return jQuery("#ZFDebug_debug").animate({left:"5px"}, "normal", "swing");
}
}
function ZFDebugToggleElement(name, whenHidden, whenVisible){
if(jQuery(name).css("display")=="none"){
jQuery(whenVisible).show();
jQuery(whenHidden).hide();
} else {
jQuery(whenVisible).hide();
jQuery(whenHidden).show();
}
jQuery(name).slideToggle();
}
</script>
|
Ну, по набору этих функций я тоже вряд ли что-то скажу. Сделайте тестовую самодостаточную страницу, которая демонстрирует проблему -- потихоньку вырубайте со страницы все ненужное, следя, чтобы репродьюсился баг. Глядишь, и станет видно, что к чему.
|
Методом исключения выяснил что проблема вот в этих строках кода
var ZFDebugLoad = window.onload;
window.onload = function(){
if (ZFDebugLoad) {
ZFDebugLoad();
}
jQuery.noConflict();
ZFDebugCollapsed();
};
Похоже проблема в $(). Надо писать jQuery(). Я прав? |
Закоментировал
//jQuery.noConflict(); и все заработало |
| Часовой пояс GMT +3, время: 06:26. |