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:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
|
" codeBody "
" notpretty "
expand.js:
(functie ($) {
$.fn.expandAll = functie (opties) {
var blijft = in gebreke {
expTxt: „Toon allen“,
cllpsTxt: „Verberg allen“,
cllpsEl: „.collapse“, // het opvouwbare element
trekker: „.expand“, // de elementen die de trekker van het kneveleffect op de individuele opvouwbare secties bevatten
ref: „.expand“, // de schakelaar „breidt allen uit/doet ineenstorten allen“ wordt opgenomen vóór „ref“
showMethod: „toon“,
hideMethod: „huid“,
staat: „verborgen“, wordt // de opvouwbare elementen verborgen door gebrek: gebruik „verborgen“ of „getoond“
snelheid: 0,
oneSwitch: waar
};
var o = $.extend ({}, gebreken, opties);
var toggleTxt = o.expTxt;
als („verborgen“ o.state ==) {
$ (dit) .find (o.cllpsEl + „: niet (.shown)“) .hide ()
.prev () .find (o.trigger + „> a.open“) .removeClass („open“);
} anders {
toggleTxt = o.cllpsTxt;
}
terugkeer this.each (functie (index) {
var referent, $cllps, $tr;
als (o.ref) {
var container;
als (this.id.length) {
container = „#“ + this.id;
} anders als (this.className.length) {
container = this.tagName.toLowerCase () + „.“ + this.className.split („„) .join (“. “);
} anders {container = this.tagName.toLowerCase ();}
referent = $ (dit) .find („„“ + o.ref + „: eerst““);
$cllps = $ (dit) .closest (container) .find (o.cllpsEl);
$tr = $ (dit) .closest (container) .find (o.trigger + „>“);
} anders {
referent = $ (dit);
$cllps = $ (dit) .find (o.cllpsEl);
$tr = $ (dit) .find (o.trigger + „>“);
}
als (o.oneSwitch) {
referent.before („“ + toggleTxt + „ “);
} anders {
referent.before („“ + o.expTxt + „ | “ + o.cllpsTxt + „ “);
}
referent.prev („p“) .find ('a') .click (functie () {
als ($ (dit) .text () == o.expTxt) {
als (o.oneSwitch) {$ (dit) .text (o.cllpsTxt);}
$tr.addClass („open“);
$cllps [o.showMethod] (o.speed);
} anders {
als (o.oneSwitch) {$ (dit) .text (o.expTxt);}
$tr.removeClass („open“);
$cllps [o.hideMethod] (o.speed);
}
valse terugkeer;
});
});};
functie die in het .cfm dossier gaat
$ (functie () {
// --- Het gebruiken van de standaardopties:
$ („h3.expand“) .toggler ({initShow: „div.collapse: eerst“});
// --- Andere opties:
// $ („h3.expand“) .toggler ({methode: „knevel“, snelheid: 0});
// $ („h3.expand“) .toggler ({methode: „knevel“});
// $ („h3.expand“) .toggler ({snelheid: „snel“});
// $ („h3.expand“) .toggler ({methode: „fadeToggle“});
// $ („h3.expand“) .toggler ({methode: „slideFadeToggle“});
$ („#content“) .expandAll ({trekker: „h3.expand“, ref: „div.demo“, showMethod: „slideDown“, hideMethod: „slideUp“, snelheid: 400, oneSwitch: vals});
});
css
/*css voor Uitzetbare Containers*
/*
De CSS hier aangeboden regels zijn enkel een voorbeeld, kunt u hen als basis gebruiken.
Vorm uw „uitbreiden/doen ineenstorten“ inhoud zodat het de stijl van uw plaats ontmoet.
*/
* {marge: 0; het opvullen: 0}
/* --- De Structuur van de pagina --- */
#wrapper {
marge: auto 0;
/*padding: 15px 15%; */
tekst-richt me: linker;
}
#wrapper h3 {
marge: 0;
}
#content {
/*max-width: 70em; */
breedte: 100%;
marge: auto 0;
op:vullen-bodem: 0px;
overstroming: verborgen
}
.demo {
marge: auto 0;
het opvullen: 0;
positie: relatief;
achtergrond: #000;
}
.collapse h4 die {opvult: 0;}
#DocumentID, .DocumentID {marge-bodem: 5px; tekst-richt me: centrum; kleur: #000;}
/* --- Rubrieken --- */
.expand {op:vullen-bodem: 0;}
/* --- Verbindingen --- */
#switch, .switch {
kleur: #BCB39A;
breedte: 220px;
marge: 0;
het opvullen: 0 0 0 10px;
tekst-richt me: linker;
}
.expand a {
vertoning: blok;
het opvullen: 5px 40px 5px 10px;
kleur: #8A5D3C;
}
.expand a: verbinding, .expand a: bezocht {
kleur: #8A5D3C;
achtergrond: url (. /images/arrow-down.gif) geen-herhaling;
marge: 0;
het opvullen: 0 0 0 10px;
}
.expand a: hang, .expand a: actieve, .expand a: nadruk {
tekst-decoratie: niets;
}
.expand a.open: verbinding, .expand a.open: bezocht {
achtergrond: url (. /images/arrow-up.gif) geen-herhaling;
marge: 0;
het opvullen: 0 0 0 10px;
}
/*subNav*/
.subNav a {
kleur: #BCB39A;
tekst-decoratie: niets;
}
.subNav a: hang {
kleur: #8A5D3C;
tekst-decoratie: niets;
}
.focus a {tekst-decoratie: niets; kleur: #fff;}
.focus a: hang {tekst-decoratie: niets;}
h3.expand {
marge: 0;
het opvullen: 15px 0 0 0;
doopvont-gewicht: normaal;
}
h4.subNav, h4.focus {
marge: 0;
het opvullen: 0 0 5px 10px;
doopvont-gewicht: normaal;
tekst-transformatie: niets;
}
de sectie die het menu van .cfm toont dient in:
omega subNav
|
