Как я могу установить заголовок подсказки cluetop из обратного вызова ajax, когда sticky: true?

Question

Я использую Cluetip плагин, который отлично.Я заполняю плагин с помощью Ajax, но я не могу нигде (в документации или примерах), как установить заголовок из обратного вызова ajax.

Поддерживается ли обновление заголовка из ajax в cluetip?

ПРИМЕЧАНИЕ ОБНОВЛЕНИЯ:

Таким образом, приведенные ниже предложения работают в том смысле, что они могут создавать заголовок, но кнопка закрытия в этом случае не отображается в заголовке.См. Изображение ниже.

Answer 1

На самом деле, это довольно легко, если смотреть под простым углом.

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

Давайте рассмотрим пример того, как обойти то, что вы пытаетесь

---

Я использовал демо для этого. Таким образом, наценка:

_{Примечание. Я использую две подсказки для имитации случая, имеющего несколько подсказок}

<a class="title" title="hello" href="http://plugins.learningjquery.com/cluetip/demo/ajax3.html" rel="http://plugins.learningjquery.com/cluetip/demo/ajax3.html">This example</a>

<a class="basic" href="http://plugins.learningjquery.com/cluetip/demo/ajax.html" rel="http://plugins.learningjquery.com/cluetip/demo/ajax.html">Basic</a>

Давайте сделаем небольшое изменение в стилях, чтобы оно выровнялось правильно

.cluetip-close { float: right; margin-top: -40px; }

Теперь наш сценарий для подсказок.

  var title;
  $('a.title').cluetip({
      closePosition: 'top',
      sticky: true,
      closeText: '<img src="http://plugins.learningjquery.com/cluetip/demo/cross.png" alt="close" width="16" height="16" />Close',            
      ajaxCache: false,
      ajaxSettings:  {
        success: function(data) {
            title = "Your new Title";            
            $(this).attr("title", title); //just set the title for consistency
        }
      },
      onShow : function(ct,c) {
          $(".cluetip-title").text(title); //update the title class with the title
      }
  });

  $('a.basic').cluetip(); //While definning another tip, it is NOT affected by previous one

СДЕЛАНО

Хотя скрипка может не показывать это. Я проверил это и он работает .

Answer 2

Cluetip кэширует заголовок при его первом создании.В результате вы должны изменить его в опции onShow.Попытка изменить его на шаге ajaxProcess приведет к тому, что ваши изменения будут перезаписаны.

Однако вы можете использовать параметр настройки ajax, чтобы получить нужный заголовок и сохранить его в переменной.

Имейте в виду, что по умолчанию cluetip кэширует результат ajax.Вы можете установить ajaxCache: false, чтобы изменить это.

Вот пример кода

var title;
$('a.clue').cluetip({
    ajaxSettings:  {
        success: function(data) {
            // GET Title here
            title = 'new title';
        }
    },
    ajaxCache: false,
    onShow : function(ct,c) {
         $("#cluetip-title").text(title);
    }
});

Вы также можете использовать опцию ajaxProcess, но вам нужно убедиться, что вы вызвали значение по умолчанию для этоговозможность убедиться, что он удаляет теги script и style.

Answer 3

  $('a.basic').cluetip({
      sticky: true,
      closePosition: 'title',
      ajaxCache: false,
      ajaxProcess: function(data) {
        data = {title: "AjaxTitleGoesHere", body:"AjaxBodyGoesHere"};
        $(this).attr("title", data.title);
        return data.body;
      },
      onShow: function(ct, c) {
        ct.find(".cluetip-title").append(
            $(this).attr("title")
        );
      }
  });

Answer 4

Вы можете сделать что-то вроде этого:

$('a.basic').cluetip({
    ajaxProcess: function(data) {
        // Suppose the data come with the following structure:
        data = { title: "Another title", body: "Blah blah blah blah" };

        $(this).attr("title", data.title);
        return data.body;
    },
    onShow: function(ct, c) {
        ct.find(".cluetip-title").text(
            $(this).attr("title")
        );
    }
});

Смотрите это в действии здесь: http://jsfiddle.net/A9EQ5/20/

Answer 5

Вы всегда можете скрыть заголовок и смоделировать его, используя ответ ajax.