Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.10.2008, 19:13
Аватар для HelpeR
Профессор
Отправить личное сообщение для HelpeR Посмотреть профиль Найти все сообщения от HelpeR
 
Регистрация: 21.10.2008
Сообщений: 241

Lightbox моя версия
Здравствуйте!
Решил написать свою версию Lightbox'а. Если будут замечания всегда рад.
Тестировал на IE6 IE7 FF2 FF3 Opera9.27 Opera AC.
Принцип работы. Метод setup применяется тольк один раз (при первом вызове эффекта) для создания всех элементов эффекта. Далее при последующих выховах, элементы уже готовы (т.е. не создаются заново) и опять применяются к эффекту.
Конструктор HelpeR я не стал нагружать, что бы при его вызове объект не был нагружен.
Очень хочется отработать ее до полной и четкой работоспособности. Поэтому мне нужны ваши замечания и советы.
Заранее большое спасибо за помощь!
Вложения:
Тип файла: zip js.zip (6.9 Кб, 16 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 29.10.2008, 19:46
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

this.browserVersion.indexOf('MSIE 6.0') != -1
и так выдаст true или false, для чего это записывать в виде
(this.browserVersion.indexOf('MSIE 6.0') != -1) ? true : false;

и скобки можно убрать.


Чтобы не писать много раз:
HelpeR.prototype…

можно использовать такую конструкцию:
HelpeR.prototype = {
  method1: function(…) {
   …
  },
  method2: function(…) {
   …
  },
  method3: function(…) {
   …
  }
};


Удобнее было бы, если скрипт обрабатывал только ссылки с указанным классом, например:
<a href="image.png" class="lightbox">Image</a>

а не все ссылки на странице.

А так же способ назначения обработчика событий, который вы используете сейчас:
HelpeR.prototype.processing = function(obj) 
{
…
    obj.onclick = function() 
	{
…
	  return false;
	}
  }
}

Лучше переписать с использованием addEventListener/attachEvent.

И совет: ставь точку с запятой там, где это возможно:
… = function(…) {
    …
}; <—
Ответить с цитированием
  #3 (permalink)  
Старый 29.10.2008, 19:50
Аватар для HelpeR
Профессор
Отправить личное сообщение для HelpeR Посмотреть профиль Найти все сообщения от HelpeR
 
Регистрация: 21.10.2008
Сообщений: 241

Octane, большое спасибо сейчас же займусь доработками.
Цитата:
Удобнее было бы, если скрипт обрабатывал только ссылки с указанным классом, например:
Хотел уточнить почему именно класс должен обрабатываться, а не id?
this.browserVersion.indexOf('MSIE 6.0') != -1 а здесь в конце ; ставить следует или нет?

Последний раз редактировалось HelpeR, 29.10.2008 в 19:56.
Ответить с цитированием
  #4 (permalink)  
Старый 29.10.2008, 20:19
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от HelpeR
почему именно класс должен обрабатываться, а не id?
Потому что id только один может быть на странице.
Ответить с цитированием
  #5 (permalink)  
Старый 29.10.2008, 20:41
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от HelpeR Посмотреть сообщение
this.browserVersion.indexOf('MSIE 6.0') != -1 а здесь в конце ; ставить следует или нет?
Вашу конструкицию
HelpeR.prototype.setup = function() 
{
…
  this.ie                          = (this.browserName == 'Microsoft Internet Explorer') ? true : false;
  this.ie6                         = (this.browserVersion.indexOf('MSIE 6.0') != -1)     ? true : false;
  this.ie7                         = (this.browserVersion.indexOf('MSIE 7.0') != -1)     ? true : false;
  this.opera                       = (this.browserName == 'Opera')                       ? true : false;
  this.netscape                    = (this.browserName == 'Netscape')                    ? true : false;
…

можно заменить на
HelpeR.prototype.setup = function() 
{
…
  this.ie                          = this.browserName == 'Microsoft Internet Explorer';
  this.ie6                         = this.browserVersion.indexOf('MSIE 6.0') != -1;
  this.ie7                         = this.browserVersion.indexOf('MSIE 7.0') != -1;
  this.opera                       = this.browserName == 'Opera';
  this.netscape                    = this.browserName == 'Netscape';
…

будет абсолютно тоже самое

Про использование класса уже Kolyaj объяснил.
Ответить с цитированием
  #6 (permalink)  
Старый 29.10.2008, 20:47
Аватар для HelpeR
Профессор
Отправить личное сообщение для HelpeR Посмотреть профиль Найти все сообщения от HelpeR
 
Регистрация: 21.10.2008
Сообщений: 241

ок большое спасибо!
Цитата:
Потому что id только один может быть на странице.
что то я уже сам с ума схожу )))

Последний раз редактировалось HelpeR, 29.10.2008 в 20:51.
Ответить с цитированием
  #7 (permalink)  
Старый 29.10.2008, 21:17
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Octane
Удобнее было бы, если скрипт обрабатывал только ссылки с указанным классом
Только не забудьте, что у элемента может быть несколько классов.
Ответить с цитированием
  #8 (permalink)  
Старый 01.11.2008, 18:11
Аватар для HelpeR
Профессор
Отправить личное сообщение для HelpeR Посмотреть профиль Найти все сообщения от HelpeR
 
Регистрация: 21.10.2008
Сообщений: 241

да Kolyaj, думаю я применю твой скрипт (если не ошибаюсь он был твой) по определению класса
Ответить с цитированием
  #9 (permalink)  
Старый 01.11.2008, 19:31
Аватар для HelpeR
Профессор
Отправить личное сообщение для HelpeR Посмотреть профиль Найти все сообщения от HelpeR
 
Регистрация: 21.10.2008
Сообщений: 241

все попытался исправить но выводится ошибка,т.е. не прекручивается функция для обработки события. FF2 выводит следующую ошибку.
Цитата:
Ошибка: uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: file:///C:/Documents%20and%20Settings/.../Work/js/HRjsLib.js :: anonymous :: line 57" data: no]
Скрипт
HelpeR.prototype = {
...

processing : function(obj) {
	var str = obj.href.lastIndexOf("/");
	var getURL = obj.href.substring(str+1);
	if(obj.className == "HR") {
	  if(obj.attachEvent) {
		obj.attachEvent('onclick',function() {
		  effect.gogogo(getURL);								   
		});  
	  }
      else if(obj.addEventListener) {
    	obj.addEventListener('click',function() {
		  effect.gogogo(getURL);									  
		});
	  }
    } 
  },

...
}

var effect;
window.onload = function() {
  effect = new HelpeR();
  var a = document.getElementsByTagName('a');
  for(var i=0; i<a.length; i++) {
	effect.processing(a[i]);
  }
};

сорри скрипт оказывается был Octane'a
Ответить с цитированием
  #10 (permalink)  
Старый 01.11.2008, 19:37
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

В метод
addEventListener
передается 3 параметра, последний из которых должен быть false, т.к. в IE невозможно включить другой порядок всплывания событий. И функцию лучше сделать одну, но универсальную, чтобы она использовала ссылку на контекст вызова (this) для получения значения атрибута href, т.е. например было что-то типа такого:
function viewImage() {
  effect.gogogo(this.href);
  // и тут же предотвращение стандартного события перехода по ссылке
  var e = arguments[0] || window.event;
  e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
…addEventListener('click', viewImage, false);
…attachEvent('onclick', viewImage);

Для attachEvent еще надо не забыть запомнить контекст вызова, т.к. this внутри функции viewImage будет указывать на window.

Последний раз редактировалось Octane, 01.11.2008 в 20:05.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск