카테고리 없음

자바스크립트 슬라이더 사용 예제

Soul-Learner 2012. 6. 4. 19:55

자바스크립트를 사용하여 작성된 슬라이더를 폼안에서 다수개 사용하여 입력을 받는 예

아래에서 사용된 자바스크립트 슬라이더 모듈은 이곳을 참조하세요

슬라이더를 폼 안에서 1개만 사용하는 예제는 여기를 참조하세요

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Mootools Slider : With two knobs and range indicator</title>
 <link rel="stylesheet" href="css/slider.css" />
 <style>
 body {
 	margin:25px;
 	font-family:"trebuchet MS", Tahoma;
 	font-size:13px;
 	border:1px solid #cfcfcf;
 	padding:20px;
 }
 .clearfix {
 	clear:both;
 	display:block;
 }
 .text {
 	color:#555555;
 }
 </style>
 
 <script type="text/javascript" >
 sliderA_pos = 0;
 sliderB_pos = 0;
 sliderC_pos = 0;
 // ON LOAD 
 window.onload=function() {
	 window.addEvent('domready', function() {
		 
	// In this slilder example silder moves 10 steps with an increament of 15 in every step
	var mySlideA = new Slider($('slider_gutter_A'), $('slider_knob_A'), $('slider_bkg_img_A'),{
		 		start: 0,
		 		end: 150,
		 		offset:0,
				snap:true, 
		 		numsteps:10,
		 		onChange: function(pos){
		 			sliderA_pos = pos;
		 			$('slider_current_val_1').setHTML(pos + ' inches');
		 		}
		 	}, null).setMin(30);
		 	$('slider_current_val_1').setHTML(30 + ' inches');
		 }); 
	 
	 window.addEvent('domready', function() {
		 
	// In this slilder example silder moves 10 steps with an increament of 15 in every step
	var mySlideB = new Slider($('slider_gutter_B'), $('slider_knob_B'), $('slider_bkg_img_B'),{
		 		start: 0,
		 		end: 150,
		 		offset:0,
				snap:true, 
		 		numsteps:10,
		 		onChange: function(pos){
		 			sliderB_pos = pos;
		 			$('slider_current_val_2').setHTML(pos + ' inches');
		 		}
		 	}, null).setMin(30);
		 	$('slider_current_val_2').setHTML(30 + ' inches');
		 });
	 
	 window.addEvent('domready', function() { 
 	// In this slilder example silder moves 10 steps with an increament of 15 in every step
 	var mySlideC = new Slider($('slider_gutter_C'), $('slider_knob_C'), $('slider_bkg_img_C'),{
 		start: 0,
 		end: 150,
 		offset:0,
		snap:true, 
 		numsteps:10,
 		onChange: function(pos){
 			sliderC_pos = pos;
 			$('slider_current_val_3').setHTML(pos + ' inches');
 		}
 	}, null).setMin(30);
 	$('slider_current_val_3').setHTML(30 + ' inches');
 });
 
 }
 
 function form_check() {
 	form1.a.value = sliderA_pos;
 	form1.b.value = sliderB_pos;
 	form1.c.value = sliderC_pos;
 	var str = "아이디+form1.id.value+"\n" +
 	"이름:"+form1.name.value+"\n" +
 	"수치:"+form1.a.value+", "+form1.b.value+", "+form1.c.value;
 	alert(str);
 	if(form1.id.value=='' || form1.name.value=='')
 		return false;
 	else return true;
 }
 </script>
 <script type="text/javascript" src="mootools12_all_p.js"></script>
 <script type="text/javascript" src="slider.js"></script>
 </head><body>
 <h1>자바스크립트 슬라이더를 폼 안에 여러개 사용하는 예</h1>
 <br/>
 
 <form name="form1" action="form_proc.jsp" method="post" onsubmit="return form_check();">
 아이디 <input type="text" name="id"/><br/>
 이름 <input type="text" name="name"/><br/>
<input type="hidden" name="a"/><br/>
<input type="hidden" name="b"/><br/>
<input type="hidden" name="c"/><br/>
수치 입력<br/>
   <!-- Start  Slider A with one knob -->
 <div class="slider_outer" >
   <div class="fontblue" id="slider_current_val_1"></div>
   <div class="slide_container" >
     <div class="slider" id="slider_A" >
       <div class="slider_gutter_l slider_gutter_item"></div>
       <div id="slider_gutter_A" class="slider_gutter_A slider_gutter_item">
         <img id="slider_bkg_img_A" src="images/bkg_slider.gif"/>
         <div id="slider_knob_A" class="knob"></div>
       </div>
       <div class="slider_gutter_r slider_gutter_item"> </div>
     </div>
 	    <div class="clearfix"></div>
   </div>
 </div>
 <!-- End  Slider A with one knob -->
  <!-- Start  Slider B with one knob -->
 <div class="slider_outer" >
   <div class="fontblue" id="slider_current_val_2"></div>
   <div class="slide_container" >
     <div class="slider" id="slider_B" >
       <div class="slider_gutter_l slider_gutter_item"></div>
       <div id="slider_gutter_B" class="slider_gutter_B slider_gutter_item">
         <img id="slider_bkg_img_B" src="images/bkg_slider.gif"/>
         <div id="slider_knob_B" class="knob"></div>
       </div>
       <div class="slider_gutter_r slider_gutter_item"> </div>
     </div>
 	    <div class="clearfix"></div>
   </div>
 </div>
 <!-- End  Slider B with one knob -->
 <!-- Start  Slider C with one knob -->
 <div class="slider_outer" >
   <div class="fontblue" id="slider_current_val_3"></div>
   <div class="slide_container" >
     <div class="slider" id="slider_C" >
       <div class="slider_gutter_l slider_gutter_item"></div>
       <div id="slider_gutter_C" class="slider_gutter_C slider_gutter_item">
         <img id="slider_bkg_img_C" src="images/bkg_slider.gif"/>
         <div id="slider_knob_C" class="knob"></div>
       </div>
       <div class="slider_gutter_r slider_gutter_item"> </div>
     </div>
 	    <div class="clearfix"></div>
   </div>
 </div>
 <!-- End  Slider C with one knob -->
 <input type="submit" value="전송"/>
 </form>
 
 </body>
 </html>