# Zikula UI Features

You can use Zikula.UI with:

    {pageaddvar name='javascript' value='zikula.ui'}

or enabling the ui parameter to the ajaxheader plugin call:

    {ajaxheader ... ui=true}

- Tooltips
- Window - simple dragable window with button to close
- Dialogs
  - Default dialog with OK and Cancel buttons
  - Alert dialog
  - Confim dialog
  - Form dialog
- Multiple select
- Tabs
- Accordion
- Panels
- ImageViewer

## Tooltips

Default tooltip

Default tooltip, content taken from title

                            <p id="default" title="Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis l">Default tooltip from title</p>
                            <script type="text/javascript">
                            var defaultTooltip = new Zikula.UI.Tooltip($('default'));
                            </script>

Default tooltip, content passed directly to javascript

                            <p id="default2">Some tooltip</p>
                            <script type="text/javascript">
                            var defaultTooltip2 = new Zikula.UI.Tooltip($('default2'),'Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis l');
                            </script>

Group of tooltips, content from title

Simple shorthand for initializing group of default tooltips. Content taken from title attribute #1

Simple shorthand for initializing group of default tooltips. Content taken from title attribute #2

                            <p class="tooltips" title="Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet">Group of tooltips, content from title</p>
                            <p class="tooltips" title="Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sa">Group of tooltips, content from title</p>
                            <script type="text/javascript">
                            Zikula.UI.Tooltips($$('.tooltips'));
                            </script>

Group of tooltips, content from hidden element

Group of tooltips. Content taken from additional elements based on title attribute, which contains ID.

Content from $('other_content')

Passing tooltip content from another element allows to use html.

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

Content from $('other2_content')

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel,

                            <p id="other" class="tooltips2" title="#other_content">Content from $('other_content')</p>
                            <div id="other_content" style="display: none;"><p><strong>Passing tooltip content from another element allows to use html</strong></p>. <p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p></div>
                            <p id="other2" class="tooltips2" title="#other2_content">Content from $('other2_content')</p>
                            <div id="other2_content" style="display: none;">Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel,</div>
                            <script type="text/javascript">
                            Zikula.UI.Tooltips($$('.tooltips2'));
                            </script>

## Window

Default window

Default window, content from other element, pointed via href='#defwindow_content'

Open window

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

                            <p><a id="defwindow" href="#defwindow_content" title="Default window title">Open window</a></p>
                            <div id="defwindow_content" style="display: none;"><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p></div>
                            <script type="text/javascript">
                            var defwindow = new Zikula.UI.Window($('defwindow'));
                            </script>

Default window with minmax option

Default window, with minmax option, which allows to minimize and maximize window

Open window

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

                            <p><a id="defwindowminmax" href="#defwindow_content_minmax" title="Default window title">Open window</a></p>
                            <div id="defwindow_content_minmax" style="display: none;"><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p></div>
                            <script type="text/javascript">
                            var defwindowminmax = new Zikula.UI.Window($('defwindowminmax'),{minmax:true,resizable: true});
                            </script>

Default modal window

Default modal window

Notice: when modal window is opened all other windows are closed

Open window

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

                            <p><a id="defwindowmodal" href="#defwindow_content_modal" title="Default window title">Open window</a></p>
                            <div id="defwindow_content_modal" style="display: none;"><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p></div>
                            <script type="text/javascript">
                            var defwindowmodal = new Zikula.UI.Window($('defwindowmodal'),{modal:true});
                            </script>

Ajax window

Default window, content loaded using Ajax call (from href='external.html'), additionaly window is resizable

Open window

                            <p><a id="defwindowajax" href="external.html" title="Default window title">Open window</a></p>
                            <script type="text/javascript">
                            var defwindowajax = new Zikula.UI.Window($('defwindowajax'),{resizable: true});
                            </script>

Ajax window with iframe

Ajax window with external content loaded to iframe - in this example this is google.com

Open window

                            <p><a id="defwindowajax2" href="http://google.com" title="Default window title">Open window</a></p>
                            <script type="text/javascript">
                            var defwindowajax2 = new Zikula.UI.Window($('defwindowajax2'),{resizable: true, width: 600,iframe:true});
                            </script>

Javascript window

Default window, called directly from Javascript

Open window

Close window

                            <p><a id="defwindowjs" title="Default window title">Open window</a></p>
                            <p><a id="defwindowjsclose" title="Default window title">Close window</a></p>
                            <script type="text/javascript">
                            var defwindowjs = new Zikula.UI.Window('Lorem ipsu',{title:'Title of this window'});
                            $('defwindowjs').observe('click',defwindowjs.openHandler);
                            $('defwindowjsclose').observe('click',defwindowjs.closeHandler);
                            </script>

## Dialog

Default Dialog

Default Dialog, content from other element, pointed via href='#defdialog_content', with 3 buttons

Open dialog

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

                            <p><a id="defdialog" href="#defdialog_content" title="Default dialog title">Open dialog</a></p>
                            <div id="defdialog_content" style="display: none;"><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p></div>
                            <script type="text/javascript">
                            var callback = function(button) {
                            var msg = 'You\'ve pressed button '+button.label+'. It\'s name is: '+button.name+' and it\'s value is:' +button.value;
                            msg += '<br />As callback parameter you will receive button object as it was defined in Dialog constructor. So you may then check buttons name and value';
                            Zikula.UI.Alert(msg,'Callback info for Dialog');
                            }
                            var defdialog = new Zikula.UI.Dialog($('defdialog'),[
                            {name:'first',value:'Default behaviour is to close dialog after button close.',label:'ok'},
                            {name:'second',value:'You should not see this message...',label:'disabled',disabled: true},
                            {name:'third',value:'This one does not close dialog - you may press it many times.',label:'doesn\'t close dialog',close: false},
                            {name:'inline',value:'This one does not close dialog - you may press it many times.',label:'inline action',action: Zikula.UI.Alert.curry('Last button has defined inline action. This is in case you don\'t like the callback way :) ','Inline action message')}
                            ],{resizable:true,minmax:true,callback: callback,width: 500}
                            );
                            </script>

Alert Dialog

Alert Dialog, content from other element, pointed via href='#alertdialog_content', buttons OK for closing alert

Open alert

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

                            <p><a id="alertdialog" href="#alertdialog_content" title="Default dialog title">Open alert</a></p>
                            <div id="alertdialog_content" style="display: none;"><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p></div>
                            <script type="text/javascript">
                            var alertdialog = new Zikula.UI.AlertDialog($('alertdialog'));
                            </script>

Shortcut for alert

Open alert

                            <p><a id="alertdialog2" href="#alertdialog_content">Open alert</a></p>
                            <script type="text/javascript">
                            $('alertdialog2').observe('click',function(e){Zikula.UI.Alert('some message!','Alert dialog title');e.stop();});
                            </script>

Confirm Dialog

Confirm Dialog, content from other element, pointed via href='#alertdialog_content', buttons OK for closing alert

Do not act like window.confirm() - you need to provied callback function, which takes true/false argument and perform appriopriate action.

Some element to be delated, but confirmation is required.

Remove test element

                            <p id="testToDelete">Some element to be delated, but confirmation is required.</p>
                            <p><a id="confirmdialog" >Remove test element</a></p>
                            <script type="text/javascript">
                            testdelete = function(res) {
                            if(res) {
                            $('testToDelete').insert('<br />Let\'s say this is removed :) ');
                            } else {
                            $('testToDelete').insert('<br />User did not confirmed action');
                            }
                            }
                            $('confirmdialog').observe('click',
                            Zikula.UI.IfConfirmed('Do you want to remove test element?','Confirmation prompt',testdelete)
                            );
                            </script>

Form Dialog

Form Dialog, with from loaded from external element (it may extists in document or be loaded via ajax).

Form can be submited in normal way, or can be catched by script and executed direcly on page or via ajax.

Form response: null

Open form

General settings
Items per page
Number of characters to display in item summaries

                            <p><a id="formdialog" title="Sample form dialog" href="#formdialog_content">Open form</a></p>
                            <div id="formdialog_content" style="display: none;">
                            <form enctype="application/x-www-form-urlencoded" method="post" class="z-form">
                            <div>
                            <fieldset>
                            <legend>General settings</legend>
                            <div class="z-formrow">
                            <label for="search_itemsperpage">Items per page</label>
                            <input type="text" value="10" size="3" name="itemsperpage" id="search_itemsperpage">
                            </div>
                            <div class="z-formrow">
                            <label for="search_limitsummary">Number of characters to display in item summaries</label>
                            <input type="text" value="255" size="5" name="limitsummary" id="search_limitsummary">
                            </div>
                            </fieldset>
                            </div>
                            </form>
                            </div>
                            <script type="text/javascript">
                            executeform = function(data) {
                            $('response').update(Object.toJSON(data));
                            }
                            var formdialog = new Zikula.UI.FormDialog($('formdialog'),executeform);
                            </script>

## Select multiple

Select multiple

Select multiple - selected values are send as string - comma-separated values. Check select value

                            <select id="select_multiple" name="select_name">
                                <option value="tigers">Tigers</option>
                                <option value="lions">Lions</option>
                                <option value="kitties">Kitties</option>
                                <option value="lygers">Lygers</option>
                                <option value="pumas">Pumas</option>
                                <option value="cheetahs">Cheetahs</option>
                            </select>
                            <script type="text/javascript">
                                var select_multiple = new Zikula.UI.SelectMultiple('select_multiple',{
                                    title:'Custom link name',
                                    windowTitle:'Custom window title',
                                    okLabel:'Custom ok label'
                                });
                            </script>

## Tabs

Simple tabs

Tab navigation created from unordered list. Tabs content taken from href attribures: href='#tab_content_id'

- One
- Two

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

Fusce eu magna nec tortor libero, egestas dignissim, imperdiet tempor, pulvinar felis, consequat pharetra. Morbi placerat pharetra varius. In quis justo. Vivamus justo. Nulla in wisi. Proin in ultricies eu, neque. Pellentesque dolor. Vestibulum tempus nulla. Morbi mattis. Nunc elementum. Nam rhoncus, dui sodales nibh nulla in consequat ipsum primis in magna iaculis odio et dui. Vivamus posuere quis, libero. Aliquam erat vel leo. Donec interdum vitae, cursus mauris ac sapien. Praesent justo. Vivamus diam mollis nunc sit amet, elementum vitae, ligula. Aliquam erat blandit eros, sagittis luctus nibh, interdum faucibus, fermentum nec, sem. Cras non neque dui, porta ligula.

                            <ul id="tabs_example_one" class="z-tabs">
                            <li class="tab"><a href="#one">One</a></li>
                            <li class="tab"><a href="#two">Two</a></li>
                            </ul>
                            <div id="one"><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p></div>
                            <div id="two"><p>Fusce eu magna nec tortor libero, egestas dignissim, imperdiet tempor, pulvinar felis, consequat pharetra. Morbi placerat pharetra varius. In quis justo. Vivamus justo. Nulla in wisi. Proin in ultricies eu, neque. Pellentesque dolor. Vestibulum tempus nulla. Morbi mattis. Nunc elementum. Nam rhoncus, dui sodales nibh nulla in consequat ipsum primis in magna iaculis odio et dui. Vivamus posuere quis, libero. Aliquam erat vel leo. Donec interdum vitae, cursus mauris ac sapien. Praesent justo. Vivamus diam mollis nunc sit amet, elementum vitae, ligula. Aliquam erat blandit eros, sagittis luctus nibh, interdum faucibus, fermentum nec, sem. Cras non neque dui, porta ligula.</p></div>
                            <script type="text/javascript">
                            var tabs = new Zikula.UI.Tabs('tabs_example_one');
                            </script>

Equal tabs

Tabs with "equal" option - in this case each tab gets min-height equal to the highest tab.

Notice: due to js used for show/hide code in this example initial height of tabs is wrong, but it's updated while swiching tabs.

- One
- Two

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

Fusce eu magna nec tortor libero, egestas dignissim, imperdiet tempor, pulvinar felis, consequat pharetra. Morbi placerat pharetra varius. In quis justo. Vivamus justo. Nulla in wisi. Proin in ultricies eu, neque. Pellentesque dolor. Vestibulum tempus nulla. Morbi mattis. Nunc elementum. Nam rhoncus, dui sodales nibh nulla in consequat ipsum primis in magna iaculis odio et dui. Vivamus posuere quis, libero. Aliquam erat vel leo. Donec interdum vitae, cursus mauris ac sapien. Praesent justo. Vivamus diam mollis nunc sit amet, elementum vitae, ligula. Aliquam erat blandit eros, sagittis luctus nibh, interdum faucibus, fermentum nec, sem. Cras non neque dui, porta ligula.

Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc.

                            <ul id="tabs_example_eq">
                            <li class="tab"><a href="#eqone">One</a></li>
                            <li class="tab"><a href="#eqtwo">Two</a></li>
                            </ul>
                            <div id="eqone"><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p></div>
                            <div id="eqtwo"><p>Fusce eu magna nec tortor libero, egestas dignissim, imperdiet tempor, pulvinar felis, consequat pharetra. Morbi placerat pharetra varius. In quis justo. Vivamus justo. Nulla in wisi. Proin in ultricies eu, neque. Pellentesque dolor. Vestibulum tempus nulla. Morbi mattis. Nunc elementum. Nam rhoncus, dui sodales nibh nulla in consequat ipsum primis in magna iaculis odio et dui. Vivamus posuere quis, libero. Aliquam erat vel leo. Donec interdum vitae, cursus mauris ac sapien. Praesent justo. Vivamus diam mollis nunc sit amet, elementum vitae, ligula. Aliquam erat blandit eros, sagittis luctus nibh, interdum faucibus, fermentum nec, sem. Cras non neque dui, porta ligula.</p><p>Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc.</p></div>
                            <script type="text/javascript">
                            var eqtabs = new Zikula.UI.Tabs('tabs_example_eq',{equal: true});
                            </script>

## Accordion

Basic accordion

Basic accordion. If javascript is enabled and the accordion script could be initiated successfully, then the parent HTML element is assigned an additional class (default: z-accordion).

### Lorem Ipsum

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

### Fusce eu magna

Fusce eu magna nec tortor libero, egestas dignissim, imperdiet tempor, pulvinar felis, consequat pharetra. Morbi placerat pharetra varius. In quis justo. Vivamus justo. Nulla in wisi. Proin in ultricies eu, neque. Pellentesque dolor. Vestibulum tempus nulla. Morbi mattis. Nunc elementum. Nam rhoncus, dui sodales nibh nulla in consequat ipsum primis in magna iaculis odio et dui. Vivamus posuere quis, libero. Aliquam erat vel leo. Donec interdum vitae, cursus mauris ac sapien. Praesent justo. Vivamus diam mollis nunc sit amet, elementum vitae, ligula. Aliquam erat blandit eros, sagittis luctus nibh, interdum faucibus, fermentum nec, sem. Cras non neque dui, porta ligula.

Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc.

### Donec vitae fringilla aliquet

Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc.

### Nullam pharetra sem vitae ornare risus

Nullam pharetra sem vitae ornare risus. Vivamus justo. Sed porttitor, lacus feugiat leo. Sed tristique senectus et rhoncus pede semper erat, molestie vitae, vulputate mi, eu mollis nibh orci luctus augue a sapien. Cras suscipit, risus ornare lacus nonummy nunc tempus vitae, quam. Proin dui nunc, tempus purus fringilla sit amet sapien facilisis libero. Duis neque magna orci blandit iaculis, turpis viverra elit. In nonummy. Phasellus pulvinar augue. Praesent pretium. Praesent magna suscipit id, dolor. Vivamus ornare, odio et magnis dis parturient montes, nascetur ridiculus mus. Nunc consectetuer ut, eros. Maecenas mi quam, a purus. Phasellus sit amet magna. Aliquam.

### Sed sit amet magna

Sed sit amet magna. Donec porta, turpis nec augue commodo odio non nunc. Suspendisse semper auctor. Maecenas semper quis, lorem. Vivamus ullamcorper eleifend lectus nec scelerisque justo a auctor non, ultrices et, eros. Donec interdum wisi vulputate molestie. Nulla dignissim. Etiam vel nibh. Fusce porttitor, lacus nonummy faucibus orci fermentum ultrices posuere, nibh placerat porttitor. Maecenas pellentesque non, ipsum. Nunc ut nibh. Fusce aliquam purus. Sed sagittis libero. Nam eu lectus. Nullam rutrum ac, felis. Mauris mattis sem. Quisque nec dui. Etiam mollis luctus. Aenean scelerisque lorem velit magna, scelerisque ligula, ornare vel, accumsan augue quis euismod orci blandit risus.

                                <div id="basic_accordion">
                                <h3 class="z-acc-header">Lorem Ipsum</h3>
                                <div class="z-acc-content"><p><strong>Lorem ipsum</strong> dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p></div>
                                <h3 class="z-acc-header">Fusce eu magna</h3>
                                <div class="z-acc-content"><p>Fusce eu magna nec tortor libero, egestas dignissim, imperdiet tempor, pulvinar felis, consequat pharetra. Morbi placerat pharetra varius. In quis justo. Vivamus justo. Nulla in wisi. Proin in ultricies eu, neque. Pellentesque dolor. Vestibulum tempus nulla. Morbi mattis. Nunc elementum. Nam rhoncus, dui sodales nibh nulla in consequat ipsum primis in magna iaculis odio et dui. Vivamus posuere quis, libero. Aliquam erat vel leo. Donec interdum vitae, cursus mauris ac sapien. Praesent justo. Vivamus diam mollis nunc sit amet, elementum vitae, ligula. Aliquam erat blandit eros, sagittis luctus nibh, interdum faucibus, fermentum nec, sem. Cras non neque dui, porta ligula.</p><p>Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc.</p></div>
                                <h3 class="z-acc-header">Donec vitae fringilla aliquet</h3>
                                <div class="z-acc-content"><p>Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc.</p></div>
                                <h3 class="z-acc-header">Nullam pharetra sem vitae ornare risus</h3>
                                <div class="z-acc-content"><p>Nullam pharetra sem vitae ornare risus. Vivamus justo. Sed porttitor, lacus feugiat leo. Sed tristique senectus et rhoncus pede semper erat, molestie vitae, vulputate mi, eu mollis nibh orci luctus augue a sapien. Cras suscipit, risus ornare lacus nonummy nunc tempus vitae, quam. Proin dui nunc, tempus purus fringilla sit amet sapien facilisis libero. Duis neque magna orci blandit iaculis, turpis viverra elit. In nonummy. Phasellus pulvinar augue. Praesent pretium. Praesent magna suscipit id, dolor. Vivamus ornare, odio et magnis dis parturient montes, nascetur ridiculus mus. Nunc consectetuer ut, eros. Maecenas mi quam, a purus. Phasellus sit amet magna. Aliquam.</p></div>
                                <h3 class="z-acc-header">Sed sit amet magna</h3>
                                <div class="z-acc-content"><p>Sed sit amet magna. Donec porta, turpis nec augue commodo odio non nunc. Suspendisse semper auctor. Maecenas semper quis, lorem. Vivamus ullamcorper eleifend lectus nec scelerisque justo a auctor non, ultrices et, eros. Donec interdum wisi vulputate molestie. Nulla dignissim. Etiam vel nibh. Fusce porttitor, lacus nonummy faucibus orci fermentum ultrices posuere, nibh placerat porttitor. Maecenas pellentesque non, ipsum. Nunc ut nibh. Fusce aliquam purus. Sed sagittis libero. Nam eu lectus. Nullam rutrum ac, felis. Mauris mattis sem. Quisque nec dui. Etiam mollis luctus. Aenean scelerisque lorem velit magna, scelerisque ligula, ornare vel, accumsan augue quis euismod orci blandit risus.</p></div>                        </div>
                                <script type="text/javascript">
                                var accordion = new Zikula.UI.Accordion('basic_accordion');
                                </script>

## Panels

Example

Panels are similar concept to Accordion with the exception that you can open/close them - not just switch active one. Markup for panels container needs pairs of headers and content panels. Each pair is identyfied by panel header.

### Lorem Ipsum

Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.

### Fusce eu magna

Fusce eu magna nec tortor libero, egestas dignissim, imperdiet tempor, pulvinar felis, consequat pharetra. Morbi placerat pharetra varius. In quis justo. Vivamus justo. Nulla in wisi. Proin in ultricies eu, neque. Pellentesque dolor. Vestibulum tempus nulla. Morbi mattis. Nunc elementum. Nam rhoncus, dui sodales nibh nulla in consequat ipsum primis in magna iaculis odio et dui. Vivamus posuere quis, libero. Aliquam erat vel leo. Donec interdum vitae, cursus mauris ac sapien. Praesent justo. Vivamus diam mollis nunc sit amet, elementum vitae, ligula. Aliquam erat blandit eros, sagittis luctus nibh, interdum faucibus, fermentum nec, sem. Cras non neque dui, porta ligula.

Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc.

### Donec vitae fringilla aliquet

Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc.

### Nullam pharetra sem vitae ornare risus

Nullam pharetra sem vitae ornare risus. Vivamus justo. Sed porttitor, lacus feugiat leo. Sed tristique senectus et rhoncus pede semper erat, molestie vitae, vulputate mi, eu mollis nibh orci luctus augue a sapien. Cras suscipit, risus ornare lacus nonummy nunc tempus vitae, quam. Proin dui nunc, tempus purus fringilla sit amet sapien facilisis libero. Duis neque magna orci blandit iaculis, turpis viverra elit. In nonummy. Phasellus pulvinar augue. Praesent pretium. Praesent magna suscipit id, dolor. Vivamus ornare, odio et magnis dis parturient montes, nascetur ridiculus mus. Nunc consectetuer ut, eros. Maecenas mi quam, a purus. Phasellus sit amet magna. Aliquam.

                                <div class="z-panels" id="panel">
                                    <h3 class="z-panel-header z-panel-indicator z-pointer z-panel-active">Lorem Ipsum</h3>
                                    <div class="z-panel-content z-panel-active" style="overflow: visible;"><p>Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent.</p></div>
                                    <h3 class="z-panel-header z-panel-indicator z-pointer">Fusce eu magna</h3>
                                    <div class="z-panel-content" style="display: none;"><p>Fusce eu magna nec tortor libero, egestas dignissim, imperdiet tempor, pulvinar felis, consequat pharetra. Morbi placerat pharetra varius. In quis justo. Vivamus justo. Nulla in wisi. Proin in ultricies eu, neque. Pellentesque dolor. Vestibulum tempus nulla. Morbi mattis. Nunc elementum. Nam rhoncus, dui sodales nibh nulla in consequat ipsum primis in magna iaculis odio et dui. Vivamus posuere quis, libero. Aliquam erat vel leo. Donec interdum vitae, cursus mauris ac sapien. Praesent justo. Vivamus diam mollis nunc sit amet, elementum vitae, ligula. Aliquam erat blandit eros, sagittis luctus nibh, interdum faucibus, fermentum nec, sem. Cras non neque dui, porta ligula.</p><p>Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc.</p></div>
                                    <h3 class="z-panel-header z-panel-indicator z-pointer">Donec vitae fringilla aliquet</h3>
                                    <div class="z-panel-content" style="display: none;"><p>Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc.</p></div>
                                    <h3 class="z-panel-header z-panel-indicator z-pointer">Nullam pharetra sem vitae ornare risus</h3>
                                    <div class="z-panel-content" style="display: none;"><p>Nullam pharetra sem vitae ornare risus. Vivamus justo. Sed porttitor, lacus feugiat leo. Sed tristique senectus et rhoncus pede semper erat, molestie vitae, vulputate mi, eu mollis nibh orci luctus augue a sapien. Cras suscipit, risus ornare lacus nonummy nunc tempus vitae, quam. Proin dui nunc, tempus purus fringilla sit amet sapien facilisis libero. Duis neque magna orci blandit iaculis, turpis viverra elit. In nonummy. Phasellus pulvinar augue. Praesent pretium. Praesent magna suscipit id, dolor. Vivamus ornare, odio et magnis dis parturient montes, nascetur ridiculus mus. Nunc consectetuer ut, eros. Maecenas mi quam, a purus. Phasellus sit amet magna. Aliquam.</p></div>
                                </div>
                                <script type="text/javascript">
                                    var panel = new Zikula.UI.Panels('panel', {
                                                    headerSelector: 'h3',
                                                    headerClassName: 'z-panel-header z-panel-indicator',
                                                    contentClassName: 'z-panel-content'
                                                    });
                                </script>

## Image Viewer

You can use the ImageViewer with the following ajaxheader plugin call:

    {ajaxheader imageviewer="true"}

Example

Custom implementation for image zooming. It was designed as Lightbox replacement and it works quite the same. It's also backward compatible with Lightbox. While initialization Zikula.ImageViewerUtil collects all links to images with "rel" attribute containing "imageviewer" or "lightbox" value. It also works for image galleries - "imageviewer[galleryname]" or "imageviewer[lightbox]".

Just dummy text to move demos up from bottom browser edge. Lorem ipsum dolor sit amet nibh. Donec est. Vivamus sit amet dui. Sed sagittis luctus non, posuere quis, vestibulum vel, metus. Phasellus tempor diam vestibulum tincidunt wisi, eget velit. Nullam wisi nibh massa mattis egestas, nunc odio sagittis nec, sagittis libero. Cras non urna ligula ut justo ipsum dolor dictum ut, tempus enim urna, placerat porttitor. Maecenas id felis. Nullam at orci luctus mauris rhoncus a, aliquet elit. Aliquam sed dui. Nulla vitae erat. Integer id nunc. Donec ullamcorper, augue ac lectus. Ut sagittis leo, pretium magna. Praesent rhoncus interdum, lacus. Ut eu ante. Vestibulum ligula. Phasellus hendrerit wisi. Praesent. Fusce eu magna nec tortor libero, egestas dignissim, imperdiet tempor, pulvinar felis, consequat pharetra. Morbi placerat pharetra varius. In quis justo. Vivamus justo. Nulla in wisi. Proin in ultricies eu, neque. Pellentesque dolor. Vestibulum tempus nulla. Morbi mattis. Nunc elementum. Nam rhoncus, dui sodales nibh nulla in consequat ipsum primis in magna iaculis odio et dui. Vivamus posuere quis, libero. Aliquam erat vel leo. Donec interdum vitae, cursus mauris ac sapien. Praesent justo. Vivamus diam mollis nunc sit amet, elementum vitae, ligula. Aliquam erat blandit eros, sagittis luctus nibh, interdum faucibus, fermentum nec, sem. Cras non neque dui, porta ligula. Donec vitae fringilla aliquet. Aliquam erat consectetuer vulputate in, volutpat a, tortor. Vestibulum ante ipsum non tincidunt leo sed adipiscing elit. Aliquam gravida sollicitudin, odio eu mi. Aliquam posuere cubilia Curae, In hac habitasse platea dictumst. Vestibulum laoreet, purus et netus et arcu. Suspendisse fermentum, enim porttitor lacus pretium eu, tortor. Etiam in faucibus quis, convallis varius. Quisque iaculis, turpis risus arcu sed quam enim, ac nulla ac turpis a venenatis in, consequat tortor, a nunc. Donec suscipit quis, feugiat dui, in neque. Nunc velit non urna. Nulla interdum dapibus quam felis sit amet ipsum primis in felis facilisis nunc. Nullam pharetra sem vitae ornare risus. Vivamus justo. Sed porttitor, lacus feugiat leo. Sed tristique senectus et rhoncus pede semper erat, molestie vitae, vulputate mi, eu mollis nibh orci luctus augue a sapien. Cras suscipit, risus ornare lacus nonummy nunc tempus vitae, quam. Proin dui nunc, tempus purus fringilla sit amet sapien facilisis libero. Duis neque magna orci blandit iaculis, turpis viverra elit. In nonummy. Phasellus pulvinar augue. Praesent pretium. Praesent magna suscipit id, dolor. Vivamus ornare, odio et magnis dis parturient montes, nascetur ridiculus mus. Nunc consectetuer ut, eros. Maecenas mi quam, a purus. Phasellus sit amet magna. Aliquam. Sed sit amet magna. Donec porta, turpis nec augue commodo odio non nunc. Suspendisse semper auctor. Maecenas semper quis, lorem. Vivamus ullamcorper eleifend lectus nec scelerisque justo a auctor non, ultrices et, eros. Donec interdum wisi vulputate molestie. Nulla dignissim. Etiam vel nibh. Fusce porttitor, lacus nonummy faucibus orci fermentum ultrices posuere, nibh placerat porttitor. Maecenas pellentesque non, ipsum. Nunc ut nibh. Fusce aliquam purus. Sed sagittis libero. Nam eu lectus. Nullam rutrum ac, felis. Mauris mattis sem. Quisque nec dui. Etiam mollis luctus. Aenean scelerisque lorem velit magna, scelerisque ligula, ornare vel, accumsan augue quis euismod orci blandit risus.