I believe everyone is very familiar with jQury UI-JQuery’s user interface add on. It is a great library and themes are quite fancy, but its lack of documentation often frustrate people especially beginners.Thats why I would like to write a simple tutorial
Lately, I read a post on online tools for designers at a web site (can’t remember which one). One of the tools in the selection is a cost estimator which was very detailed and build with PHP and JavaScript. One problem with this. It was on a well established design agency’s web site. Come on!! who would refer their customers to go to use a cost estimator on a competitor’s web site? So I came up with my version of free online tools for designers.
Also, I m in the process of building my online portfolio, and came up with an idea of having a simple cost estimator for potential clients. Here is how I did it. Its very simple, definitely beginner level. So don’t be afraid to read on. As for experts. wait up a more complicated version’s on its way.
Header
Straightforward: link every scripts and make sure ui.slider.js is in the same directory with other js files
- jquery-ui-1.7.1.custom.css
- jquery-1.3.2.js
- jquery-ui-1.7.1.custom.min.js
<title>Simple Cost Estimator</title> <link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
CSS
I didn’t stylize much, just need it to work. Basically it is same with the UI default theme.
#panel-contents{position:relative;height:40px;} #small-label{ background:url(images/small_label.gif) no-repeat; height:4px; width:17px; overflow:hidden;float:left; } #large-label{ background:url(images/large_label.gif) no-repeat; height:18px; width:17px; overflow:hidden;float:left; } #slider-bar{ background:url(images/slider.gif) no-repeat; height:4px; width:100px; position:relative; float:left;} #slider-handle{ background:url(images/slider_handle.gif) no-repeat; height:12px; width:13px; overflow:hidden;position:absolute;z-index:1;} #slider-bubble{ background:url(images/callout.gif) no-repeat; height:46px; width:38px; overflow:hidden; position:absolute; top:-50px;padding:8px 0 0 0;text-align:center;font-weight:bold;color:#202020; } #box{position:absolute; left:40px;background-color:#202020;width:200px;height:200px;} #container{width:700px; margin:auto;} input{font-size: 1em;} #rate{background:#bfbfbf; width:4em; padding:0 3px;}
JavaScript: The slider controls page number which is from 0 to 20.
- value:initial value
- min:minimum value(0)
- max: maximum value(20)
- step: the amount of each interval(1). This means it slides one for each step, and we have 20 steps
- #amount is page amount
- Price=rate x amount
- (ui.value) is slider’s current value, when you slide it
- slider(“value”) means slider’s initial value which is 0
- here is how to calculate price in javascript: $ sign plus ui current value multiply rate input value.
'$'+ui.value*$("#rate").attr("value") - last two line’s function is to set everything back to 0 (as our initial value is 0) after refreshing
<script type="text/javascript">
$(function() {
$("#slider").slider({
value:0,
min: 0,
max: 20,
step: 1,
slide: function(event, ui) {
$("#amount").val(ui.value);
$("#price").val('$'+ui.value*$("#rate").attr("value"));
}
});
$("#amount").val($("#slider").slider("value"));
$("#price").val('$' + $("#slider").slider("value"));
});
</script>
HTML
step1 call the slider
<h1>Build yourself a cost estimator with jQuery UI</h1> <div id="slider"></div>
step2: write three input fields
<p> <label for="rate">Rate in US dollar:</label> <input type="text" id="rate" style="border:0; color:#f6931f; font-weight:bold;" /> <label for="amount">Page number:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <p> <label for="price">Price:</label> <input type="text" id="price" style="border:0; color:#f6931f; font-weight:bold;" /> </p>
Finally, this is the result.
You might want to read more on using jQuery Cycle and jCarousel in my other tutorial
Also, there are more good tutorials at learningjquery.com




Awesome, really cool how this is done. Thank you.
[Reply]
Excellent post..Keep them coming :)
Thanks for sharing.
[Reply]
I see that you included CUSTOM UI files.
Could you tell us which components were included?
I suppose Core and Slider would have to be, but anything else?
Thanks.
[Reply]
alexandra Reply:
December 1st, 2009 at 7:39 pm
Yes you are right core and slider
[Reply]
This is very useful for me thanks for posting this article.
[Reply]
Hey thanks for the article. Any chance you could update it so the jQuery is spelled with a lowercase “j”, which is actually the proper spelling?
Rey
jQuery Team
Rey Bango´s last blog ..TXJS JavaScript Conference Wrapup
[Reply]
Great,Thanks for your useful post.
can i request you to put this full code for download or send this full code and demo page on my mail.
and want know we can improve and change this code like demo on this page:http://www.justhost.com/reseller
Thanks and best regards
Ehsan´s last blog ..میزبان رایگان برای سایت شما
[Reply]