Document Actions

Introduction of KSS Opener

KSS introduced revolutionary concept into Ajax/CSS development. However out-of-the-box feature set is limited, while offering quite good extensibility. Opener is KSS component that extends KSS selectors with the set of events to enable collapsible behaviour.

After installation product offers following event:

opener-selector:opener-init {
   evt-init-elementSelector: element-selector;
}

All elements that matches opener-selector will get controller that will offer expand/collapse functionality with mouse click.

Real-life example is:

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

and having HTML code:

<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>

will produce into something like:

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

Wednesday, March 14, 2007 | Permalink | Comments (3)

trackback URL: http://talk.quintagroup.com/blogs/myroslav/kss-opener/introduction/sbtrackback

<div class="term"> ?

Posted by Geir Bækholt at 2007-03-14 15:02

Thanks, Myroslav. This is useful, both as a tool and as an example for other people on how to push kss further.

It would be even cooler if it followed in plone's footsteps and used semantic markup and rather did something like:
<dl>
<dt>History</dt>
<dd>
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.
</dd>
</dl>

<div class="term" is a bit like <div class="header2" and div class="paragraph" …

;)

.term for the sace of simplicity

Posted by Myroslav Opyr at 2007-03-15 01:41

Hi,

in a couple of days I'll post dl/dt/dd example. It was not the very first one only because KSS Opener is initialized with extra parameter, I didn't want to introduce in the "Introduction" post.

See my comments to Limi in the cms.info blog (http://www.contentmanagementsoftware.info/blog/kss-opener-introduction).

Stay tuned!

Structural followup

Posted by Myroslav Opyr at 2007-03-15 02:38

In XHTML 2.0 (http://www.w3.org/TR/xhtml2/mod-structural.html) the KSS sample would be:

section:opener-init {
evt-init-elementSelector: '*:not(> h):not(.opener-controller)';
}

and sample HTML would be:

<section>
<h>History</h>
<p>
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.
</p>
</section>

But we live in real world and neither mainstream browsers support xhtml2 (https://bugzilla.mozilla.org/show_bug.cgi?id=161463) nor developers know what section/h tags and css3 selectors are yet.

TalkQuintagroup

Sections

Personal tools

Document Actions

Introduction of KSS Opener

<div class="term"> ?

.term for the sace of simplicity

Structural followup