Блог

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

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

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

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

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

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

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

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

_{Примечание: я использую два cluetips для имитации случая с несколькими cluetips}

 <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
 

Это СДЕЛАНО

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

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 .

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

 $('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 /

   $('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")
        );
      }
  });
 

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