자바스크립트를 사용하여 작성된 슬라이더를 폼안에서 사용하여 입력을 받는 예
아래의 코드에서 사용된 자바스크립트를 사용한 슬라이더 모듈은 이곳을 참조하세요
폼 안에서 다수개의 슬라이더를 사용하는 예는 여기를 참조하세요.
0: <html> 1: <head> 2: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3: <title>Mootools Slider : With two knobs and range indicator</title> 4: <link rel="stylesheet" href="css/slider.css" /> 5: <style> 6: body { 7: margin:25px; 8: font-family:"trebuchet MS", Tahoma; 9: font-size:13px; 10: border:1px solid #cfcfcf; 11: padding:20px; 12: } 13: .clearfix { 14: clear:both; 15: display:block; 16: } 17: .text { 18: color:#555555; 19: } 20: </style> 21: 22: <script type="text/javascript" > 23: slider_pos = 0; 24: // ON LOAD 25: window.onload=function() { 26: window.addEvent('domready', function() { 27: 28: // In this slilder example silder moves 10 steps with an increament of 15 in every step 29: var mySlideC = new Slider($('slider_gutter_C'), $('slider_knob_C'), $('slider_bkg_img_C'),{ 30: start: 0, 31: end: 150, 32: offset:0, 33: snap:true, 34: numsteps:10, 35: onChange: function(pos){ 36: slider_pos = pos; 37: $('slider_current_val_2').setHTML(pos + ' inches'); 38: } 39: }, null).setMin(30); 40: $('slider_current_val_2').setHTML(30 + ' inches'); 41: }); 42: } 43: 44: function form_check() { 45: form1.height.value = slider_pos; 46: var str = "아이디"+form1.id.value+"\n" + 47: "이름:"+form1.name.value+"\n" + 48: "신장:"+form1.height.value; 49: alert(str); 50: if(form1.id.value=='' || form1.name.value=='' || form1.height.value=='') 51: return false; 52: else return true; 53: } 54: </script> 55: <script type="text/javascript" src="mootools12_all_p.js"></script> 56: <script type="text/javascript" src="slider.js"></script> 57: </head><body> 58: <h1>슬라이더를 폼에 포함하여 사용하는 예 </h1> 59: <br/> 60: 61: <form name="form1" action="form_proc.jsp" method="post" onsubmit="return form_check();"> 62: 아이디 <input type="text" name="id"/><br/> 63: 이름 <input type="text" name="name"/><br/> 64: 신장 <input type="hidden" name="height"/> 65: <!-- Start Slider with one knob --> 66: <div class="slider_outer" style="width:500px;"> 67: <div class="fontblue" id="slider_current_val_2"></div> 68: <div class="slide_container" > 69: <div class="slider" id="slider_C" > 70: <div class="slider_gutter_l slider_gutter_item"></div> 71: <div id="slider_gutter_C" class="slider_gutter_C slider_gutter_item"> 72: <!-- <div id="slider_gutter_bkg_1" class="slider_gutter_bkg"></div> 73: --> 74: <img id="slider_bkg_img_C" src="images/bkg_slider.gif"/> 75: <div id="slider_knob_C" class="knob"></div> 76: </div> 77: <div class="slider_gutter_r slider_gutter_item"> </div> 78: </div> 79: <div class="clearfix"></div> 80: </div> 81: </div> <!-- End Slider with one knob --> 82: <input type="submit" value="전 송"/> 83: </form> 84: 85: </body> 86: </html>