jQuery magicpreview plug-in
What it does
magicpreview automatically updates selected elements on a page based on form fields. Perfect for previewing forms.
Usage
$(form_fields).magicpreview(prefix, options);
To link an element to a form field, you will need the id of the element to be equal to the prefix (see code above) plus the name attribute of the form field.
For example, if your prefix was 'mp_' and the form field was <input type="text" name="hello" />, then the element should be something like <div id="mp_hello"></div>
Examples
Example 1
$('form.example input:text').magicpreview('mp_');
(next <p> has id="mp_trythis1")
This should change
(next <p> has id="mp_trythis2")
And so should this when you type in the form
Example 2
Photo 1 chosen
Photo title
Photo description
Creative Commons: No
Score: No rating
$('form.photopreview :text').magicpreview('p_');
$('form.photopreview :checkbox').magicpreview('p_');
$('form.photopreview textarea').magicpreview('p_');
$('form.photopreview select').magicpreview('p_');
$('form.photopreview :radio').magicpreview('p_', {
'formatValue': function (value) {
return value + '/5';
}
});
$('form.photopreview select').magicpreview('img_', {
'change': 'src',
'formatValue': function (value) {
return 'images/' + value + '.jpg'
}
});
Options
- child
- A selector for a child element you want to select, for example if you wanted to pick the span elements in the chosen element, use 'span'
- default: false
- change
- What you want to change on the selected element, can be either 'text', 'html' or any attribute (e.g. 'src', 'alt')
- default: 'html'
- onLoad
- Boolean for whether to run functions on page load
- default: true
- onBefore
- A function to be called before magicpreview runs, return true to run
- default: function () { return true; }
- onAfter
- A function to be called after magicpreview runs, return true to run, can take an argument of the value used in function call
- default: function (val) { return true; }
- formatValue
- A function to be called to format the value in magicpreview
- default: function (val) { return val; }
Download
- Full text version (2.7k)
- Packed version (1.7k)