Open/close events of KSS Opener

How to apply custom reaction to open/close events of KSS Opener. How to disable default expand/collapse behaviour.

Besides defining ":opener-init" even that initializes opener, developer has ability to extend/override open/close events:

.term:opener-init{
  evt-init-elementSelector: '.details';
}

.term:opener-open{
  action-client: executeCommand;
  executeCommand-commandName: replaceInnerHTML;
  executeCommand-commandSelector: '#status';
  executeCommand-html: 'expanded';
}

.term:opener-close{
  action-client: executeCommand;
  executeCommand-commandName: replaceInnerHTML;
  executeCommand-commandSelector: '#status';
  executeCommand-html: 'collapsed';
}

and HTML for the samle is:

<hr />
<div id="status">Current status</div>
<hr />

<div class="term">
  History
  <div class="details">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum
    iaculis eros eu purus. Integer accumsan leo id lorem viverra vulputate.
    Donec feugiat nunc molestie massa nonummy pulvinar. Proin porta pede
    sit amet lectus. Duis leo urna, tempor non, condimentum condimentum,
    commodo non, libero. Integer feugiat, pede at.
  </div>
</div>

The resulting behaviour on page is:

If you do not see a flash movie above, see original post.

The important thing is that on open and close you can have client-side or server-side actions. You can disable default expand/collapse behaviour, with preventDefault parameter:

.term:opener-open{
  preventDefault: true;
}

Wednesday, April 04, 2007  | Permalink |  Comments (0)

trackback URL:  http://talk.quintagroup.com/blogs/myroslav/kss-opener/open-close-events/sbtrackback