【问题标题】:Use Mithril and Tooltipster使用秘银和工具提示器
【发布时间】:2015-11-02 21:14:28
【问题描述】:

我想在 [使用 Tooltipster 创建的] 工具提示中包含交互式内容。一个简单的例子:

$('a').tooltipster({
    contentAsHTML: true,
    content: '<span><a href="#">Tooltip click me</a></span>',
    theme: 'tooltipster-light',
    interactive: true
});

http://jsfiddle.net/qrbsug8r/2/

目标是让工具提示内容中的“工具提示点击我”链接触发典型的秘银绘制周期。

我的问题是如何使用标准 Mithril 呈现工具提示内容,以及如何连接 onclick 事件?例如,如果我不使用 Tooltipster,我可能会这样做:

    m('span', m('a', {
        'href': '#',
        'onclick': ctrl.someFunc
    }))

【问题讨论】:

    标签: jquery tooltipster mithril.js


    【解决方案1】:

    正如 Stephan 所提到的,您想使用配置选项来获取工具提示功能。由于您有一个 href,您可以使用它并捕获路线:

    m('a', {
      config: function (el) {
        $(el).tooltipster({
          contentAsHTML: true,
          content: '<span><a href="/someAction">Tooltip click me</a></span>',
          theme: 'tooltipster-light',
          interactive: true
        });
      }
    });
    

    如果你不想改变路由,你可以在 config 函数中添加一个 jQuery 点击监听器:

    m('a', {
      config: function (el) {
        $(el).tooltipster({
          contentAsHTML: true,
          content: '<span><a href="/#">Tooltip click me</a></span>',
          theme: 'tooltipster-light',
          interactive: true
        });
        $(el).find('a').on('click', ctrl.callback);
      }
    });
    

    由于这不是通过 mithril 注册的事件处理程序,您必须手动使用 m.redraw()(或 start/endComputation)在 ctrl.callback 内重绘 UI。

    【讨论】:

      【解决方案2】:

      你可以这样做

      m('span', [
        m('a', {
          href: '#',
          onclick: function() { ctrl.tooltopVisible = true }
        }),
        ctrl.tooltipVisible ? m('.tooltip', 'Click me') : ''
      ])
      

      【讨论】:

      • 但是该代码去哪里了?在用户将鼠标悬停在元素上之前,工具提示内容(即上面的代码块)不在 DOM 中。届时,Tooltipster 会渲染内容。
      • 我只是了解您不想使用工具提示器。如果你想这样做,你必须使用config-callback。
      猜你喜欢
      • 2019-12-23
      • 1970-01-01
      • 1970-01-01
      • 2018-07-31
      • 1970-01-01
      • 2015-08-24
      • 1970-01-01
      • 2021-04-12
      • 2013-04-25
      相关资源
      最近更新 更多