codice:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Slider form field</title>
<script type="text/javascript">
function newEvent(oTo, oEvntType1, fncToAssign) {
if (oTo.addEventListener) { oTo.addEventListener(oEvntType1, fncToAssign, false); }
else if (oTo.attachEvent) { oTo.attachEvent("on" + oEvntType1, fncToAssign); }
else { oTo["on" + oEvntType1] = fncToAssign; }
}
function divestEvent(oFrom, oEvntType2, fncToRemove) {
if (oFrom.removeEventListener) { oFrom.removeEventListener(oEvntType2, fncToRemove, false);}
else if (oFrom.detachEvent) { oFrom.detachEvent("on" + oEvntType2, fncToRemove); }
else { oFrom["on" + oEvntType2] = null; }
}
function setAttribs() { for (var iAttr = 0; iAttr < arguments.length; iAttr++) { this[arguments[iAttr][0]] = arguments[iAttr][1]; } }
function setStyles() { for (var iPropr = 0; iPropr < arguments.length; iPropr++) { this.style[arguments[iPropr][0]] = arguments[iPropr][1]; } }
function createSlider(sFieldName, nDents, nWidth, nDefault, fncOnChange) {
var nProcW = nWidth && nWidth > 72 ? nWidth : 72, nPointerW = 24, nPointerH = 12, nBarH = 1, nBarBorder = 1;
var nHScroll, iBarPos, nRelMsPos, nPointerLeft = 0, nBarW = (nProcW > nPointerW * 2 + 6 ? nProcW : nPointerW * 2 + 6) - nPointerW - nBarBorder * 2, nMod = nBarW / (nDents - 1), nHalfPtW = nPointerW >> 1, oContainer = document.createElement("span"), oPointer = document.createElement("span"), oBarBox = document.createElement("span"), oFormField = document.createElement("input"), oFragment = document.createDocumentFragment();
function captMsMv(oMsEvnt2) {
var nRelPos = oMsEvnt2.clientX + nHScroll - nRelMsPos - iBarPos + nHalfPtW;
if (!oMsEvnt2) { oMsEvnt2 = window.event; }
if (nRelPos < 0) { nPointerLeft = 0; }
else if (nRelPos > nBarW) { nPointerLeft = nBarW; }
else { nPointerLeft = nRelPos - nRelPos % nMod; }
oFormField.value = Math.round(nPointerLeft / nMod);
oPointer.style.left = nPointerLeft + "px";
if (fncOnChange) { fncOnChange.call(oFormField); }
}
function captMsUp() {
divestEvent(document, "mousemove", captMsMv);
divestEvent(document, "mouseup", captMsUp);
}
function captPtMsDwn(oMsEvnt1) {
var iContainer = oContainer, iPointerPos = oPointer.offsetLeft;
if (!oMsEvnt1) { oMsEvnt1 = window.event; }
nHScroll = document.documentElement.scrollLeft || document.body.scrollLeft;
iBarPos = oBarBox.offsetLeft;
while (iContainer.offsetParent) {
iBarPos += iContainer.offsetLeft;
iPointerPos += iContainer.offsetLeft;
iContainer = iContainer.offsetParent;
}
nRelMsPos = nHScroll + oMsEvnt1.clientX - iPointerPos - (nMod >> 1);
newEvent(document, "mousemove", captMsMv);
newEvent(document, "mouseup", captMsUp);
return(false);
}
function captBarMsDwn(oMsEvnt3) {
if (!oMsEvnt3) { oMsEvnt3 = window.event; }
if (oMsEvnt3.which === 2 || oMsEvnt3.which === 3) { return(false); }
var iContainer = oBarBox;
iBarPos = 0;
nRelMsPos = nHalfPtW - (nMod >> 1);
nHScroll = document.documentElement.scrollLeft || document.body.scrollLeft;
while (iContainer.offsetParent) {
iBarPos += iContainer.offsetLeft;
iContainer = iContainer.offsetParent;
}
newEvent(document, "mousemove", captMsMv);
newEvent(document, "mouseup", captMsUp);
return(false);
}
oContainer.className = "sliderBox";
oContainer.style.paddingLeft = String(nProcW) + "px";
oPointer.className = "sliderPointer";
oBarBox.className = "sliderBar";
setAttribs.call(oFormField, ["type", "hidden"], ["name", sFieldName], ["value", nDefault ? nDefault % nDents : 0]);
setStyles.call(oBarBox, ["position", "absolute"], ["left", String(nHalfPtW + 1) + "px"], ["bottom", String((nPointerH - nBarH >> 1) - nBarBorder + 1) + "px"], ["width", String(nBarW - 1) + "px"], ["height", nBarH + "px"], ["borderWidth", nBarBorder ? nBarBorder + "px" : "0"]);
setStyles.call(oPointer, ["position", "absolute"], ["left", String(nDefault ? nDefault % nDents * nMod : 0) + "px"], ["bottom", "0"], ["width", nPointerW + "px"], ["height", nPointerH + "px"]);
oPointer.onmousedown = captPtMsDwn;
oBarBox.onmousedown = captBarMsDwn;
oContainer.appendChild(oBarBox);
oContainer.appendChild(oPointer);
oFragment.appendChild(oContainer);
oFragment.appendChild(oFormField);
return(oFragment);
}
/* use: createSlider(sFieldName, nDents[, nWidth, nDefault, fncOnChange]) */
</script>
<style type="text/css">
/**
* The following properties are already defined within the script and therefore should not be redefined in this stylesheet as would be ignored.
*
* padding-left: [VARIABLE VALUE];
*/
span.sliderBox {
position: relative;
left: 0;
bottom: 0;
width: auto;
height: auto;
margin-right: 6px;
}
/**
/**
* The following properties are already defined within the script and therefore should not be redefined in this stylesheet as would be ignored.
*
* position: [VARIABLE VALUE];
* left: [VARIABLE VALUE];
* top: [VARIABLE VALUE];
* width: [VARIABLE VALUE];
* height: [VARIABLE VALUE];
* border-size: [VARIABLE VALUE];
*/
span.sliderBox span.sliderBar {
background-color: #ffffff;
border-color: #333333;
border-style: inset;
z-index: 100;
}
/**
/**
* The following properties are already defined within the script and therefore should not be redefined in this stylesheet as would be ignored.
*
* position: [VARIABLE VALUE];
* left: [VARIABLE VALUE];
* top: [VARIABLE VALUE];
* width: [VARIABLE VALUE];
* height: [VARIABLE VALUE];
*/
span.sliderBox span.sliderPointer {
border: 1px #aaaaaa solid;
background-color: #cccccc;
-moz-border-radius: 2px;
-moz-box-shadow: 1px 1px 9px 1px #cccccc;
-webkit-border-radius: 2px;
-webkit-box-shadow: 1px 1px 9px 1px #cccccc;
border-radius: 2px;
box-shadow: 1px 1px 9px 1px #cccccc;
z-index: 101;
}
input[type="text"] { border: 1px #aaaaaa solid; }
input[type="text"], span.sliderBox span.sliderBar, #ratingResults {
-moz-border-radius: 1px;
-moz-box-shadow: 2px 2px 5px black, inset 0 0 2px red;
-webkit-border-radius: 1px;
-webkit-box-shadow: 2px 2px 5px black, inset 0 0 2px red;
border-radius: 1px;
box-shadow: 2px 2px 5px black, inset 0 0 2px red;
}
#ratingResults {
padding: 2px 4px 2px 4px;
font-size: 90%;
border: 1px #aaaaaa solid;
}
</style>
</head>
<body onload="var rResults = document.getElementById('ratingResults'); rResults.parentNode.insertBefore(createSlider('sampleRating', 6, 150, 4, function() { rResults.innerHTML = this.value; }), rResults);">
<form name="sampleForm" action="http://www.google.it/" method="get">
Name: <input type="text" name="sampleName" />
E-Mail: <input type="text" name="sampleEmail" />
Rate this page: <span id="ratingResults">4</span></p>
<input type="submit" /></p>
</form>
</body>
</html>
Permessi di invio
