Table of Contents
The DHTML Extra files are bundled in a zip file. Click on the download link in the Extra section of system's web site, and follow the instructions to download the file.
Save the file (extra.zip) to your website's root folder on your computer or server.
If you have not done so follow the instructions to download and unzip the Extra files.
In your web editor (Dreamweaver, UltraEdit, etc.), open the web page in which you want the extra placed. Insert your cursor before the ending </head> tag.
Paste the following style path and script paths before the ending </head> tag:
<!-- Javascript system utilities file --> <script type="text/javascript" src="system/utils/system.js"></script> <!-- Optional system button file; needed for button extra --> <script type="text/javascript" src="system/utils/button.js"></script> <!-- Optional system pane file; needed for pane extra --> <script type="text/javascript" src="system/utils/pane.js"></script> <!-- Optional system popup file; needed for popup extra --> <script type="text/javascript" src="system/utils/popup.js"></script> <!-- Optional system dropdown file; needed for dropdown extra --> <script type="text/javascript" src="system/utils/dropdown.js"></script>
Using your editing or FTP program, copy or "put" your web page and the entire tree folder to the root of your website.
Using your web browser, navigate to the web page that you created to include the system DHTML Extra. Congratulations! You have set up the most basic version of the system DHTML Extra! Now, on to the fun and exciting features you can change with this highly adaptable application!
The theme option specifies the CSS used to present the Extra feature.
The string argument is the name of the theme:
theme : 'winxp'
or the absolute or relative path to the theme file:
theme : 'themes/winxp.css'
The theme name is case-insensitive. Some themes are provided in the themes folder.
If the theme option is not specified, the default.css file in the themes folder is used.
To use your own CSS throughout the enterprise without specifying the theme option for each page, you can rename your CSS file to "default.css" and move it to the themes folder.
To create a progress bar like those in the system.Progressbar demo, use the system.ProgressBar class.
var progressBarSolid = new system.ProgressBar({
parent : 'progressBarContainerSolid',
minValue : 0,
maxValue : 100,
value: 38,
width: 300,
height: 30,
theme: 'solid',
showLabels: 'values',
title: 'Items loaded: ',
eventListeners:{cancel: function (progress) {
alert('Cancelled at: ' + progress);
}}
});The progress bar options are described below.
The parent is a reference to the DOM element that is the progress bar's container. The parent option is required.
This is the current value for the progress bar. You can set it programmatically to display this value when the progress bar is initially displayed.
This is the theme of the progress bar. The themes provided by system are in the extra\themes\progressbar folder.
You can provide your own theme for the progress bar and put it in this folder.
The showlabels option specifies whether to display the values of the running progress bar as percentages or as raw values or not to display the values at all. Valid values for showlabels are:
'percents'
'values'
'none'
The title is the label for the values. It is displayed in front of the values specified when the showlabels option is not set to 'none'.
The eventListeners option is a function that listens for an event that will be used to affect the display of the progress bar.
In the demo, this option is used to handle the Cancel event, which is generated when the user clicks the Cancel button.
To create a color picker like those in the system.ColorPicker demo, use the system.ColorPicker class.
var colorInputPicker = new system.ColorPicker({
button : 'inputAnchor',
inputField: 'color',
color: '#CCCCFF',
title: 'Custom title Color Picker',
offset: 0
});The color picker options are described below.
The button is a reference to the DOM element that the user clicks to make a color picker pop up.
The button is optional.
The inputField is a reference to the DOM element into where the hexadecimal value for the selected color is displayed.
If the inputField is an INPUT or TEXTAREA, the value it displays is set to the current color. In other cases, the current color is displayed in the element's innerHtml element.
The inputField is optional.
The color is the hexadecimal value of the initial color to which the color picker is set.
This is the offset in pixels between the button element and the color picker window.
The eventListeners option is a function that handles the user's selection from the color picker.
In the example below,
var colorEventPicker = new system.ColorPicker({
button : 'bgAnchor',
color: '#CCCCFF',
eventListeners:{select: function (color) {
document.getElementById('bgDiv').style.backgroundColor = color;
})the select function listens for the user to:
click the OK button in the color picker OR
click the color preview area in the color picker OR
double-click a color in the color picker's palette
In response to any of these methods of color selection, this handler changes the background of the container to the selected color.