Customiser Objets jQuery

**Thewil** · 26/06/2009, 17h05

Salut à tous,

J'ai plusieurs accordéon et tableau d'onglets sur ma page. Le problème c'est que je voudrai que chaque "objets" ai un style différent. Hors quand jQuery fabrique les accordéons ou les onglets il attribue des classes automatiquement. Donc après si dans ui.theme.css on modifie les classes crées on va changer le style pour tout les objets qui utilisent ces classes.

Donc je voudrais savoir s'il est possible de spécifier les class qui doivent être créé lors de la création de l'objet jQuery ou s'il ya un moyen d'arriver à ce que je veux faire.

Merci

**danielhagnoul** · 26/06/2009, 23h15

Bonsoir.

Ce n'est pas impossible, mais difficile. Il faut examiner le code généré avec F3 et faire une série essais-erreurs.

Voici un exemple de customisation, horrible, avec "accordion":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#affiche {
			clear:both;
			margin:12px;
			border:1px solid #999999;
		}
		.accordion {
			float:left;
			width:400px;
			margin-top:12px;
			margin-left:24px;
			margin-bottom:24px;
		}
		#accordion1 h3.ui-accordion-header {
			font-family:"Times New Roman", Times, serif;
			font-size:2em;
			letter-spacing:0.12em;
		}
		#accordion1 h3.ui-state-default a {
			color:#CCCCCC;
			background-color:#99FFCC;
		}
		#accordion1 h3.ui-state-active a {
			color:#0000FF;
		}
		#accordion1 div.ui-accordion-content {
			font-family:"Times New Roman", Times, serif;
			font-size:1.8em;
		}
		#accordion1 div.ui-accordion-content-active {
			color:#CC3366;
		}
	</style>
	<!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
/*
If a deeper level of customization is needed,
there are widget-specific classes referenced
within the ui.accordion.css stylesheet that
can be modified.
These classes are highlighed in bold below. 
<div class="ui-accordion ui-widget ui-helper-reset">
  <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top">
    <span class="ui-icon ui-icon-triangle-1-s"/>
    <a href="#">Section 1</a>
  </h3>
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
    Section 1 content
  </div>
  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-triangle-1-e"/>
    <a href="#">Section 2</a>
  </h3>
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
    Section 2 content
  </div>
</div>
*/
		$(document).ready(function(){
			$("#accordion1").accordion({autoHeight: false});
			$("#accordion2").accordion({autoHeight: false});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="accordion1" class="accordion">
			<h3 style="color:#0000CC;"><a href="#">Section 1</a></h3>
			<div>
				<p>
				Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
				ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
				amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
				odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
				</p>
			</div>
			<h3><a href="#">Section 2</a></h3>
			<div>
				<p>
				Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
				Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
				ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
				lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
				</p>
				<ul>
					<li>List item one</li>
					<li>List item two</li>
					<li>List item three</li>
				</ul>
			</div>
		</div>
		<div id="accordion2" class="accordion">
			<h3><a href="#">Section 1</a></h3>
			<div>
				<p>
				Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
				ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
				amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
				odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
				</p>
			</div>
			<h3><a href="#">Section 2</a></h3>
			<div>
				<p>
				Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
				Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
				ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
				lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
				</p>
				<ul>
					<li>List item one</li>
					<li>List item two</li>
					<li>List item three</li>
				</ul>
			</div>
		</div>
		<div id="affiche"></div>
	</div>
</body>
</html>

**Thewil** · 27/06/2009, 19h43

En gros dans mon CSS faut que je précise sur quelle div je veux que ça s'applique et come ça je pourrai avoir 2 style sur mes accordéonrs qui se trouvent dans des div différentes ?

Customiser Objets jQuery

jQuery

Discussions similaires

Partager

Partager