266 lines
7.2 KiB
HTML
Executable File
266 lines
7.2 KiB
HTML
Executable File
<html>
|
|
<head>
|
|
<title>Dynaform builder</title>
|
|
<script type="text/javascript" src="../core/maborak.js"></script>
|
|
<script type="text/javascript">
|
|
var leimnud = new maborak().make({
|
|
modules :"dom,abbr,drag,fx,slider"
|
|
});
|
|
</script>
|
|
<script type="text/javascript">
|
|
leimnud.event.add(window,"load",function(){
|
|
|
|
/* Begin explain */
|
|
var size = new leimnud.module.slider.create();
|
|
size.make({
|
|
name : "size", // Name for your slider, this is important but .. this is the input containing the value of size to send.
|
|
selected:2, // Value selected by default... 2 is Big (0=Small,1=Medium,2=Big)
|
|
points:[
|
|
{value:100,label:"Small"},
|
|
{value:200,label:"Medium"},
|
|
{value:300,label:"Big"}
|
|
],
|
|
target:$('size'), // Target to Slider, an DIV with id "size" (for example)
|
|
out_label:$('size_label'), // Target to render current Label , an DIV or SPAN with id "size_label" (for example)
|
|
out_value:$('size_price') // Target to render current Price , an DIV or SPAN with id "size_price" (for example)
|
|
});
|
|
|
|
var days = new leimnud.module.slider.create();
|
|
days.make({
|
|
name : "days", // Name for your slider, this is important but .. this is the input containing the value of size to send.
|
|
selected:1, // Value Day 1 selected
|
|
points:"1-31", // change to "1-365" ... if neeeded.
|
|
fill_values:5,
|
|
target:$('days'), // Target to Slider, an DIV with id "size" (for example)
|
|
out_label:$('days_label'), // Target to render current Label , an DIV or SPAN with id "size_label" (for example)
|
|
out_value:$('days_price') // Target to render current Price , an DIV or SPAN with id "size_price" (for example)
|
|
});
|
|
|
|
var total = new leimnud.module.slider.eventor();
|
|
total.make({
|
|
name:"total_cart", //Name
|
|
slides:[days,size], //Sliders to sume
|
|
operation:"+",
|
|
target:$('total'),
|
|
out_value:$('total_price')
|
|
});
|
|
|
|
|
|
|
|
/* End explain */
|
|
|
|
|
|
|
|
|
|
window['sa'] = new leimnud.module.slider.create();
|
|
sa.make({
|
|
selected:2,
|
|
points:[
|
|
{value:100,label:"Mini"},
|
|
{value:400,label:"Normal"},
|
|
{value:700,label:"Big"}
|
|
],
|
|
target:$('a'),
|
|
onchange:function()
|
|
{
|
|
$('l_a').innerHTML=window['sa'].get().label;
|
|
$('p_a').innerHTML=window['sa'].get().value;
|
|
}
|
|
});
|
|
|
|
window['sb'] = new leimnud.module.slider.create();
|
|
sb.make({
|
|
selected:0,
|
|
points:[
|
|
{value:0,label:"Linux"},
|
|
{value:300,label:"Window$"},
|
|
{value:100,label:"Mac"}
|
|
],
|
|
target:$('b'),
|
|
onchange:function()
|
|
{
|
|
$('l_b').innerHTML=window['sb'].get().label;
|
|
$('p_b').innerHTML=window['sb'].get().value;
|
|
}
|
|
});
|
|
|
|
window['sc'] = new leimnud.module.slider.create();
|
|
sc.make({
|
|
selected:3,
|
|
points:"0-30",
|
|
target:$('c'),
|
|
onchange:function()
|
|
{
|
|
$('l_c').innerHTML=window['sc'].get().value;
|
|
}
|
|
});
|
|
window['ev'] = new leimnud.module.slider.eventor();
|
|
ev.make({
|
|
slides:[sa,sb,sc],
|
|
operation:"+",
|
|
result:function(result)
|
|
{
|
|
$('l_d').innerHTML=result;
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<pre>
|
|
Size: <span id='l_a'></span>
|
|
Price: $ <span id='p_a'></span>
|
|
<div style='padding:2px;' id="a"></div>
|
|
OS: <span id='l_b'></span>
|
|
Price: $ <span id='p_b'></span>
|
|
<div style='padding:2px;' id="b"></div>
|
|
Days: <span id='l_c'></span>
|
|
<div style='padding:2px;' id="c"></div>
|
|
|
|
TOTAL COST: $ <span id='l_d'></span>
|
|
|
|
------------------------------------------------------------------------------------
|
|
|
|
|
|
This is important. A common page to load sliders
|
|
|
|
|
|
|
|
|
|
<html>
|
|
<head>
|
|
<title>Dynaform builder</title>
|
|
<script type="text/javascript" src="../core/maborak.js"></script>
|
|
<script type="text/javascript">
|
|
var leimnud = new maborak().make({
|
|
modules :"dom,abbr,drag,fx,slider"
|
|
});
|
|
</script>
|
|
<script type="text/javascript">
|
|
leimnud.event.add(window,"load",function(){
|
|
|
|
//SLIDER CODE
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
------------------------------------------------------------------------------------
|
|
|
|
Slider to Size:
|
|
|
|
Small : 100 $
|
|
Medium: 200 $
|
|
Big : 300 $
|
|
--------------
|
|
label | price
|
|
|
|
In slider code add.
|
|
|
|
|
|
|
|
var size = new leimnud.module.slider.create();
|
|
size.make({
|
|
name : "size", // Name for your slider, this is important but .. this is the input containing the value of size to send.
|
|
selected:2, // Value selected by default... 2 is Big (0=Small,1=Medium,2=Big)
|
|
points:[
|
|
{value:100,label:"Small"},
|
|
{value:200,label:"Medium"},
|
|
{value:300,label:"Big"}
|
|
],
|
|
target:$('size'), // Target to Slider, an DIV with id "size" (for example)
|
|
out_label:$('size_label'), // Target to render current Label , an DIV or SPAN with id "size_label" (for example)
|
|
out_value:$('size_price') // Target to render current Price , an DIV or SPAN with id "size_price" (for example)
|
|
});
|
|
|
|
|
|
The html:
|
|
|
|
Size : <span id="size_label"></span>
|
|
Price: $ <span id="size_price"></span>
|
|
<div id="size"> </div>
|
|
|
|
|
|
------------------------------------------------------------------------------------
|
|
|
|
|
|
Days:
|
|
1 to 31 days (for example)
|
|
|
|
In slider code add.
|
|
|
|
var days = new leimnud.module.slider.create();
|
|
days.make({
|
|
name : "days", // Name for your slider, this is important but .. this is the input containing the value of size to send.
|
|
selected:1, // Value Day 2 selected... why?... in the system [1=0,2=1,etc] if the days are... "0-31" [0=0,1=1,etc]
|
|
points:"1-31", // change to "1-365" ... if neeeded.
|
|
fill_value:5, //By default "value === label" 2 days == 2 $ , but if U need apply a price to days. Set value per day HERE!. (example 1 day == 5 $)
|
|
target:$('days'), // Target to Slider, an DIV with id "size" (for example)
|
|
out_label:$('days_label'), // Target to render current Label , an DIV or SPAN with id "size_label" (for example)
|
|
out_value:$('days_price') // Target to render current Price , an DIV or SPAN with id "size_price" (for example)
|
|
});
|
|
|
|
|
|
The html:
|
|
|
|
Days : <span id="days_label"></span>
|
|
Price: $ <span id="days_price"></span>
|
|
<div id="days"> </div>
|
|
|
|
|
|
if you only need 5 days you can use the last metod and add it one value everyday
|
|
|
|
|
|
|
|
|
|
-----------------------------------------------------------------------------------------
|
|
|
|
|
|
TOTAL PRICES:
|
|
|
|
|
|
After you maked Sliders... is easy calculate the total prices.
|
|
|
|
var total = new leimnud.module.slider.eventor();
|
|
total.make({
|
|
name:"total_cart", //Name
|
|
slides:[days,size], //Sliders to sume
|
|
operation:"+",
|
|
target:$('total'),
|
|
out_value:$('total_price')
|
|
});
|
|
|
|
The html:
|
|
|
|
<div id="total"> </div>
|
|
Total Price: $ <span id="total"></span>
|
|
|
|
------------------------------------------------------------------------------------------
|
|
|
|
|
|
ALL IN ONE:
|
|
|
|
<form method="POST" action="sl.php">
|
|
Size : <span id="size_label"></span>
|
|
Price: $ <span id="size_price"></span>
|
|
<div id="size"> </div>
|
|
|
|
Days : <span id="days_label"></span>
|
|
Price: $ <span id="days_price"></span>
|
|
<div id="days"> </div>
|
|
<div id="total"> </div>
|
|
Total Price: $ <span id="total_price"></span>
|
|
|
|
<input type="submit" value="Send prices">
|
|
</form>
|
|
</pre>
|
|
|
|
</body>
|
|
</html>
|