Javascript_css_selectors

---

title: Javascript css selectors permalink: /Javascript_css_selectors/

This is a working draft for e107 v2.0 css selectors.

.e-hideme

Hides the element/container

<div class='e-hideme'>Hidden Text</div>

.e-expandit

Toggles a hidden element (like the old expandit() js function.

<a href='#elementToOpen' class='e-expandit'>Expand</a>
<div id='#elementToOpen' class='e-hideme'>
   Click the link above and I will become visible
</div>

.e-date

Used internally. Use $frm->datepicker() instead.

.e-datetime

Used internally. Use $frm->datepicker() instead.

.e-confirm

Display a confirmation dialog before proceeding.

<a title='Are you sure?' class='e-confirm' href='delete.php'>Delete</a>

.e-dialog

Opens a dialog/modal window with the URL contained in 'href'.

<a title='Footer of window.' rel='external' class='e-dialog' href='url.php'>Open Dialog Window</a>";

.e-dialog-close

Used within a dialog window, it will close it.

<a href='#'>Close</a>";

.e-ajax

Loads data from another page into a container.

<a class='e-ajax' href='#e-container' data-src='mypage.php #target' >Load</a>";
<div id='e-container'>
   (URL data will be shown here)
</div>

Use the optional identifier to grab only a small portion of the 'data-src' page. eg. #target will grab all content inside the container with id=target.

<div id='target'>This data will be loaded and sent back to 'e-container'</div>

.e-wysiwyg

Sets a div or textarea element as an area that can be activated by a WYSIWYG plugin. eg. TinyMce. Is set by default using $frm->bbcode() (see form-handler)

<textarea class='e-wysiwyg'>This area will become a wysiwyg text-area when active</textarea>

.e-tabs

Create tabs

<div class='e-tabs'>
   <ul>
      <li><a href='#tab1'>Tab 1</a></li>
      <li><a href='#tab2'>Tab 2</a></li>
   </ul>
   <div id='tab1'>Tab 1 Content</div>
   <div id='tab2'>Tab 2 content</div>
</div>

Category:Plugin Development Category:Developer References Category:Classes Category:API