Quick Menu Skin
A functional skin that replaces the left bar with a customizable Javascript menu system.
Screen Shot
Installation
Note: You do not need to install anything on the browser to use this skin. The following instructions are for the administrator who installs the skin on the server where TWiki is running.
Settings
The menu can behave in two ways. When
CLICKMENU
is set to 0 then the menu automatically shows when you hover the mouse over the menu. When it is set to 1 then the menu is activated by clicking on it. By default
CLICKMENU
is set to 0.
To add different menus to the menubar you can set
QUICKMENUBAR
to the topic containing the javascript for your own custom menus. By default
QUICKMENUBAR
is set to
%TWIKIWEB%.QuickMenuBar
, have a look at
QuickMenuBar to see how the menus are created.
To change settings just add them to
TWikiPreferences,
WebPreferences, or your personal page.
Eg:
* Set CLICKMENU = 1
* Set QUICKMENUBAR = %TWIKIWEB%.QuickMenuBar
Modifying Menus
The menu bar is built by default from
QuickMenuBar, which in turn includes
QuickMenuBarLogin (if login is enabled) and
QuickMenuBarWebs and
QuickMenuBarUtilities. If internationalisation is enabled, then
QuickMenuBarLanguage is also included. These files contain javascript commands that are included by the skin's templates. You can edit these files to customize the menu, but be sure to avoid unwanted linking by enclosing your code in
<noautolink>
...
</noautolink>
tags.
QuickMenu Javascript Reference
- To create a new menu
mymenu = new QuickMenu.Menu(menuBar, "Menu Text", "", "/icons/icon.gif", "Menu Tip Information");
or just a link:
new QuickMenu.Menu(menuBar, "TWiki.org", "http://twiki.org/");
or a javascript function:
new QuickMenu.Menu(menuBar, "Say Hello", "js:alert('Hello')");
- Add items to the menu
mymenu.Add("Item Text", "%SCRIPTURLPATH{"view"}%/PageToView", "", "Item Tip");
mymenu.Add("Text Formatting", "%SCRIPTURLPATH{"view"}%/TextFormattingRules", "%ICONURLPATH{"help"}%", "More formatting help");
mymenu.Add("Disabled item");
- Add a submenu
mymenu.Add("Choose Colour", ":Colour");
mymenu.Colour.Add(...
or
submenu = mymenu.Add("Choose Colour", ":");
submenu.Add(...
QuickMenu Examples
- A cleaner interface
You don't need to store each menu & submenu in variables.
with (new QuickMenu.Menu(menuBar, "Menu")) {
Add("Item1", "url");
Add(); // Separator
with (Add("SubMenu", ":")) {
Add("SubItem1", "url");
Add("SubItem2", "url");
Add(...
}
}
- An edit button on the menubar
new QuickMenu.Menu(menuBar, "%MAKETEXT{"Edit"}%", "%SCRIPTURLPATH{"edit"}%/%BASEWEB%/%BASETOPIC%?t=%GMTIME{"$epoch"}%", "%ICONURLPATH{"edittopic"}%", "%MAKETEXT{"Edit this topic text"}%");
- A recent changes menu (Thanx to TWiki:Main/PeterHuisken)
Creates a list of the 10 most recently changed topics.
with (new QuickMenu.Menu(menuBar,"%MAKETEXT{"Changes"}%","","","%MAKETEXT{"Latest Changes"}%")) {
%SEARCH{".*" web="%BASEWEB%" regex="on" nosearch="on" nototal="on" order="modified" reverse="on" limit="10" format=" Add(\"$topic\", \"%SCRIPTURLPATH{view}%/$web/$topic\",\"\");"}%
}
- A main topics menu
Lists all the child topics of WebHome.
with (new QuickMenu.Menu(menuBar,"Web Topics")){
Add("%HOMETOPIC%", "%SCRIPTURLPATH{view}%/%BASEWEB%/%HOMETOPIC%", "%ICONURLPATH{"home"}%");
Add();
%SEARCH{"\%META:TOPICPARENT\{name=\"%HOMETOPIC%\"\}\%" type="regex" nonoise="on" format=" Add(\"$topic\", \"%SCRIPTURLPATH{view}%/$web/$topic\");"}%
}
Skin Info
Related topic: TWikiSkins,
TWikiSkinBrowser,
UserDocumentationCategory,
AdminDocumentationCategory
--
TWiki:Main/VernonLyon - 13 Jun 2006
Topic revision: r1 - 02 Feb 2007 - 05:16:01 -
TWikiGuest