Comment rafraichir mon CSS ou faire un append sur plusieurs class
Bonjour à tous,
Je fais un site avec jqueymobile et he cherche a construire dynamiquement un sous menu.
Avec jqueymobile, la base d'un site est le suivant
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="panel" id="mypanel-b">
<!-- panel content goes here -->
</div><!-- /panel -->
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="panel" id="mypanel-c">
<!-- panel content goes here -->
</div><!-- /panel -->
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body> |
Comme vous le constaté, il y aun panel pour chaque page
Code:
1
2
3
4
5
6
|
<div data-role="panel" id="mypanel-b">
<ul id="fence-btns">
</ul>
<!-- panel content goes here -->
</div><!-- /panel --> |
Dans ce panel on ajoute un menu avec des ul et li.
Premierement, j'aimerais avoir le meme menu dans chaque panel, donc j0aimerais éviter de codé trois fois (ou plus) la meme chose.
Mon problème n'est pas là. Je construit un sous menu dynmiquement en fonction du contenu d'une page. C'est une boucle qui va ajouter ce code
Code:
1
2
|
$('#fence-btns').append( '<li data-icon="location"><a href="#home" class="fence-btn" data-center="[' + feature.geometry.coordinates[0][0][0] +','+ feature.geometry.coordinates[0][0][1] + ']" data-points="'+ JSON.stringify(feature.geometry.coordinates) +'">' + feature.properties.name + '</a></li>' ); |
Le prblème c'est qu'on peut n'avoir qu'un ID par page, et dans mon cas j'aurais trois fois ceci:
Code:
1
2
3
|
<ul id="fence-btns">
</ul> |
Donc... bud.
J'ai donc modifier de la sorte
Code:
1
2
3
|
<ul class="fence-btns">
</ul> |
Code:
1
2
|
$('.fence-btns').append( '<li data-icon="location"><a href="#home" class="fence-btn" data-center="[' + feature.geometry.coordinates[0][0][0] +','+ feature.geometry.coordinates[0][0][1] + ']" data-points="'+ JSON.stringify(feature.geometry.coordinates) +'">' + feature.properties.name + '</a></li>' ); |
Je ne suis pas convaicu ce ceci car 1), le CSS n'est pas appliqué au sous-menu!!!
Ce qui me semble logique puis que ma page n'est pas rechargée, n'es-ce pas?
Y-a-t-il la possibilité de rafraichir le CSS sans rafraichir la page?
Si non, pour appliqu le dernier code a tous mes '.fence-id', es-ce bien jsute de le faire ainsi?
Y-a- pas un truc du genre each()?
Merci pour vos lumières
