[pmwiki-users] Including an Accordion widget
V.Krishn
vkrishn4 at gmail.com
Tue Feb 15 06:52:31 CST 2011
On Monday 14 Feb 2011 8:06:22 pm Harald C. wrote:
> Hi,
>
> I would like to include a jQuery (or similar) Accordion widget in one of
> the pages of a PMWiki.
> This would require
> (1) to insert a call to one or two JavaScript files for that page only
> (2) include a css file in the head section for that page only
1. Install jquery, jquery.ui and jquery.ui.accordion
User this as reference: http://jqueryui.com/demos/accordion/default.html
2. If the intended page is Main.HomePage create Main.HomePage.php file in
local folder. add the lines below with correct .js and .css paths
-------------snip
$HTMLHeaderFmt[] = "
<link href='$PubDirUrl/path/to/jquery.ui.all.css' rel='stylesheet' />";
$HTMLHeaderFmt[] = "
<script src='$PubDirUrl/path/to/jquery-1.4.4.js'></script>
<script src='$PubDirUrl/path/to/jquery.ui.core.js'></script>
<script src='$PubDirUrl/path/to/jquery.ui.widget.js'></script>
<script src='$PubDirUrl/path/to/jquery.ui.accordion.js'></script>
";
$HTMLHeaderFmt[] = "
<link href='$PubDirUrl/path/to/custom.css' rel='stylesheet' />";
$HTMLHeaderFmt['accordion'] = "
<script>
$(function() {
$( \"#accordion\" ).accordion();
});
</script>
";
------------------
> (3) apply the prescribed HTML markup in that page where the accordion
> should appear like:
>
> <div id="accordion">
> <h3 class="accordion_header"><a href="#">First header</a></h3>
> <div class="accordion_content">First content</div>
> <h3 class="accordion_header"><a href="#">Second header</a></h3>
> <div class="accordion_content">Second content</div>
> ...
> </div>
>
3. Add sample wiki text in Main.HomePage
---------snip
(:div0 id=accordion:)
!!![[#a | Section 1]]
>>acc<<
Some text in the first section.
a bit more...
>><<
!!![[#a | Section 2]]
>>acc<<
second section content
goes here....
>><<
!!![[#a | Section 3]]
>>acc<<
third section content
goes here....
>><<
(:div0end:)
------------
NOTE:
!!![[#a | Section 1]]
produces:
<h3><a href='#a'>Section 1</a></h3>
and not
<h3 class="accordion_header"><a href="#">First header</a></h3>
If you are planning to use the default accordion provided by Jquery this
should work. See: http://jqueryui.com/demos/accordion/
Regards,
V.Krishn
> In the page I only need the header and content of the accordion sections
> to be editable.
>
> For (1) I found several recipes but don't know which one to use in this
> case; for (2) and (3) I don't know how to proceed.
>
> Could someone please help me?
>
> Thanks,
> Harald
>
> _______________________________________________
> pmwiki-users mailing list
> pmwiki-users at pmichaud.com
> http://www.pmichaud.com/mailman/listinfo/pmwiki-users
More information about the pmwiki-users
mailing list