이윰

공지

설치 가이드

확장된 폼

TOP

DOWN

확장된 폼

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

Eyoom Form 적용을 위하여 소스코드는 class="eyoom-form" 으로 감싸주어야 합니다.

<!--form 태그의 경우-->
<form action="#" class="eyoom-form">
	소스코드
</form>

<!--div 태그의 경우-->
<div class="eyoom-form">
	소스코드
</div>

Select2 Forms 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다. select2.min.css 스타일시트와 select2.min.js 스크립트 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="../../../plugins/eyoom-form/plugins/select2/select2.min.css">

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/select2/select2.min.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/select2/select2.min.css
../plugins/eyoom-form/plugins/select2/select2.min.js

단일 선택 Select

<label class="label">단일 선택 Select</label>
<label class="select">
	<select class="select2-single">
		<optgroup label="Alaskan/Hawaiian Time Zone">
			<option value="AK">Alaska</option>
			<option value="HI">Hawaii</option>
		</optgroup>
		<optgroup label="Pacific Time Zone">
			<option value="CA">California</option>
			<option value="NV">Nevada</option>
			<option value="OR">Oregon</option>
			<option value="WA">Washington</option>
		</optgroup>
		...
	</select>
</label>
<script>
    jQuery(document).ready(function(){
	    $(".select2-single").select2();
    });
</script>

복수 선택 Select

<label class="label">복수 선택 Select</label>
<label class="select">
	<select class="select2-multiple" multiple>
		<optgroup label="Alaskan/Hawaiian Time Zone">
			<option value="AK">Alaska</option>
			<option value="HI">Hawaii</option>
		</optgroup>
		<optgroup label="Pacific Time Zone">
			<option value="CA">California</option>
			<option value="NV">Nevada</option>
			<option value="OR">Oregon</option>
			<option value="WA">Washington</option>
		</optgroup>
		...
	</select>
</label>
<script>
    jQuery(document).ready(function(){
	    $(".select2-multiple").select2();
    });
</script>

복수 선택 Placeholder Select

<label class="label">복수 선택 Placeholder Select</label>
<label class="select">
	<select class="select2-placeholder-multiple" multiple>
		<optgroup label="Alaskan/Hawaiian Time Zone">
			<option value="AK">Alaska</option>
			<option value="HI">Hawaii</option>
		</optgroup>
		<optgroup label="Pacific Time Zone">
			<option value="CA">California</option>
			<option value="NV">Nevada</option>
			<option value="OR">Oregon</option>
			<option value="WA">Washington</option>
		</optgroup>
		...
	</select>
</label>
<script>
    jQuery(document).ready(function(){
		$(".select2-placeholder-multiple").select2({
			placeholder: "Select a state",
			allowClear: true
		});
    });
</script>

Clockpicker Forms 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다. jquery.clockpicker.min.css 스타일시트와 jquery.clockpicker.min.js 스크립트 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="../../../plugins/eyoom-form/plugins/jquery-clockpicker/jquery.clockpicker.min.css">

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-clockpicker/jquery.clockpicker.min.js"></script>
<script>
    jQuery(document).ready(function(){
		$('.clockpicker').clockpicker();
    });
</script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-clockpicker/jquery.clockpicker.min.css
../plugins/eyoom-form/plugins/jquery-clockpicker/jquery.clockpicker.min.js

기본

좌측형

우측형

상단형

기본 자동 닫힘

좌측형 자동 닫힘

우측형 자동 닫힘

상단형 자동 닫힘

Timepicker Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다. jquery.timepicker.min.js 스크립트 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-timepicker/jquery.timepicker.min.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-timepicker/jquery.timepicker.min.js

기본

시간 범위

비활성 시간 지정

현재 시간 선택

현재 시간

Datepicker Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다. jquery-ui.min.js 스크립트와 datepicker.js 스크립트의 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js
../plugins/eyoom-form/js/datepicker.js

단일 선택 Datepicker

<label class="label">단일 선택 Datepicker</label>
<label class="input">
	<i class="icon-append fa fa-calendar-o"></i>
	<input type="text" name="date" id="date">
</label>
<script>
    jQuery(document).ready(function(){
        $('#date').datepicker({
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fa fa-angle-left"></i>',
            nextText: '<i class="fa fa-angle-right"></i>',
            showMonthAfterYear: true,
            monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
            monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
            dayNamesMin: ['일','월','화','수','목','금','토']
        });
    });
</script>

기간 선택 Datepicker

<label class="label">기간 선택 Datepicker</label>
<div class="row">
	<div class="col col-6 sm-margin-bottom-10">
		<label class="input">
			<i class="icon-append fa fa-calendar-o"></i>
			<input type="text" name="start" id="start" placeholder="Start date">
		</label>
	</div>
	<div class="col col-6">
		<label class="input">
			<i class="icon-append fa fa-calendar-o"></i>
			<input type="text" name="finish" id="finish" placeholder="Finish date">
		</label>
	</div>
</div>
<script>
    jQuery(document).ready(function(){
        $('#start').datepicker({
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fa fa-angle-left"></i>',
            nextText: '<i class="fa fa-angle-right"></i>',
            showMonthAfterYear: true,
            monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
            monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
            dayNamesMin: ['일','월','화','수','목','금','토'],
            onSelect: function(selectedDate){
                $('#finish').datepicker('option', 'minDate', selectedDate);
            }
        });
        $('#finish').datepicker({
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fa fa-angle-left"></i>',
            nextText: '<i class="fa fa-angle-right"></i>',
            showMonthAfterYear: true,
            monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
            monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
            dayNamesMin: ['일','월','화','수','목','금','토'],
            onSelect: function(selectedDate){
                $('#start').datepicker('option', 'maxDate', selectedDate);
            }
        });
    });
</script>

단일 선택 Inline

<label class="label">단일 선택 Inline</label>
<div id="inline"></div>
<script>
    jQuery(document).ready(function(){
        $('#inline').datepicker({
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fa fa-angle-left"></i>',
            nextText: '<i class="fa fa-angle-right"></i>',
            showMonthAfterYear: true,
            monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
            monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
            dayNamesMin: ['일','월','화','수','목','금','토']
        });
    });
</script>

기간 선택 Inline

<label class="label">기간 선택 Inline</label>
<div class="row">
	<div class="col col-6">
		<div id="inline-start"></div>
	</div>
	<div class="col col-6">
		<div id="inline-finish"></div>
	</div>
</div>
<script>
    jQuery(document).ready(function(){
        $('#inline-start').datepicker({
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fa fa-angle-left"></i>',
            nextText: '<i class="fa fa-angle-right"></i>',
            showMonthAfterYear: true,
            monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
            monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
            dayNamesMin: ['일','월','화','수','목','금','토'],
            onSelect: function(selectedDate){
                $('#inline-finish').datepicker('option', 'minDate', selectedDate);
            }
        });
        $('#inline-finish').datepicker({
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fa fa-angle-left"></i>',
            nextText: '<i class="fa fa-angle-right"></i>',
            showMonthAfterYear: true,
            monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
            monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
            dayNamesMin: ['일','월','화','수','목','금','토'],

            onSelect: function(selectedDate){
                $('#inline-start').datepicker('option', 'maxDate', selectedDate);
            }
        });
    });
</script>

Date Range Picker Forms 사용법

<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="../../../plugins/eyoom-form/plugins/bootstrap-daterangepicker/daterangepicker.min.css">

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/moment/moment.min.js"></script>
<script src="../../../plugins/eyoom-form/plugins/bootstrap-daterangepicker/daterangepicker.min.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/bootstrap-daterangepicker/daterangepicker.min.css
../plugins/eyoom-form/plugins/moment/moment.min.js
../plugins/eyoom-form/plugins/bootstrap-daterangepicker/daterangepicker.min.js

기본 Daterangepicker

<label class="label">기본 Daterangepicker</label>
<label class="input">
	<i class="icon-append fa fa-calendar-o"></i>
	<input type="text" class="daterange-basic" value="2016/01/01 - 2016/01/31">
</label>
<script>
	$(function() {
	    $('.daterange-basic').daterangepicker({
			locale: {
				format: 'YYYY/MM/DD',
				applyLabel: '확인 <i class="fa fa-check"></i>',
				cancelLabel: '취소 <i class="fa fa-times"></i>',
		        daysOfWeek: ['일','월','화','수','목','금','토'],
		        monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
			},
	        applyClass: 'btn-e btn-e-yellow color-white',
	        cancelClass: 'btn-e btn-e-dark color-white',
	    });
	});
</script>

기본 여백 Daterangepicker

<label class="label">기본 여백 Daterangepicker</label>
<label class="input">
	<i class="icon-append fa fa-calendar-o"></i>
	<input type="text" class="daterange-basic-empty" value="">
</label>
<script>
	$(function() {
	    $('.daterange-basic-empty').daterangepicker({
	        autoUpdateInput: false,
			locale: {
				format: 'YYYY/MM/DD',
				applyLabel: '확인 <i class="fa fa-check"></i>',
				cancelLabel: '취소 <i class="fa fa-times"></i>',
		        daysOfWeek: ['일','월','화','수','목','금','토'],
		        monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
			},
	        applyClass: 'btn-e btn-e-yellow color-white',
	        cancelClass: 'btn-e btn-e-dark color-white'
	    });
		$('.daterange-basic-empty').on('apply.daterangepicker', function(ev, picker) {
			$(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
		});
		$('.daterange-basic-empty').on('cancel.daterangepicker', function(ev, picker) {
			$(this).val('');
		});
	});
</script>

시간 지정 Daterangepicker

<label class="label">시간 지정 Daterangepicker</label>
<label class="input">
	<i class="icon-append fa fa-calendar-o"></i>
	<input type="text" class="daterange-time" value="2016/01/01 - 2016/01/31">
</label>
<script>
	$(function() {
	    $('.daterange-time').daterangepicker({
	        timePicker: true,
			locale: {
				format: 'YYYY/MM/DD h:mm A',
				applyLabel: '확인 <i class="fa fa-check"></i>',
				cancelLabel: '취소 <i class="fa fa-times"></i>',
		        daysOfWeek: ['일','월','화','수','목','금','토'],
		        monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
			},
	        applyClass: 'btn-e btn-e-yellow color-white',
	        cancelClass: 'btn-e btn-e-dark color-white'
	    });
	});
</script>

선택형(년,월) Daterangepicker

<label class="label">선택형(년,월) Daterangepicker</label>
<label class="input">
	<i class="icon-append fa fa-calendar-o"></i>
	<input type="text" class="daterange-datemenu" value="2016/01/01 - 2016/01/31">
</label>
<script>
	$(function() {
	    $('.daterange-basic').daterangepicker({
		    showDropdowns: true,
			locale: {
				format: 'YYYY/MM/DD',
				applyLabel: '확인 <i class="fa fa-check"></i>',
				cancelLabel: '취소 <i class="fa fa-times"></i>',
		        daysOfWeek: ['일','월','화','수','목','금','토'],
		        monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
			},
	        applyClass: 'btn-e btn-e-yellow color-white',
	        cancelClass: 'btn-e btn-e-dark color-white',
	    });
	});
</script>

기본 싱글 Daterangepicker

<label class="label">기본 싱글 Daterangepicker</label>
<label class="input">
	<i class="icon-append fa fa-calendar-o"></i>
	<input type="text" class="daterange-single" value="2016/01/01">
</label>
<script>
	$(function() {
	    $('.daterange-single').daterangepicker({
	        singleDatePicker: true,
			locale: {
				format: 'YYYY/MM/DD',
		        daysOfWeek: ['일','월','화','수','목','금','토'],
		        monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
			}
	    });
	});
</script>

싱글 선택형(년,월) Daterangepicker

<label class="label">싱글 선택형(년,월) Daterangepicker</label>
<label class="input">
	<i class="icon-append fa fa-calendar-o"></i>
	<input type="text" class="daterange-single-datemenu" value="2016/01/01">
</label>
<script>
	$(function() {
	    $('.daterange-single-datemenu').daterangepicker({
	        singleDatePicker: true,
	        showDropdowns: true,
			locale: {
				format: 'YYYY/MM/DD',
		        daysOfWeek: ['일','월','화','수','목','금','토'],
		        monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
			}
	    });
	});
</script>

기본 여백 싱글 Daterangepicker

<label class="label">기본 여백 싱글 Daterangepicker</label>
<label class="input">
	<i class="icon-append fa fa-calendar-o"></i>
	<input type="text" class="daterange-single-empty" value="">
</label>
<script>
	$(function() {
	    $('.daterange-single-empty').daterangepicker({
	        singleDatePicker: true,
	        autoUpdateInput: false,
			locale: {
				format: 'YYYY/MM/DD',
		        daysOfWeek: ['일','월','화','수','목','금','토'],
		        monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
			}
	    });
		$('.daterange-single-empty').on('apply.daterangepicker', function(ev, picker) {
			$(this).val(picker.startDate.format('YYYY/MM/DD'));
		});
		$('.daterange-single-empty').on('cancel.daterangepicker', function(ev, picker) {
			$(this).val('');
		});
	});
</script>

미리 정의된 기간 Daterangepicker

<label class="label">미리 정의된 기간 Daterangepicker</label>
<div class="clearfix"></div>
<button type="button" class="btn-e btn-e-default btn-e-brd daterange-predefined">
	<i class="fa fa-calendar-o"></i>
	<span></span>
	<b class="caret"></b>
</button>
<script>
	$(function() {
	    var start = moment().subtract(29, 'days');
	    var end = moment();
	    function cb(start, end) {
	        $('.daterange-predefined span').html(start.format('YYYY/MM/DD') + ' - ' + end.format('YYYY/MM/DD'));
	    }
	    $('.daterange-predefined').daterangepicker({
	        startDate: start,
	        endDate: end,
			locale: {
				format: 'YYYY/MM/DD',
				applyLabel: '확인 <i class="fa fa-check"></i>',
				cancelLabel: '취소 <i class="fa fa-times"></i>',
		        daysOfWeek: ['일','월','화','수','목','금','토'],
		        monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
			},
	        ranges: {
	           '오늘': [moment(), moment()],
	           '어제': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
	           '지난 7일': [moment().subtract(6, 'days'), moment()],
	           '지난 30일': [moment().subtract(29, 'days'), moment()],
	           '이번달': [moment().startOf('month'), moment().endOf('month')],
	           '지난달': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
	        },
	        opens: 'left',
	        applyClass: 'btn-e btn-e-yellow color-white',
	        cancelClass: 'btn-e btn-e-dark color-white'
	    }, cb);
	    cb(start, end);
	});
</script>

Slider Range Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다. jquery-ui.min.js 스크립트 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js

기본 Slider [0]

<label class="label">기본 Slider [<span class="slider-value-color" id="slider_default_value">0</span>]</label>
<div id="slider_default"></div>
<script>
    jQuery(document).ready(function(){
		$('#slider_default').slider({
			min: 0,
			max: 1000,
			slide: function(event, ui){
				$('#slider_default_value').text(ui.value);
			}
		});
    });
</script>

스탭 Slider [1000]

<label class="label">스탭 Slider [<span class="slider-value-color" id="slider_step_value">1000</span>]</label>
<div id="slider_step"></div>
<script>
    jQuery(document).ready(function(){
		$('#slider_step').slider({
			min: 1000,
			max: 3000,
			step: 100,
			slide: function(event, ui){
				$('#slider_step_value').text(ui.value);
			}
		});
    });
</script>

기간 Slider [5000 ~ 35000]

<label class="label">기간 Slider [<span class="slider-value-color" id="slider_range_value1">5000</span> ~ <span class="slider-value-color" id="slider_range_value2">35000</span>]</label>
<div id="slider_range"></div>
<script>
    jQuery(document).ready(function(){
		$('#slider_range').slider({
			min: 0,
			max: 40000,
			step: 1000,
			range: true,
			values: [5000, 35000],
			slide: function(event, ui){
				$('#slider_range_value1').text(ui.values[0]);
				$('#slider_range_value2').text(ui.values[1]);
			}
		});
    });
</script>

tagEditor Forms 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다. jquery.tag-editor.css 스타일시트와 jquery-ui.min.js 스크립트, jquery.tag-editor.min.js 스크립트의 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="../../../plugins/eyoom-form/plugins/jquery-tagEditor/jquery.tag-editor.css">

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="../../../plugins/eyoom-form/plugins/jquery-tagEditor/jquery.tag-editor.min.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-tagEditor/jquery.tag-editor.css
../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js
../plugins/eyoom-form/plugins/jquery-tagEditor/jquery.tag-editor.min.js

기본 tagEditor

<label class="label">기본 tagEditor</label>
<label class="textarea">
	<textarea id="tagEditor_default"></textarea>
</label>
<script>
    jQuery(document).ready(function(){
		$('#tagEditor_default').tagEditor({
		    initialTags: ['서울', '대전', '대구', '부산'],
		    delimiter: ', ',
		    placeholder: '태그 입력'
		});
    });
</script>

빨강 tagEditor

<label class="label">빨강 tagEditor</label>
<label class="textarea tag-red">
	<textarea id="tagEditor_red"></textarea>
</label>
<script>
    jQuery(document).ready(function(){
		$('#tagEditor_red').tagEditor({
		    initialTags: ['서울', '대전', '대구', '부산'],
		    delimiter: ', ',
		    placeholder: '태그 입력'
		});
    });
</script>

초록 tagEditor

<label class="label">초록 tagEditor</label>
<label class="textarea tag-green">
	<textarea id="tagEditor_green"></textarea>
</label>
<script>
    jQuery(document).ready(function(){
		$('#tagEditor_green').tagEditor({
		    initialTags: ['서울', '대전', '대구', '부산'],
		    delimiter: ', ',
		    placeholder: '태그 입력'
		});
    });
</script>

노랑 tagEditor

<label class="label">노랑 tagEditor</label>
<label class="textarea tag-yellow">
	<textarea id="tagEditor_yellow"></textarea>
</label>
<script>
    jQuery(document).ready(function(){
		$('#tagEditor_yellow').tagEditor({
		    initialTags: ['서울', '대전', '대구', '부산'],
		    delimiter: ', ',
		    placeholder: '태그 입력'
		});
    });
</script>

검정 tagEditor

<label class="label">검정 tagEditor</label>
<label class="textarea tag-dark">
	<textarea id="tagEditor_dark"></textarea>
</label>
<script>
    jQuery(document).ready(function(){
		$('#tagEditor_dark').tagEditor({
		    initialTags: ['서울', '대전', '대구', '부산'],
		    delimiter: ', ',
		    placeholder: '태그 입력'
		});
    });
</script>

자동완성 tagEditor

<label class="label">자동완성 tagEditor</label>
<label class="textarea">
	<textarea id="tagEditor_auto"></textarea>
</label>
<script>
    jQuery(document).ready(function(){
		$('#tagEditor_auto').tagEditor({
		    autocomplete: {
		        delay: 0,
		        position: { collision: 'flip' },
		        source: ['ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme']
		    },
		    forceLowercase: false,
		    placeholder: '프로그램 언어 입력'
		});
    });
</script>

Bootstrap Maxlength Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다. jquery-ui.min.js 스크립트와 bootstrap-maxlength.js 스크립트의 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="../../../plugins/eyoom-form/plugins/bootstrap-maxlength/bootstrap-maxlength.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js
../plugins/eyoom-form/plugins/bootstrap-maxlength/bootstrap-maxlength.js

Input

Textarea

asSpinner Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다. jquery.mousewheel.js 스크립트와 jquery-asSpinner.min.js 스크립트의 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-asSpinner/jquery.mousewheel.js"></script>
<script src="../../../plugins/eyoom-form/plugins/jquery-asSpinner/jquery-asSpinner.min.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-asSpinner/jquery.mousewheel.js
../plugins/eyoom-form/plugins/jquery-asSpinner/jquery-asSpinner.min.js

기본 Spinner

<label class="label">기본 Spinner</label>
<label class="input">
	<input type="text" class="default_spinner" value="0">
</label>
<script>
    jQuery(document).ready(function(){
		$('.default_spinner').asSpinner();
    });
</script>

마우스휠 Spinner

<label class="label">마우스휠 Spinner</label>
<label class="input">
	<input type="text" class="mousewheel_spinner" value="0">
</label>
<script>
    jQuery(document).ready(function(){
        $('.mousewheel_spinner').asSpinner({
            mousewheel: true,
			min: -10,
			max: 10
        });
    });
</script>

금액 정의된 Spinner (￦1000 ~ ￦30000)

<label class="label">금액 정의된 Spinner (￦1000 ~ ￦30000)</label>
<label class="input">
	<input type="text" class="format_spinner" value="￦1000">
</label>
<script>
    jQuery(document).ready(function(){
        $(".format_spinner").asSpinner({
			min: 1000,
			max: 30000,
	        step: 1000,
            format: function(value) {
                return '￦'+value;
            },
            parse: function(value) {
                return value.replace('￦','');
            }
        });
    });
</script>

월단위 Spinner

<label class="label">월단위 Spinner</label>
<label class="input">
	<input type="text" class="rule_spinner" value="1">
</label>
<script>
    jQuery(document).ready(function(){
        $(".rule_spinner").asSpinner({
            rule: 'month'
        });
    });
</script>

louMultiSelect Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다. jquery.multi-select.js 스크립트의 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-louMultiSelect/jquery.multi-select.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-louMultiSelect/jquery.multi-select.js

미리 선택된 MultiSelect

<label class="label">미리 선택된 MultiSelect</label>
<select id="multiselect_pre_selected" multiple="multiple">
	<option value="elem_1" selected>elem 1</option>
	<option value="elem_2">elem 2</option>
	<option value="elem_3">elem 3</option>
	<option value="elem_4" selected>elem 4</option>
	<option value="elem_5">elem 5</option>
	<option value="elem_6">elem 6</option>
	<option value="elem_7">elem 7</option>
	<option value="elem_8" selected>elem 8</option>
	<option value="elem_9">elem 9</option>
	<option value="elem_10">elem 10</option>
	<option value="elem_11">elem 11</option>
	<option value="elem_12">elem 12</option>
	<option value="elem_13">elem 13</option>
	<option value="elem_14">elem 14</option>
	<option value="elem_15">elem 15</option>
	<option value="elem_16">elem 16</option>
	<option value="elem_17">elem 17</option>
	<option value="elem_18">elem 18</option>
	<option value="elem_19">elem 19</option>
	<option value="elem_20">elem 20</option>
</select>
<script>
    jQuery(document).ready(function(){
	    $('#multiselect_pre_selected').multiSelect();
    });
</script>

콜백 MultiSelect

<label class="label">콜백 MultiSelect</label>
<select id="multiselect_callback" multiple="multiple">
	<option value="elem_1">elem 1</option>
	<option value="elem_2">elem 2</option>
	<option value="elem_3">elem 3</option>
	<option value="elem_4">elem 4</option>
	<option value="elem_5">elem 5</option>
	<option value="elem_6">elem 6</option>
	<option value="elem_7">elem 7</option>
	<option value="elem_8">elem 8</option>
	<option value="elem_9">elem 9</option>
	<option value="elem_10">elem 10</option>
	<option value="elem_11">elem 11</option>
	<option value="elem_12">elem 12</option>
	<option value="elem_13">elem 13</option>
	<option value="elem_14">elem 14</option>
	<option value="elem_15">elem 15</option>
	<option value="elem_16">elem 16</option>
	<option value="elem_17">elem 17</option>
	<option value="elem_18">elem 18</option>
	<option value="elem_19">elem 19</option>
	<option value="elem_20">elem 20</option>
</select>
<script>
    jQuery(document).ready(function(){
		$('#multiselect_callback').multiSelect({
			afterSelect: function(values){
				alert("선택 : "+values);
			},
			afterDeselect: function(values){
				alert("선택해제 : "+values);
			}
		});
    });
</script>

그룹 MultiSelect

<label class="label">그룹 MultiSelect</label>
<select id="multiselect_group" multiple="multiple">
	<optgroup label="Friends">
		<option value="1">Yoda</option>
		<option value="2" selected>Obiwan</option>
	</optgroup>
	<optgroup label="Enemies">
		<option value="3">Palpatine</option>
		<option value="4" disabled>Darth Vader</option>
	</optgroup>
</select>
<script>
    jQuery(document).ready(function(){
		$('#multiselect_group').multiSelect({
			selectableOptgroup: true
		});
    });
</script>

비활성 MultiSelect

<label class="label">비활성 MultiSelect</label>
<select id="multiselect_disabled" multiple="multiple" disabled>
	<option value="elem_1">elem 1</option>
	<option value="elem_2">elem 2</option>
	<option value="elem_3">elem 3</option>
	<option value="elem_4">elem 4</option>
	<option value="elem_5">elem 5</option>
	<option value="elem_6">elem 6</option>
	<option value="elem_7">elem 7</option>
	<option value="elem_8">elem 8</option>
	<option value="elem_9">elem 9</option>
	<option value="elem_10">elem 10</option>
	<option value="elem_11">elem 11</option>
	<option value="elem_12">elem 12</option>
	<option value="elem_13">elem 13</option>
	<option value="elem_14">elem 14</option>
	<option value="elem_15">elem 15</option>
	<option value="elem_16">elem 16</option>
	<option value="elem_17">elem 17</option>
	<option value="elem_18">elem 18</option>
	<option value="elem_19">elem 19</option>
	<option value="elem_20">elem 20</option>
</select>
<script>
    jQuery(document).ready(function(){
		$('#multiselect_disabled').multiSelect();
    });
</script>

메소드 MultiSelect

모두 선택 모두 선택해제 10개 선택 10개 선택해제

<label class="label">메소드 MultiSelect</label>
<select id="multiselect_methods" multiple="multiple">
	<option value="elem_1">elem 1</option>
	<option value="elem_2">elem 2</option>
	<option value="elem_3">elem 3</option>
	<option value="elem_4">elem 4</option>
	<option value="elem_5">elem 5</option>
	<option value="elem_6">elem 6</option>
	<option value="elem_7">elem 7</option>
	<option value="elem_8">elem 8</option>
	<option value="elem_9">elem 9</option>
	<option value="elem_10">elem 10</option>
	<option value="elem_11">elem 11</option>
	<option value="elem_12">elem 12</option>
	<option value="elem_13">elem 13</option>
	<option value="elem_14">elem 14</option>
	<option value="elem_15">elem 15</option>
	<option value="elem_16">elem 16</option>
	<option value="elem_17">elem 17</option>
	<option value="elem_18">elem 18</option>
	<option value="elem_19">elem 19</option>
	<option value="elem_20">elem 20</option>
</select>
<div class="text-center">
	<a href="#" id="select-all" class="btn-e btn-e-blue btn-e-xs">모두 선택</a>
	<a href="#" id="deselect-all" class="btn-e btn-e-dark btn-e-xs">모두 선택해제</a>
	<a href="#" id="select-10" class="btn-e btn-e-blue btn-e-xs">10개 선택</a>
	<a href="#" id="deselect-10" class="btn-e btn-e-dark btn-e-xs">10개 선택해제</a>
</div>
<script>
    jQuery(document).ready(function(){
		$('#multiselect_methods').multiSelect();
		$('#select-all').click(function(){
			$('#multiselect_methods').multiSelect('select_all');
			return false;
		});
		$('#deselect-all').click(function(){
			$('#multiselect_methods').multiSelect('deselect_all');
			return false;
		});
		$('#select-10').click(function(){
			$('#multiselect_methods').multiSelect('select', ['elem_1', 'elem_2', 'elem_3', 'elem_4', 'elem_5', 'elem_6', 'elem_7', 'elem_8', 'elem_9', 'elem_10']);
			return false;
		});
		$('#deselect-10').click(function(){
			$('#multiselect_methods').multiSelect('deselect', ['elem_1', 'elem_2', 'elem_3', 'elem_4', 'elem_5', 'elem_6', 'elem_7', 'elem_8', 'elem_9', 'elem_10']);
			return false;
		});
    });
</script>

Knob Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다. jquery.knob.min.js 스크립트의 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-knob/jquery.knob.min.js"></script>
<script>
    jQuery(document).ready(function(){
		$(".knob").knob();
    });
</script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-knob/jquery.knob.min.js

Disable display input

<div class="text-center">
	<label class="label">Disable display input</label>
	<div class="knob-wrap">
		<input class="knob" data-width="120" data-thickness=.2 data-fgColor="#959595" data-displayInput=false value="35">
	</div>
</div>

'cursor' mode

<div class="text-center">
	<label class="label">'cursor' mode</label>
	<div class="knob-wrap">
		<input class="knob" data-width="120" data-cursor=true data-fgColor="#3D4254" data-thickness=.2 value="29">
	</div>
</div>

Display previous value

<div class="text-center">
	<label class="label">Display previous value</label>
	<div class="knob-wrap">
		<input class="knob" data-width="120" data-fgColor="#FF5330" data-thickness=.2 data-min="-100" data-displayPrevious=true value="45">
	</div>
</div>

Angle offset

<div class="text-center">
	<label class="label">Angle offset</label>
	<div class="knob-wrap">
		<input class="knob" data-width="120" data-thickness=.2 data-fgColor="#2289FF" data-angleOffset=90 data-linecap=round value="35">
	</div>
</div>

Angle offset and arc

<div class="text-center">
	<label class="label">Angle offset and arc</label>
	<div class="knob-wrap">
		<input class="knob" data-width="120" data-thickness=.2 data-fgColor="#A0CB26" data-angleOffset=-125 data-angleArc=250 data-rotation="anticlockwise" data-linecap=round value="35">
	</div>
</div>

4-digit, step 1000

<div class="text-center">
	<label class="label">4-digit, step 1000</label>
	<div class="knob-wrap">
		<input class="knob" data-width="120" data-thickness=.2 data-fgColor="#FFA72C" data-min="-10000" data-displayPrevious=true data-max="10000" data-step="1000" value="0">
	</div>
</div>

asColorPicker Forms 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다. asColorPicker.min.css 스타일시트와 jquery-ui.min.js 스크립트, jquery-asColor.js 스크립트, jquery-asGradient.js 스크립트, jquery-asColorPicker.min.js 스크립트의 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="../../../plugins/eyoom-form/plugins/jquery-asColorPicker/css/asColorPicker.min.css">

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="../../../plugins/eyoom-form/plugins/jquery-asColorPicker/js/jquery-asColor.min.js"></script>
<script src="../../../plugins/eyoom-form/plugins/jquery-asColorPicker/js/jquery-asGradient.min.js"></script>
<script src="../../../plugins/eyoom-form/plugins/jquery-asColorPicker/js/jquery-asColorPicker.min.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-asColorPicker/css/asColorPicker.min.css
../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js
../plugins/eyoom-form/plugins/jquery-asColorPicker/js/jquery-asColor.min.js
../plugins/eyoom-form/plugins/jquery-asColorPicker/js/jquery-asGradient.min.js
../plugins/eyoom-form/plugins/jquery-asColorPicker/js/jquery-asColorPicker.min.js

기본

<label class="label">기본</label>
<label class="input">
	<input type="text" class="ascolorpicker_default" value="#FF2900">
</label>
<script>
    jQuery(document).ready(function(){
		$(".ascolorpicker_default").asColorPicker();
    });
</script>

팔레트 asColorPicker

<label class="label">팔레트 asColorPicker</label>
<label class="input">
	<input type="text" class="ascolorpicker_palettes" data-mode="palettes" value="#0078FF">
</label>
<script>
    jQuery(document).ready(function(){
		$(".ascolorpicker_palettes").asColorPicker();
    });
</script>

복합 asColorPicker

<label class="label">복합 asColorPicker</label>
<label class="input">
	<input type="text" class="ascolorpicker_complex" data-mode="complex" value="#87BA00">
</label>
<script>
    jQuery(document).ready(function(){
		$(".ascolorpicker_complex").asColorPicker();
    });
</script>

그라디언트 asColorPicker

<label class="label">그라디언트 asColorPicker</label>
<label class="input">
	<input type="text" class="ascolorpicker_gradient" data-mode="gradient" value="#FF9500">
</label>
<script>
    jQuery(document).ready(function(){
		$(".ascolorpicker_gradient").asColorPicker();
    });
</script>

그라디언트 asColorPicker (without switchable)

<label class="label">그라디언트 asColorPicker (without switchable)</label>
<label class="input">
	<input type="text" class="ascolorpicker_gradient_2" data-mode="gradient" value="#663BB8">
</label>
<script>
    jQuery(document).ready(function(){
        $(".ascolorpicker_gradient_2").asColorPicker({
            gradient: {
                switchable: false
            }
        });
    });
</script>

그라디언트 asColorPicker (with color value)

<label class="label">그라디언트 asColorPicker (with color value)</label>
<label class="input">
	<input type="text" class="ascolorpicker_gradient_color" data-mode="gradient" value="rgb(120, 84, 71)">
</label>
<script>
    jQuery(document).ready(function(){
        $(".ascolorpicker_gradient_color").asColorPicker();
    });
</script>

Validation rules 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다. jquery.validate.min.js 스크립트와 additional-methods.min.js 스크립트의 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--예제 소스는 아래와 같이 id값을 부여한 form 태그 사이에 입력-->
<form action="#" id="validation-form-ex" class="eyoom-form">
	예제 소스 입력
</form>

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-validate/jquery.validate.min.js"></script>
<script src="../../../plugins/eyoom-form/plugins/jquery-validate/additional-methods.min.js"></script>
<script>
    jQuery(document).ready(function(){
        $("#validation-form-ex").validate({
            // Validation 설정
            rules: {
                required: {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                url: {
                    required: true,
                    url: true
                },
                date: {
                    required: true,
                    date: true
                },
                min: {
                    required: true,
                    minlength: 5
                },
                max: {
                    required: true,
                    maxlength: 10
                },
                range: {
                    required: true,
                    rangelength: [5, 10]
                },
                digits: {
                    required: true,
                    digits: true
                },
                number: {
                    required: true,
                    number: true
                },
                minVal: {
                    required: true,
                    min: 10
                },
                maxVal: {
                    required: true,
                    max: 20
                },
                rangeVal: {
                    required: true,
                    range: [10, 20]
                }
            },

            // Validation 메세지
            messages: {
                required: {
                    required: '입력해 주세요.'
                },
                email: {
                    required: '이메일 주소를 입력해 주세요.',
                    email : "메일규칙에 어긋납니다"
                },
                url: {
                    required: 'URL 주소를 입력해 주세요.',
                    url : "정상적인 URL이 아닙니다"
                },
                date: {
                    required: '날짜를 입력해 주세요.',
                    date: '날짜를 입력해 주세요.'
                },
                min: {
                    required: '5 글자 이상 입력해 주세요.',
                    minlength: '최소 (5)글자 이상이어야 합니다.'
                },
                max: {
                    required: '10 글자 이하 입력해 주세요.',
                    maxlength: '최대 (10)글자 이하이어야 합니다.'
                },
                range: {
                    required: '5 글자 ~ 10 글자 사이를 입력해 주세요.',
                    rangelength: '(5) ~ (10)글자 사이를 입력해 주세요.'
                },
                digits: {
                    required: '숫자 정수를 입력해 주세요.',
                    digits: '숫자 정수이어야 합니다.'
                },
                number: {
                    required: '숫자를 입력해 주세요. (소수 가능)',
                    number: '숫자이어야 합니다.'
                },
                minVal: {
                    required: '10 이상을 입력해 주세요.',
                    min: '(10) 이상을 입력해 주세요.'
                },
                maxVal: {
                    required: '20 이하를 입력해 주세요.',
                    max: '(20) 이하를 입력해 주세요.'
                },
                rangeVal: {
                    required: '10 ~ 20 사이를 입력해 주세요.',
                    range: '(10) ~ (20) 사이를 입력해 주세요.'
                }
            },

            // 아래 코드는 변경하지 마세요.
            errorPlacement: function(error, element) {
                error.insertAfter(element.parent());
            }
        });
    });
</script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-validate/jquery.validate.min.js
../plugins/eyoom-form/plugins/jquery-validate/additional-methods.min.js

필수 *

이메일 *

URL *

날짜 *

5자 이상 *

10자 이하 *

글자수 범위 *

정수 *

숫자 *

10이상 숫자 *

20이하 숫자 *

숫자 범위 *

Masked inputs 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다. jquery.maskedinput.min.js 스크립트의 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/jquery-maskedinput/jquery.maskedinput.min.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/jquery-maskedinput/jquery.maskedinput.min.js

날짜

예제: YYYY-MM-DD

시간

예제: hh:mm

날짜와 시간

예제: YYYY-MM-DD hh:mm

휴대폰 번호

예제: ( ) 9999-9999

사업자 등록 번호

예제: 999-99-99999

지불 카드

예제: 9999-9999-9999-9999

시리얼 번호

예제: 9999-9999-9999-9999-9999

퍼센트

예제: 99.99%

IP 주소

예제: 999.999.999.999

Dropify - File Uploads 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다. dropify.min.css 스타일시트와 dropify.min.js 스크립트 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.

<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="../../../plugins/eyoom-form/plugins/dropify/css/dropify.min.css">

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/eyoom-form/plugins/dropify/js/dropify.min.js"></script>
<script>
    jQuery(document).ready(function(){
		$('.dropify').dropify({
		    messages: {
		        'default': '파일을 끌어와서 넣거나 클릭하세요.',
		        'replace': '파일을 끌어와서 넣거나 클릭하여 변경하세요.',
		        'remove':  '삭제하기',
		        'error':   'Error! 잘못된 파일입니다.'
		    }
		});
    });
</script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.
../plugins/eyoom-form/plugins/dropify/css/dropify.min.css
../plugins/eyoom-form/plugins/dropify/js/dropify.min.js

<form action="#">
	<h6 class="margin-bottom-10"><strong>기본 Dropify</strong></h6>
	<input type="file" class="dropify">
</form>

<form action="#">
	<h6 class="margin-bottom-10"><strong>기본 파일 지정 Dropify</strong></h6>
	<input type="file" class="dropify" data-default-file="지정 파일 URL">
</form>

<form action="#">
	<h6 class="margin-bottom-10"><strong>높이 설정 Dropify</strong></h6>
	<input type="file" class="dropify" data-height="400" data-default-file="지정 파일 URL">
</form>

<form action="#">
	<h6 class="margin-bottom-10"><strong>파일 사이즈 설정 Dropify</strong></h6>
	<input type="file" class="dropify" data-max-file-size="3M">
</form>

<form action="#">
	<h6 class="margin-bottom-10"><strong>비활성 Dropify</strong></h6>
	<input type="file" class="dropify" disabled="disabled">
</form>

<form action="#">
	<h6 class="margin-bottom-10"><strong>지정된 파일 Dropify</strong></h6>
	<input type="file" class="dropify" disabled="disabled" data-default-file="지정 파일 URL">
</form>

확장된 폼

확장된 폼

확장된 폼

Dropify - File Uploads 사용법

기본 Dropify

기본 파일 지정 Dropify

높이 설정 Dropify

파일 사이즈 설정 Dropify

비활성 Dropify

지정된 파일 Dropify

사이트 이용문의

버그 & 건의

사이트 정보