Photoshop like slider plugin will implement its functionality on a jquery wrapper object just by calling the pls ( abbreviation of Photoshop Like Slider) method. It doesn't requeire any other plgin but jquery core. An example of plugin implementation is below.
<script type="text/javascript" src="jquery-1.2.5.js" ></script>
<script type="text/javascript" src="pls.js"></script>
<script type="text/javascript">
$(function {
$('.ff').pls(
{
foreachpixel:5,
changevalue:1,
downlimit:1,
uplimit:120,
changetarget:$('.jj')
}
);
}
);
</script>
Here is the working practical that above code creates. Click on the label saying Age and drag.
$('.ff').pls({
foreachpixel:5,
changevalue:1,
downlimit:1,
uplimit:120,
changetarget:$('.jj'),
});
According to above statement a photoshop slider will be added to very dom nodes that jqery wrapper contains itself. In oour case there s only one dom node inside the wrapper. For each 5 pixels' dragging to the right, the value will icnrease by 1 and to the left will decrease by again same amount. Form area value will not be less than 0 or more than 120. The form area that will receive the changes is the one that has class attribute whose value assigned as jj.
The more detailed descriptions for each object map properties are below with special example pages provided.
foreachpixel: This will ensure decrement and increment will occur at specific intervals. 1 px intervals are difficult to fine tune setting values. So specify 5 or 10 to let your users easily adjust the value. You might assign 100 or 200 but that is again makes the adjusting process cumbersome.
changevalue: This will increase or decrease form area value on specific intervals that you specified at foreachpixel property. An integer e.g. 5000 or a float such as 0.0015 or 3.5 can be assigned.
downlimit: will determine down limit of the value range that form area might have. Negative values are also valid. Just make sure that down limit isn't bigger than up limit.
uplimit: will determine the up limit of the value that your slider can create for the form area.
changetarget: the target dom node that you wish to change its value by sliding.
Whenever you call pls method on a jquery wrapper all dependencies will be created from adding css cursors to drag events automatically. Don't forget to upload your cursor images to your server or an image hosting service and update the css file that comes with the plugin package.
In most cases the jquery wrapper that you call pls method from will contain the text input tags. But you can also assign these photoshop sliders to select tags.
Refer to download link to download plugin package. If you have any question to ask don't hesitate to post as commnet.
No comments:
Post a Comment