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

ADD TO

If this helps, why not tell your friends?

• 
• 
• 
• 
• 
• 
• 
• 
• 
•