CSS

Class .menu-v allows creating vertical menus of hyperlinks and should be applied to an ul element; e.g.:

<ul class="menu-v with-icons">

In the example above additional class name .with-icons is specified for the list to set the desired menu type (specifying menu type is optional). Webasyst supports the following menu types:

• ul.menu-v.with-icons: a menu with small icons to the left of links (this class displays all icons added by means of <i class="icon16 ..."></u> elements inside links to the left of menu items);
• ul.menu-v.compact: a compact menu (reduced vertical margins for menu items);
• ul.menu-v.dropdown: a drop-down menu (each nested level drops down when the mouse cursor is moved over (:hover) its parent item in the current level).

Different menu types can be used in combination with each other; e.g.:

<ul class="menu-v with-icons compact">

Class .menu-v is used for creation of hierarchical menus of unlimited depth, where each next level ul.menu-v is placed inside the current menu item li. We recommend placing hierarchical menus inside blocks <div class="hierarchical"></div>.

To selected menu items style class .selected can de assigned:

<li class="selected">

Class .menu-h allows creating horizontal menus and should be applied to ul elements:

<ul class="menu-h">

Additional class ul.menu-h.dropdown is used for adding drop-down submenus where each nested level appears when the mouse cursor is moved over its parent item (:hover) in the current menu level.

To selected menu items class .selected can be assigned:

<li class="selected">

Class .tabs is used to display a horizontal tabs-like menu. This class should be applied to ul elements:

<ul class="tabs">

In order for the li element's contents to appear visually as a tab, it must be inserted between hyperlink tags:

<a></a>

Class .tabs should be used together with block element <div class="tab-content"> following directly after <ul class="tabs">; this will add a visual border under menu tabs.

A selected tab is highlighted using class .selected:

<li class="selected">

Class .zebra is used for displaying data as a table with a different background color for each subsequent row. This class can be applied to elements <table class="zebra"> and <ul class="zebra">.

Class ul.thumbs is used for displaying images as a table-like list; e.g., photos in a web album, photos in a contact list, product images, etc.

By default each list item (li) width is automatically calculated based on the particular image size. You can additionally specify the desired width in pixels by assigning a special style class; e.g.:

<ul class="thumbs li100px">

Available image width classes: .li50px, .li100px, .li150px, .li200px, .li250px, .li300px, .li350px.

Using class .highlighted (e.g., <li class="highlighted">) you can highlight certain list elements to draw users' attention to them (e.g., items recently added by other users since the current user's previous login to the backend).

Selected items can be highlighted using class .selected; e.g.:

<li class="selected">

One of the most convenient methods of creating a web page layout is by using classes .sidebar and .content. With these two classes you can create a multi-column page layout with common scrolling; this is a convenient and the most familiar appearance of a web page for Internet users.

<div class="sidebar left200px">
  <div class="block">
    left column 200 pixels wide
  </div>
</div>
<div class="sidebar right100px">
  <div class="block">
    right column 100 pixels wide
  </div>
</div>
<div class="content left200px right100px">
  <div class="block">
    main content
  </div>
</div>

The width and relative position of each column is adjustable using additional classes .leftNpx and .rightNpx, where values left and right denote a column's position, and a number instead of N sets width in pixels (available width values: 100, 200, 250, 300, 400). The number of left and right columns is unlimited. For their correct appearance on a page, first calculate their width as well as distance from the left and the right side of block .content and then assign it using the same classes (.leftNpx и .rightNpx). For example, if there are two left columns with class .sidebar.left200px, then you should assign class .content.left400px to the main content block.

If no column size and distance from the main content blocks have been specified, the default value of 200 pixels will be applied. We recommend using this width for the left column, because it appears most naturally in the Webasyst interface.

Instead of class .sidebar you can use class .sidebar-fixed. It helps creating a similar layout column, but with a fixed position on a page which is not changed when the page is scrolled up or down.

.fields group classes allow a web designer to display various data lists (e.g., user contact information or a registration form) as "key—value" pairs using block elements div.

Use of .fields group classes:

.fields (.form)
  (.field-group)
    .field
      .name
      .value
      (.value)
      (.value)
    .field
      .name
      .value
      (.value)
      (.value)

Classes .icon16 and .icon10 are applied to elements i and allow embedding small 16*16 and 10*10 pixels large icons in texts, hyperlinks, or titles; e.g.: or .

<i class="icon16 iconname">

All Webasyst icons are combined in a single image file wa-content/img/icon16.png (and icon10.png respectively). The full list of icons available in Webasyst is specified in style sheet file wa-content/css/wa/wa-1.0.css. If the vailable icons are not enough for your application, their set can be extended by arbitrary icon files using the following syntax:

.icon16.iconname { }

Icons included in Webasyst installation package are based on sets Fugue and Diagona created by Yusuke Kamiyamane: http://p.yusukekamiyamane.com/. They contain over 3000 icons, which can be used free of charge according to the terms of the Creative Commons Attribution 3.0 license. We recommend using these icons in development of Webasyst applications.

Dialogs are an important are frequently used elements of web interfaces.

Framework Webasyst offers a mechanism of creating dialogs using JavaScript.

To create a dialog, include the following JavaScript file in your web page:

<script type="text/javascript" src="{$wa_url}wa-content/js/jquery-wa/wa.dialog.js"
type="text/javascript"></script>

Then, in order to transform any web page element $(el) to a dialog, apply the following JavaScript code:

$(el).waDialog(options);

Below is shown a imply example (a dialog with one text field and a confirmation button):

$('<div>Enter your name: <input type="text" name="name"/></div>').waDialog({
'buttons': '<input type="submit" value="OK" />',
onSubmit: function (d) {
    $.post('?module=m', $(this).serialize(), function () {
        d.trigger('close'); // close dialog
    }, 'json');
    return false;
}
});

Method waDialog accepts options as an array of parameters, which allow a developer to control the dialog's behavior. Below is provided the list of acceptable parameters and their default values:

• esc: true: whether the dialog will be hidden, when the Esc key is pressed; enabled by default
• buttons: null: defines the dialog buttons, if they should be specified explicitly
• url: null: the dialog content is loaded from the specified URL using jQuery.get
• disableButtonsOnSubmit: false: disables all data submission buttons within the dialog, when data are sent via a web form (input[type=submit])
• onLoad: null: callback function called upon complete loading of the dialog content
• onCancel: null: callback function called upon a click on the "cancel" button
• onSubmit: null: callback function called upon data submission via the dialog's web form
• onClose: null: callback function called, when the dialog is closed
• className: '': CSS class name added to the dialog's HTML block
• width: '': width; e.g., '400px'
• height: '': height, similar to the width
• title: '': if specified, element <h1>title</h1> is added to the dialog's content

In all callback functions, except for onSubmit, variable this refers to the dialog element.

In case of onSumbit variable this refers to the <form> element, and the dialog element is passed to the function as the first parameter:

onSubmit: function (d) {
    	$.post('?module=m', $(this).serialize(), function () {
			d.trigger('close'); // close dialog
		}, 'json');
		return false;
}

A dialog's structure consists of two main parts: main conitent with web form fields and buttons.

In the element passed to the dialog creation method call you can specify both blocks. The content with form fields should placed inside a div element with class name dialog-content and buttons inside a div with class name dialog-buttons:

$('<div><form><div class="dialog-content">Content</div>
  <div class="dialog-buttons"><input type="submit" value="OK" />
  </div></form></div>').waDialog({
  'onSubmit': function (d) {
	d.trigger('close'); 
	return false;
  }
});

If no block with CSS class name dialog-content has been specified, then it is considered that no buttons block has been passed to the dialog creation method. In this case you can specify it by means of the buttons parameter:

$('<div>Simple message text</div>').waDialog({
'buttons': '<input type="submit" value="Close" />',
'onSubmit': function (d) {
	d.trigger('close'); 
	return false;
}
});

To all elements of a dialog, which have a CSS class named "cancel", the event closing the dialog by a mouse click is automatically attached.

To avoid possible conflicts, do not use CSS class "dialog" for elements, to which you apply waDialog.

Class .profile was initially created for displaying user contact information with his/her photo, but was later found useful for a wider scope of application. For example, it suits very well for displaying comments with author images (avatars), product information blocks with product images, photo thumbnails with EXIF data, etc. Class .profile is suitable for displaying any kind of information in the form "image on the left, text on the right". It can be used in HTML templates as shown below:

<div class="profile image96px">
  <div class="image">
      image
    </div>
    <div class="details">
      image
    </div>
  </div>
</div>

Using additional class .image96px, you can specify the exact image size inside the .image block. Other available image size values: .image20px, .image32px, .image50px.

Class .progressbar is used to display a colored progress bar created using HTML and CSS only:

<div class="progressbar">
  <div class="progressbar-outer">
    <div class="progressbar-inner" id="my-custom-progressbar-id" style="width: 37%;">
    </div>
  </div>
</div>

The highlighted attribute style sets the current progress bar state in percents; you can change its value using JavaScript. An example with jQuery code:

$('#my-custom-progressbar-id').css('width','41%'); //setting progress bar value to 41%

You can change the appearance of the progress bar using special CSS classes corresponding to different background colors (.progressbar.green, .progressbar.yellow, .progressbar.red, .progressbar.blue) and a class to display its mini version: .progressbar.small.

The following classes and structures will be useful for development of various Webasyst interfaces.

.inline-link

Dashed underline for links: link example. We recommend applying this class to all links performing some local action on a page; e.g., displaying a hint, expanding a menu item, etc. In HTML templates it is implemented using a combination of a, b и i elements as shown below:

<a href="#" class="inline-link"><b><i>текст ссылки</i></b></a>

.button

Nice large button:

Class .button should be applied to elements input and a as shown in the example below:

<input type="button" class="button" value="Button" />
<a href="#" class="button">Button</a>

.paging

Current page indicator:

Syntax for embedding in a template:

<div class="paging">
  <a class="selected" href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  ...
  <a href="#">10</a>
  <a class="prevnext" href="#"><i class="icon10 larr"></i> prev</a>
  <a class="prevnext" href="#">next <i class="icon10 rarr"></i></a>
</div>

.small, .large, .hint

These classes change appearance of text inside inline and block elements (span, em, div, etc.):

<span class="large">text</span>
<span class="small">text</span>
<span class="hint">text</span>

text
text
text