Рекомендации для подсказок jQuery

Позвольте мне дать более полный ответ, который я узнал во время учебного курса JavaScript.

В большинстве ответов упоминалась разница уже, т. е. когда прототипирование функции делится со всеми (будущими) экземплярами. В то время как объявление функции в классе создаст копию для каждого экземпляра.

В общем, нет правильного или неправильного, это больше зависит от вкуса или дизайнерского решения в зависимости от ваших требований. Прототипом, однако, является метод, который используется для разработки в объектно-ориентированном виде, как я надеюсь, вы увидите в конце этого ответа.

Вы показали два шаблона в своем вопросе. Я попытаюсь объяснить еще два и попытаться объяснить различия, если это уместно. Не стесняйтесь редактировать / продлевать. Во всех примерах речь идет о объекте автомобиля, который имеет местоположение и может перемещаться.

Рисунок декоратора объекта

Не уверен, что этот шаблон по-прежнему актуальен в настоящее время, но он существует. И это хорошо знать об этом. Вы просто передаете объект и свойство функции декоратора. Декоратор возвращает объект с помощью свойства и метода.

var carlike = function(obj, loc) {
    obj.loc = loc;
    obj.move = function() {
        obj.loc++;
    };
    return obj;
};

var amy = carlike({}, 1);
amy.move();
var ben = carlike({}, 9);
ben.move();

Функциональные классы

Функция в JavaScript является специализированным объектом. В дополнение к вызову функция может хранить свойства, подобные любому другому объекту.

В этом случае Car - это функция (также мыслящий объект), которая может быть вызвана, как вы привыкли делать. Он имеет свойство methods (которое является объектом с функцией move). Когда вызывается Car, вызывается функция extend, которая делает некоторую магию, и расширяет функцию Car (мыслящий объект) с помощью методов, определенных в methods.

В этом примере, хотя

Прототипные классы

Первые два шаблона позволяют обсуждать использование методов для определения общих методов или использования методов, которые являются определяемый inline в теле конструктора. В обоих случаях каждый экземпляр имеет свою собственную функцию move.

Прототипная схема не подходит для одного и того же экзамена, поскольку совместное использование функций с помощью делегирования прототипов является самой главной целью прототипа. Как указывали другие, ожидается, что у него будет больше памяти.

Однако есть одна интересная вещь: каждый объект prototype имеет свойство удобства constructor, которое указывает на (думаю, объект), к которому он присоединился.

Относительно последних трех строк:

В этом примере Car ссылки на объект prototype, который соединяется через constructor к самому Car, т. е. Car.prototype.constructor является Car. Это позволяет вам выяснить, какая функция конструктора построила определенный объект.

amy.constructor 's поиск завершен и, следовательно, делегирован Car.prototype, который имеет свойство конструктора. И поэтому amy.constructor есть Car.

Кроме того, amy является instanceof Car. Оператор instanceof работает, видя, что объект прототипа правого операнда (Car) можно найти где угодно в цепочке прототипов левого операнда (amy).

var Car = function(loc) {
    var obj = Object.create(Car.prototype);
    obj.loc = loc;
    return obj;
};

Car.prototype.move = function() {
        this.loc++;
};

var amy = Car(1);
amy.move();
var ben = Car(9);
ben.move();

console.log(Car.prototype.constructor);
console.log(amy.constructor);
console.log(amy instanceof Car);

Некоторые разработчики могут быть смущены в начале. Пример ниже:

var Dog = function() {
  return {legs: 4, bark: alert};
};

var fido = Dog();
console.log(fido instanceof Dog);

Оператор instanceof возвращает false, поскольку прототип Dog не может быть найден нигде в цепочке прототипов fido. fido - простой объект, созданный с помощью литерала объекта, т. е. он просто делегирует Object.prototype.

Псевдоклассические шаблоны

Это действительно просто еще одна форма прототипа в упрощенной форме и более знакомы для тех, кто программирует на Java, например, поскольку он использует конструктор new.

Он делает то же самое, что и в прототипном шаблоне, это просто синтаксический саун-надвод прототип.

. Однако основное отличие заключается в том, что в механизмах JavaScript реализованы оптимизации, которые применяются только при использовании псевдоклассического шаблона. Подумайте о псевдоклассическом шаблоне, вероятно, более быстрой версии прототипа; объектные отношения в обоих примерах одинаковы.

var Car = function(loc) {
    this.loc = loc;
};

Car.prototype.move = function() {
        this.loc++;
};

var amy = new Car(1);
amy.move();
var ben = new Car(9);
ben.move();

Наконец, не должно быть слишком сложно понять, как может быть реализовано объектно-ориентированное программирование. Есть два раздела.

Один раздел, который определяет общие свойства / методы в прототипе (цепочке).

И еще один раздел, где вы помещаете определения, отличающие объекты друг от друга (переменная loc в примеры).

Это то, что позволяет применять такие понятия, как суперкласс или подкласс в JavaScript.

Не стесняйтесь добавлять или редактировать. Еще раз, я мог бы сделать это сообщество wiki возможно.

18
задан Pim Jager 12 February 2009 в 21:15
поделиться

6 ответов

OHHHHHHHH Лучше всего один когда-либо!

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Образцы: (ищите "Ссылку на Yahoo" пример для встречи всех потребностей)

http://jquery.bassistance.de/tooltip/demo/

РЕДАКТИРОВАНИЕ: я вижу, что Вы упомянули Jorn (я не знал его имя), но ищите пример "Yahoo", это должно сделать то, что Вы хотите.

18
ответ дан 21 October 2019 в 05:30
поделиться

мысль ive об использовании этого: http://www.codylindley.com/blogstuff/js/jtip/

и это: http://onehackoranother.com/projects/jquery/tipsy/

другие рекомендуемые могли бы удовлетворить Вашим потребностям лучше

0
ответ дан 21 October 2019 в 05:30
поделиться

Это должен быть jQuery? Можно сделать это только с CSS, если Вам нравится.

a.info
{
    position: relative;
    z-index: 24;
}

a.info:hover
{
    z-index: 25;    
}

a.info span
{
    display: none;
}

a.info:hover span
{
    display: block;
    position: absolute;
    top: 2em;
    left: 2em;
    width: 15em;
    padding: 6px;
    border: 1px solid black;
    background-color: #eeeeee;
    color: #000;
}

Затем можно использовать его точно так же, как у Вас есть он.

<a href="somewhere.html" class="info">
 <span>
  <img src="images/someImage.jpg" />
  Here is the tooltip content.
 </span>
 Here is the link to somewhere.
</a>

РЕДАКТИРОВАНИЕ

Чтение моей ежедневной дозы блогов эта статья привлекла мое внимание. Они создают плагин jQuery, который делает то, что Вы хотите, открывается изображение с параметрами стиля и движением мыши. Проверьте результат здесь.

http://james.padolsey.com/demos/imgPreview/full/

необходимо смочь или следовать учебному руководству и записать плагин или загрузить плагин в качестве примера.

4
ответ дан 21 October 2019 в 05:30
поделиться

Я - большой поклонник BeautyTips

5
ответ дан 21 October 2019 в 05:30
поделиться

говоря Вам истинное, я попробовал несколько их, но я придерживаюсь того что я действительно как:

http://craigsworks.com/simpletip/sandbox/

существует много вещей, которые можно изменить, и они выглядят фантастическими Где угодно! :)

alt text
(источник: balexandre.com )

Обновленный

, Поскольку pbz сказал, это больше не доступно для авторского права infrangiments, но то же может быть найдено в 'исходном' разработчике по телефону

http://www.nickstakenburg.com/projects/prototip2/

8
ответ дан 21 October 2019 в 05:30
поделиться

Вы также можете попробовать инструмент под названием Likno Web Tooltips Builder: http://www.likno.com/jquery- tooltips / index.php

1
ответ дан 21 October 2019 в 05:30
поделиться
Другие вопросы по тегам:

Похожие вопросы: