Personal tools

Log in Register

Sections

You are here: Home › Blogs › Myroslav Opyr › KSS Opener › Introduction of KSS Opener

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.

Document Actions

Print this

Filed under: kss

<div class="term"> ?

Posted by Geir Bækholt at Apr 12, 2011 12:51 PM

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"

;)

Report Abuse

Name (Required)

Please enter your name.

E-Mail (Required)

Please enter your e-mail address.

Description (Required)

Please state your reasons why you would like to report this comment as abusive. Our administrator will be notified with your message.

Enter the word below (Required)

.term for the sace of simplicity

Posted by Myroslav Opyr at Apr 12, 2011 12:51 PM

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!

Report Abuse

Name (Required)

Please enter your name.

E-Mail (Required)

Please enter your e-mail address.

Description (Required)

Please state your reasons why you would like to report this comment as abusive. Our administrator will be notified with your message.

Enter the word below (Required)

Structural followup

Posted by Myroslav Opyr at Apr 12, 2011 12:51 PM

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:

History

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.

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.

Report Abuse

Name (Required)

Please enter your name.

E-Mail (Required)

Please enter your e-mail address.

Description (Required)

Please state your reasons why you would like to report this comment as abusive. Our administrator will be notified with your message.

Enter the word below (Required)

Add comment

You can add a comment by filling out the form below. Plain text formatting.

Info: Note: you are not logged in. You may optionally enter your username and password below. If you don't enter your username and password below, this comment will be posted as the 'Anonymous User'.

Name

Password

Subject (Required)

Comment (Required)

Enter the word below (Required)