Ajax framework for building extensible web pages

https://www.xul.fr/ajax/extensible/

Licence

The A.E.P framework is distributed under the GNU GPL 2.0 Licence.

Overview

The JavaScript library has functions to:

Develop or summarize a whole page.
Expand just a word, to a phrase or paragraph, and to revert by collapsing it.
Get text to display from data hidden into the same page, or from text files.

Interface of the library

void quietVerbose(target)

Switch the state of the element between collapsed or expanded.

void develop()

Expand all entries.

void summarize()

Summarize the document, collapse all entries.

Creating the page

Inserting the script

The following line must be inserted into the head section of the HTML page:

<script src="extensible.js" type="text/javascript"></script>

Storing the data in the page

Data are stored into <div> tags. An identifier is given to this element. The display value is none, the content will by displayed by your wysiwig HTML editor, not by browsers.

Example:

<div id="x" style="display:none;">This is the expanded text.</div>

Creating an extensible element

The elements to expand are stored anywhere in the page thanks to <span> tags.

An identifier is given to the tag and a property is added to designate the text to insert.

If this text is stored into the page, this is an identifier, otherwise if it is read from a file, it is the filename.

And event is also added to the span tag to choose the function to call.

The complete format is as this:

<span id="dyntext" name="x" onclick="quietVerbose(this);"> Text to replace </span>

or:

<span id="aep" src="xxx.txt" onclick="quietVerbose(this.id);"> Text to replace </span>

id is the identifier of this element. The same id may be used for all AEP span elements.
name is the identifier of the div that holds the replacing text and src the filename.
onclick is the event. Several different functions may be called here (see above).
this designate the current <span> tag. With the DOM element, the library is able to retrieve the values of all the properties of the tag.

Adding overall commands

The links to expand or collapse the whole document are similar to the ones above, but we are using div tags instead.

Here is the format:

<div onclick="develop()>Expand</div>

<div onclick="summarize()>Collapse</div>

The develop() or summarize() function are used for text stored into the page or taken from external file.

Or using buttons

The format is similar, but we have to load an image instead:

<div onclick="develop();"><img src="expand.gif"></div>

Tips and advices

How to start with a developed page

Insert this code after including the extensible library:

<script language="JavaScript">
  window.onload=develop;
</script>

or to use onload with other functions:

  window.onload=function() 
  { 
    develop(); 
  }

How to change the color of the extensible text

Add a style either into a file or into the page:

.aep { ...style...}

The span tag becomes now:

<span id="dyntext" name="x" class="aep" onclick="quietVerbose(this);"> Text to replace. </span>

Changing the mouse over the text to expand

If you prefer to keep a color near that of the main text, you can change the appearence of the mouse instead:

.aep { cursor:help; }

Links into the hidden text

Avoid to put too many external links into hidden texts, this could be viewed by search engines as a spam.

Expanding a part at once

You can choose to develop a part of the text and hide any other part previously displayed.
This is achived by combining to function calls:

<span id="dyntext" name="x" onclick="summarize();quietVerbose(this);">Text to expand</span>

Need help?

Go to the FAQ and forum at the https://www.xul.fr website, feel free to request an explanation, I'll answer to any question.