[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