squeezebox
[squeezebox, title(, style, class, id, onopen, onclose, delayopen, content)]…[squeezeboxend]
with keys
[squeezebox, title=(, style=, class=, id=, onopen=, onclose=, delayopen=, content=)]…[squeezeboxend]
Create a dynamically sizing drop-down box.
Parameters
title - squeezebox title
style - css-styles
class - class name
id - id attribute
onopen - OnOpen event
function OnSqueezeBoxOpen(obj) {
do something…
if delayopen…call SqueezeBoxOpen(obj);
}
onclose - optional OnClose event
function OnSqueezeBoxClose(obj) {
}
delayopen - auto open squeezebox on click "y/n"
content - include content in header
See Also
css-stylessystem/classesChanges
2.01 - delayopen & content parameters added
1.57 - onopen & onclose parameters added
1.37 - accepts key=value pairs as parameters
1.12.6 - fixed pointer cursor showing over content
1.8.2 - border-radius:5px; added to .SqueezeBox class
Examples
Example#1 create a squeezebox
[squeezebox,Title]additional text[squeezeboxend]
Output:
Example#2 FAQ by including a "content" object that creates the squeezebox and formats the answer.
[colorsection,padding:20px;]
[heading,FAQ]
[include,faq,A]
[include,faq,B]
[include,faq,C]
[include,faq,D]
[include,faq,E]
[include,faq,F]
[colorsectionend]
content/faq:
[squeezebox,Question [parameter,1]?,margin-bottom:10px; border:1px dotted; background-color:[var,colors.white];]
[div,padding:20px;background-color:[var,colors.orange];color:[var,colors.white];]
This is the answer to question [parameter,1].
[divend]
[squeezeboxend]
Output:
FAQ
This is the answer to question A.
This is the answer to question B.
This is the answer to question C.
This is the answer to question D.
This is the answer to question E.
This is the answer to question F.
Example#3 place button on the right and change the open/close characters
[squeezebox,Title]additional text[squeezeboxend]
content/system/classes
.SqueezeBoxButton {
float:right;
border:initial;
}
.SqueezeClose::before {
content:'[unicode,25B2]';
}
.SqueezeOpen::before {
content:'[unicode,25BC]';
}
Output:
Example#4 Question that increments the answer when opened.
[colorsection,padding:20px;]
[heading,Question]
[squeezebox,title=A = ?,style=margin-bottom:10px; border:1px dotted; background-color:[var,colors.white];,onopen=OnSqueezeBoxOpen,onclose=OnSqueezeBoxClose]
[div,id=Question,style=padding:20px;background-color:[var,colors.orange];color:[var,colors.white];]A =
[html]<span id="Answer" style="[var,colors.black]">0</span>[htmlend]
[divend]
[squeezeboxend]
[colorsectionend]
content/system/script:
[html]
function SqueezeBoxOpen(obj) {
[][]var a = NodeById(obj, "Answer");
[][]a.innerHTML = parseInt(a.innerHTML) + 1;
}
function SqueezeBoxClose(obj) {
[][]function nextChar(c) {
[][][][]return (c == "Z") ? "A" : String.fromCharCode(c.charCodeAt(0) + 1);
[][]}
[][]var head = NodeByClass(obj, "SqueezeBoxHeading");
[][]var letter = head.innerHTML.match(/^./)[0];
[][]letter = nextChar(letter);
[][]head.innerHTML = head.innerHTML.replace(/^./, letter);
[][]var ques = NodeById(obj, "Question");
[][]ques.innerHTML = ques.innerHTML.replace(/^./, letter);
}
[htmlend]
Output:
Example#5 Lazy Load images in a squeezebox using ImagesResolve(this)
[squeezebox,title=Concerts,onopen=ImagesResolve]
[imagewall,folder=concerts,width=25%,lazyload=y]
[squeezeboxend]
[squeezebox,title=Transport,onopen=ImagesResolve]
[imagewall,folder=transport,width=25%,lazyload=y]
[squeezeboxend]
[squeezebox,title=Travel,onopen=ImagesResolve]
[imagewall,folder=travel,width=25%,lazyload=y]
[squeezeboxend]
Output:
Notes