0

__やろうとしていること____


現在、カスタム HTML5 タグを使用しています。設定が簡単なタブ コントロール要素を作成しようとしています。これを行うには、' ul ' タグと同じように機能する' tab-set 'という親要素を作成します。

タブを挿入するには、' tab-element ' タグ (' li ' タグなど) を挿入するだけです。タグは、基本的な HTMLElement などの標準化された要素プロトタイプを拡張し、' document.registerElement() ' で登録されるカスタム プロトタイプを通じて独自の動作を実装できます。その時点で、要素が作成された、または何かにアタッチされたときに通知するコールバックを設定する機会もあります。これは、タブ コントロールの個々のタブの配置に必要な計算を行うために使用するものです。

最初はこれに問題があり、それから機能するようになりましたが、書き直すと、誰が理由を知っているのか、再び問題が発生したことを前もって言わせてください。

したがって、タブセットの作成ルーチンでは、すべての子タブ要素を繰り返し処理し、カスタム関数「setDimension」を呼び出すか、少なくともしようとしています。何らかの理由で、Chrome は、タブ セットで「 createdCallback」と「attachedCallback 」の両方を呼び出す前に、タブ要素のプロトタイプ (setDimension など) を初期化しません。これは、子要素のカスタム関数を呼び出して、タブセットの作成時に配置を設定できないことを意味します。


ここに、今説明した内容のコード サンプルがいくつかあります。


simple.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 に答える