Dynamic HTML
"uweb/active.php"
Uray Web Library (UWeb)
This file contains functions that generate dynamic HTML elements such as buttons, form input elements and others. In this file, "generate" means to return the generated HTML as string.
See also utils.php (included by active.php) for more simple generator functions (such as alink(), image()).
Most of these dynamic elements require UWeb's JavaScript, otherwise they may not work, and UWeb's dynamic CSS styles, otherwise they will not look correctly.
Note: to visually see many of the features described in this page, see e.g. the test file test/active.html (and its source, test/active.php) in UWeb's directory.
function button ($text, $action, $attrs = []);
Generate a pushable button (<button>).
$text: the text content (HTML code) of the button.
$action: the action (data-action attribute) of the button.
$attrs: optional additional attributes of the element (see: attrs()).
function link_button ($text, $action, $attrs = []);
Generate an HTML link that has an action like a button.
$text: the text content (HTML code) of the link.
$action: the action (data-action attribute) of the link.
$attrs: optional additional attributes of the element (see: attrs()).
function button_image ($image, $action, $attrs = []);
Generate a button (<button>) with an image (<img>) inside it.
$image: the URL (src attribute) of the image, or the HTML code of the <img> element (e.g. returned by image()).
$action: the action (data-action attribute) of the button.
Requirement: $has_button_image if the website generates its own CSS
function submit_button ($text, $attrs = []);
Generate a submit button for an UWeb form.
$text: the text content (HTML code) of the button.
$attrs: optional additional attributes of the element (see: attrs()).
function textbox ($id, $attrs = []); function textbox ($id, $value, $attrs = []);
Generate an HTML textbox (<input type='text'>).
$id: the data-name attribute of the textbox, to identify it within an UWeb form. (It can be null.)
$value: optional initial text of the textbox.
$attrs: optional additional attributes of the <input> element (see: attrs()).
function password_box ($id, $attrs = []); function password_box ($id, $value, $attrs = []);
Same as textbox(), except that it generates a password field (<input type='password'>), i.e. a text field that does not display its content.
function input ($type, $id, $attrs = []); function input ($type, $id, $value, $attrs = []);
Generate a general HTML input field (<input>).
$type: the type attribute of the <input>. For example, input("text", ...) is equivalent to textbox(...).
$id: the data-name attribute of the input field, to identify it within an UWeb form. (It can be null.)
$value: optional initial value (the value attribute) of the input field.
$attrs: optional additional attributes of the <input> element (see: attrs()).
function textarea ($id, $attrs = []); function textarea ($id, $text, $attrs = []);
Generate a multi-line text input field (<textarea>).
$id: the data-name attribute of the text field, to identify it within an UWeb form. (It can be null.)
$text: optional initial content of the text field. It must be appropriately escaped for HTML (e.g. by html_escape()).
$attrs: optional additional attributes of the <textarea> element (see: attrs()).
function input_line ($text, $input, $attrs = []);
Generate an aligned input line with a text and an input field. It helps to display multiple input fields in a formatted way. These lines must be put into a container that has class='input-lines', see the example below.
$text: the label (HTML code) of the input.
$input: the corresponding input field (HTML code, e.g. returned by textbox()).
$attrs: optional additional attributes of the element (see: attrs()).
For example:
echo "<div class='input-lines'>";
echo input_line("Username:", textbox("username"));
echo input_line("Password:", password_box("password"));
echo "</div>";
Requirement: $has_input_lines if the website generates its own CSS
function checkbox ($id, $attrs = []); function checkbox ($id, $checked, $attrs = []);
Generate a checkbox (<input type='checkbox'>), i.e. an input field with two states: checked or unchecked.
$id: the data-name attribute of the checkbox, to identify it within an UWeb form. (It can be null.)
$checked: the initial state of the checkbox (true or false), by default false.
$attrs: optional additional attributes of the <input> element (see: attrs()).
Note: for readability, checkboxes can be put inside a label().
function radio_button ($name, $id, $attrs = []); function radio_button ($name, $id, $checked, $attrs = []);
Generate a radio button (<input type='radio'>), which is similar to a checkbox, but only one radio button can be checked in a group at a time.
$name: the name attribute of the radio button, which defines the group of radio buttons that are mutually exclusive, i.e. only one radio button can be selected among those that share the same name.
$id: the data-id attribute of the radio button, which identifies it within the group. (Can be null.)
$checked: the initial state of the radio button (true or false), by default false.
$attrs: optional additional attributes of the <input> element (see: attrs()).
Note: if the radio buttons are inside an UWeb form, the whole group should be put into a container with a data-name attribute to identify the group within the form. For example:
echo "<div class='options' data-name='color'>";
echo label(radio_button("color", "red"), "Red");
echo label(radio_button("color", "green"), "Green");
echo label(radio_button("color", "blue"), "Blue");
echo "</div>";
function label ($input, $text = null, $info = null);
Print an HTML label (<label>) with an input field (e.g. a checkbox or a radio button) and a text label.
$input: the HTML code of the input field (e.g. returned by checkbox()).
$text: the text label (HTML code) next to the input field.
$info: optional additional information text after $text, put into a qmark().
function selection ($id, $options, $selection = null, $attrs = []);
Generate a drop-down selection list (<select> with <option> elements).
$id: the data-name attribute of the selection, to identify it within an UWeb form. (It can be null.)
$options: associative array of options, e.g. ["id1" => $value1, "id2" => $value2, ...], where the keys are the data-id attributes of the <option> elements, and each value can be either the text of the option, or an array containing the text and additional attributes (attrs()) of the <option> element, e.g. [$text, "attr1" => "v1", "attr2" => "v2", ...].
$selection: the initially selected option(s). Either:
$options (string or int), $options for multiple selection, null for no initial selection. $attrs: optional additional attributes of the <select> element (see: attrs()).
function popup_ok ($ok_name = "OK", $ok_action = null);
Generate a single OK button for a popup box. It can be used inside the AJAX command <!popup>.
$ok_name: the label of the OK button (HTML code).
$ok_action: if given, the button will have this action in addition to the default one, which is to close the popup box.
function popup_yes_no ($yes_name, $no_name, $yes_action, $yes_attrs = []);
Generate a Yes/No button pair for a popup box. It can be used inside the AJAX command <!popup>.
$yes_name, $no_name: the labels of the buttons (HTML codes).
$yes_action: the action (data-action attribute) of the Yes button.
$yes_attrs: optional additional attributes of the Yes button (see: attrs()).
function popup_submit_cancel ($submit_name, $cancel_name, $submit_attrs = []);
Generate a submit button and a cancel button for an UWeb form inside a popup box (<!popup>).
$submit_name, $cancel_name: the labels of the buttons (HTML codes).
$submit_attrs: optional additional attributes of the Submit button (see: attrs()).
function dropdown_menu ($title, $items);
Generate a dropdown menu. It consists of a link, which opens the menu containing the given menu items.
$title: the text (HTML code) of the link. (It can be null.)
$items: array of menu items. Each element is a text (HTML code).
Requirements: $has_dropdown (CSS) and $has_dropdown (JS) if the website generates its own CSS and/or JavaScript
See also the JavaScript function show_dropdown().
function dropdown_menu_button ($title, $items);
Same as dropdown_menu(), except that it displays a button, not a link.
function info_text ($text, $info, $attrs = []);
Generate text with a popup tooltip, which appears when the mouse hovers over the text.
$text: the original text (HTML code).
$info: the text of the popup tooltip (HTML code).
$attrs: optional attributes of the element (see: attrs()). The direction of the popup can be changed by the data-dir attribute, see data-tip and show_dropdown().
Requirements: $has_tooltip (CSS) and $has_tooltip (JS) if the website generates its own CSS and/or JavaScript
function qmark ($info, $attrs = []);
Generate a question mark with a popup tooltip, which appears when the mouse hovers over the question mark.
$info: the text of the popup tooltip (HTML code).
$attrs: optional attributes of the element (see: attrs()). The direction of the popup can be changed by the data-dir attribute, see data-tip and show_dropdown().
Requirements: $has_tooltip (CSS) and $has_tooltip (JS) if the website generates its own CSS and/or JavaScript
function tabbed ($tabs, $selection = null);
Generate a multi-tab content. It consists of a set of contents, only one of which is visible at a time, and a header, which contains labels to select the visible content.
$tabs: array of tab objects, which have the following methods:
title(): return the text of the header (the tab label). It will be printed inside a <p class='title'>. header() (instead of title()): print the HTML content of the header (with echo). This is more general than title(). body() or content(): print the content of the body. head_attrs(), body_attrs(): optional additional attributes (attrs()) of the header/body container respectively. Each method receives a boolean parameter $selected, which tells whether this tab is initially selected.
$selection: the identifier (key of $tabs) of the initially selected tab. The default is the first tab.
Requirements: $has_tabbed (CSS) and $has_tabbed (JS) if the website generates its own CSS and/or JavaScript
function hidden_params ($params, $attrs = []);
Generate hidden name-value pairs in an UWeb form. It can be used to pass additional parameters to an AJAX query, without extra input elements. See also data-value.
$params: the name-value pairs in an associative array.
$attrs: optional additional attributes of the hidden container (see: attrs()).
function params ($params);
Generate name-value pairs in an UWeb form. This is the same as hidden_params(), except that it is not enclosed in a hidden container, so it must be hidden in another way. It can also be used to replace the content of an existing hidden_params() via the AJAX command <!replace>.