html - 如何避免两次 float 相同的内容？

Question

我的 Kynetx 应用程序使用 float_html() 来放置一个装满内容的盒子。

rule float_box {
  select when pageview ".*"
  pre {
    content = <<
      <div id='messagebox'>
      <h3>Floating Message Box</h3>
      <ul id='my_list'></ul>
      </div>
    >>; // trippy
  }
  float_html("absolute","top:25px","right:20px",content);
}

rule fill_box {
  select when pageview ".*"
  foreach ["alpha","bravo","charlie"] setting (list_item)
  append("#my_list", "<li>#{list_item}</li>");
}

该应用程序 (a421x27) 从书签中使用。如果您在同一页面上点击书签两次，您将获得双重内容。

有没有什么方法可以检测到盒子已经在屏幕上并重新使用它？

Answer 1

您可以使用 jQuery 手动 float 内容并检查它是否已经存在。

ruleset a60x516 {
  meta {
    name "so-answer-example"
    description <<
      so-answer-example
    >>
    author "Mike Grace"
    logging on
  }

  rule float_box {
    select when pageview ".*"
    pre {
      content = <<
        <div id='messagebox'>
        <h3>Floating Message Box</h3>
        <ul id='my_list'></ul>
        </div>
      >>; /// fixing syntax highlighting bug
    }
    {
      emit <|
        if ($K("#messagebox").length == 0) {
          $K(content).css({
            "position": "absolute",
            "top": "25px",
            "right": "20px"
          }).appendTo(document.body);
        };
      |>;
    }
  }

  rule fill_box {
    select when pageview ".*"
    foreach ["alpha","bravo","charlie"] setting (list_item)
    {
      append("#my_list", "<li>#{list_item}</li>");
    }
  }
}

这是在 example.com 上多次单击此代码中的小书签后的样子

---

旁注:

始终将您的操作包装在 {} 中。如果您只有一个操作，操作无需包裹在 {} 中即可工作，但最好养成使用 {} 标记操作 block 的习惯。