0

__我正在尝试做的事情____


现在我正在使用自定义 HTML5 标签。我正在尝试创建一个易于设置的选项卡控制元素。为此，我创建了一个名为“ tab-set ”的父元素，其工作方式与“ ul ”标签非常相似。

要插入标签，您只需插入“ tab-element ”标签（如“ li ”标签）。标签可以通过自定义原型来实现自己的行为，这些原型扩展了诸如基本 HTMLElement 之类的标准化元素原型，然后使用“ document.registerElement() ”进行注册。在这一点上，还有机会设置回调，让您知道您的元素何时被创建或附加到某些东西，这是我用来对选项卡控件上各个选项卡的位置进行必要计算的方法。

让我先说一下，我一开始遇到了麻烦，然后让它工作了，但是在重写整个事情时又遇到了麻烦，谁知道为什么。

因此，在选项卡集的创建例程中，我遍历所有子选项卡元素，调用它们的自定义函数“ setDimension ”，或者至少我正在尝试。由于某种原因，Chrome在我的标签集上调用了“ createdCallback ”和“ attachCallback ”之前，不会初始化标签元素原型（setDimension 等） 。这意味着我不能调用子元素自定义函数来设置它在创建选项卡集时的位置。


这里有一些我刚才描述的代码示例。


简单的.html

...
<tab-set>
 <tab-element>
  <img>guybrush</img>
 </tab-element>
 <tab-element>
  <img>le chuck</img>
 </tab-element>
</tab-set>
...


tabs.js

...
tabSet = Object.create(HTMLDivElement.prototype);

tabSet.attachedCallback = function(){
 for(/** calculations here **/) 
  listOfChildren[index].setDimensions(/** placement info **/);

  //
  // Chrome console: 'setDimensions' is not a function!
  //
}

tabElement = Object.create(HTMLDivElement.prototype);

tabElement.setDimensions = function(/** placement info **/){
 $(this).css(...);
}

document.registerElement('tab-set',tabSet);
document.registerElement('tab-element',tabElement);
...


奇怪的是我有一个工作版本，是的，我试图模拟它的特定条件，例如通过 jquery 的 .load() 例程加载 html 部分。但无论我做什么，我都无法让它在我当前的脚本中工作。我缺少什么知识？


提前感谢您的帮助。

4

1 回答 1

0

__ 解决了 __

我所要做的就是在选项卡集中添加一个链接标记，并让选项卡元素加载它包含的样式类。我猜想使选项卡元素具有 css 类会以某种方式促使 Chrome '过早地'加载他们的原型。

于 2014-07-12T21:45:51.883 回答