Let's vitalize our extension object.
Take a look at Accordion sample
Just create inside of RusGon new folder (Accordion) and copy content of SimpliestExtObj (Definition.xml, Icon.png, Script.js) into Accordion folder.
Change Definition.xml like this:
Edit Script.js
Open Accordion sample and take a look at html code of page (Ctrl+U in Google Chrome).
Copy following part
replace all double quotes by single quotes;
each line should be enbordered by double quotes;
Following VBA code demonstrates this technique:
At the end Script.js should look like this:
Open QlikView and we see Accordion Object
Take a look at Accordion sample
Just create inside of RusGon new folder (Accordion) and copy content of SimpliestExtObj (Definition.xml, Icon.png, Script.js) into Accordion folder.
Change Definition.xml like this:
<?xml version="1.0" encoding="utf-8"?>
<ExtensionObject Label="Accordion" Description="Accordion" PageHeight="100000">
<Dimension Label="Dimension1_RS" Initial="State" DropTarget="State"/>
<Initiate Name="Caption.Text" Value="Accordion" />
</ExtensionObject>
Edit Script.js
Open Accordion sample and take a look at html code of page (Ctrl+U in Google Chrome).
Copy following part
$(document).ready(function(){into Script.js, but these lines
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
<style type="text/css">we need prepare a bit. Technically we need to
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
</head>
<body>
<div class="accordion">
<h3>Question One Sample Text</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>This is Question Two</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Another Questio here</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Sample Question Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>
replace all double quotes by single quotes;
each line should be enbordered by double quotes;
Following VBA code demonstrates this technique:
Private Sub btnTransform_Click()
Dim txt As String
Dim out As String
Dim strArray() As String
Dim i As Integer
out = ""
If Not IsNull(txtFrom.Value) Then
txt = txtFrom.Value
If txt <> "" Then
txt = Replace(txt, """", "'")
strArray() = Split(txt, vbCrLf)
For i = LBound(strArray) To UBound(strArray)
out = out & """" & strArray(i) & """+" & vbCrLf
Next
txtTo.Value = out
Me.txtTo.SetFocus
DoCmd.RunCommand acCmdCopy
End If
End If
End Sub
Qva.LoadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function() {
Qva.AddExtension('QlikView/Examples/RusGon/Accordion', function(){
//Begin extension code.
this.Element.innerHTML =
"<HTML><BODY> "+
"<style type='text/css'>"+
"body {"+
" margin: 10px auto;"+
" width: 570px;"+
" font: 75%/120% Arial, Helvetica, sans-serif;"+
"}"+
".accordion {"+
" width: 480px;"+
" border-bottom: solid 1px #c4c4c4;"+
"}"+
".accordion h3 {"+
" background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;"+
" padding: 7px 15px;"+
" margin: 0;"+
" font: bold 120%/100% Arial, Helvetica, sans-serif;"+
" border: solid 1px #c4c4c4;"+
" border-bottom: none;"+
" cursor: pointer;"+
"}"+
".accordion h3:hover {"+
" background-color: #e3e2e2;"+
"}"+
".accordion h3.active {"+
" background-position: right 5px;"+
"}"+
".accordion p {"+
" background: #f7f7f7;"+
" margin: 0;"+
" padding: 10px 15px 20px;"+
" border-left: solid 1px #c4c4c4;"+
" border-right: solid 1px #c4c4c4;"+
"}"+
"</style>"+
"</head>"+
""+
"<body>"+
""+
"<div class='accordion'>"+
" <h3>Question One Sample Text</h3>"+
" <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>"+
" <h3>This is Question Two</h3>"+
" <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>"+
" <h3>Another Questio here</h3>"+
" <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>"+
" <h3>Sample heading</h3>"+
" <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>"+
" <h3>Sample Question Heading</h3>"+
" <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>"+
"</div>"+
"</BODY></HTML>";
$(document).ready(function(){
nbsp; $(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
});
});
Open QlikView and we see Accordion Object
You may download Accordion project from GoogleDrive http://goo.gl/XWd0FP
ReplyDelete