GitHub Sale: sign up for any paid plan this week and pay nothing until January 1, 2009!  [ hide ]

public
Description: Prototype examples of a standard CMS UI element for managing meta properties

IPUI.metaElement

API Documentation and Reference

This wiki details Version 0.1 of the library, which is the most current version.

Concept Guide

1. Types

The majority of UI elements needed to allow a CMS user to view & manipulate properties of objects (Page properties for example) are essentially the same thing, presented in various ways. These UI elements have been defined as “MetaElements” – here we detail the different options for a MetaElement. There are 9 options in how a MetaElement can display, these are:

input, text, WYSIWYG, image, link, droplist, listbox, date, datetime, check, radio, tabPanel

2. Validation

MetaElements are essentially rendered form inputs. Like any standard form input, there are specific requirements for input validation / rules. The validation options of MetaElement provide validation rules by using the following optional validation parameters.

maxLength, minLength, type, maxValue, minValue, maxSelected, minSelected, reference, msg

3. Properties

There needs to be a basic set of properties in order to find out information on a specified MetaElement.

getValue, getValid

4. Methods

There needs to be a basic set of methods in order to interact with a specified MetaElement.

.setValue, .setOption, reset

5. Code Example

<script type="text/javascript" language="javascript">
  // <![CDATA[
 var zipcode = new IPUI.metaElement('target', {
                    title: 'Enter A ZipCode',
                    type: 'input',
                    required: true, 
                    className: 'zipbox',
                    validation: { 
                        maxlength: 5, 
                        minlength: 5, 
                        type: 'number',
                        reference: function(){};
                        maxvalue: 5,
                        minvalue: 5,
                        maxSelected: 3,
                        minSelected: 1
                    },
                    msg: 'Please enter a value'
                });
  // ]]>
</script>
Last edited by iplab, 4 months ago
Versions: