2012-01-13 12 views
1

jquery mobileを少し変更しましたので、data-type = "horizo​​ntal"と折り畳み可能です。はタブビューアに変換されます。絶対配置された要素に「サイズ」を与えるための回避策はありますか?

ここに私の例のページを参照してください - 私はそれを持っているtabview

一つの問題は、相対/絶対的な要素を配置する必要があります。

私は絶対、相対位置.ui-折りたたみ可能な設定フルtabview幅全体に折りたたみ可能なコンテンツのセクションスパンを作るために関連した折りたたみ可能なコンテンツpostionする必要があります。

このような要素の配置を避けるための回避策があるかどうかは、ページ上の要素の通常の流れにあらゆる種類の問題が発生するため、知りたいと思います。

ありがとうございました!

A)コンテンツを取る:ヘッダが水平に積み重ねて浮上させることとしているが、内容はどちらか、その後の下にあなたの全幅を表示する必要があるのであれば

+0

絶対に配置されているものは? – Sinetheta

+0

'.ui-collabsible-content'要素は、コンテンツ領域が開かれたときに、それらの下の内容がシフトダウンしないように絶対的に配置されます。 @frequent、あなたはJSFiddleをセットアップできますか?途中で – Jasper

+0

http://jsfiddle.net/tdpNd/ – frequent

答えて

0

の外にそれを得るために[OK]を私は方法を見つけました、厄介な、しかし、作業している...

は次のようにCSSで行うことができますために.ui-折りたたみ可能なコンテンツに絶対:

.ui-collapsible-set-horizontal.ui-grid-a .ui-block-a .ui-collapsible-content { 
    position: relative; 
    width: 199.3%; 
    padding: 0; 
    } 
.ui-collapsible-set-horizontal.ui-grid-a .ui-block-b .ui-collapsible-content { 
    left: -100%; 
    width: 199.3%; 
    position: relative; 
} 

私の問題は、私は、POS設定しなければならなかったということでしたこの要素はタブビュー全体をカバーします。

上記の2つのグリッドタブで動作するので、基本的に幅を要素幅の2倍に設定します(タブビューセット、2タブ、100%幅= 200%に設定、3タブ、 300%など)を使用し、第2、第3、第4のタブの位置をすべての先行タブの幅だけ左に移動します。

私がpos:absoluteをもう使用していないのでうまく動作し、コンテンツセクションはハードコードされた(高さ123px)ように設定される必要はなく、内容に応じて拡張されます。

0

.ui-collapsible-content.ui-collapsible

の子であります

B)は、HTMLをリファクタリング(あなたが行ったように)流れの外にあっ

<container> 
    <headerArea><header></header><header></header></headerAread> 
    <contentArea></contentAre> 
</container> 
+0

jquery mobileでこのように設定されているため、HTML構造を変更できません。しかし、良いアイデア。どうも。 – frequent

関連する問題