이윰넷

Advanced Forms

"이윰빌더에서 기본적으로 제공하는 Eyoom Form의 확장기능 활용법입니다."

Note! 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>
<script>
    jQuery(document).ready(function(){
	    //Single select
	    $(".select2-single").select2();
	    //Multiple select
	    $(".select2-multiple").select2();
	    //Placeholder multiple select
		$(".select2-placeholder-multiple").select2({
			placeholder: "Select a state",
			allowClear: true
		});
    });
</script>

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

Single select

<label class="label">Single 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>

Multiple select

<label class="label">Multiple select</label>
<label class="select">
	<select class="select2-multi" 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>

Placeholder multiple select

<label class="label">Placeholder multiple 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>

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

Default

Place at left

Place at right

Place at top

Auto close

Place at left, auto close

Place at right, auto close

Place at top, auto close

Timepicker Forms 사용법

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

<script src="../plugins/eyoom-form/plugins/jquery-timepicker/jquery.timepicker.min.js"></script>
<script>
    jQuery(document).ready(function(){
	    //Default
		$('#timepicker_1').timepicker();
		//Duration
		$('#timepicker_2').timepicker();
		//Disable TimeRanges
		$('#timepicker_3').timepicker({
		    'disableTimeRanges': [
		        ['1am', '2am'],
		        ['3am', '4:31am']
		    ]
		});
		//Reset Current
		$('#timepicker_4').timepicker();
		$('#timepicker_4_btn').on('click', function (){
		    $('#timepicker_4').timepicker('setTime', new Date());
		});
    });
</script>

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

Default

Duration

Disable TimeRanges

Reset Current

Set Time

Datepicker Forms 사용법

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

<script src="../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="../plugins/eyoom-form/js/datepicker.js"></script>
<script>
    jQuery(document).ready(function(){
		Datepicker.initDatepicker();
    });
</script>

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

Select single date

<label class="label">Select single date</label>
<label class="input">
	<i class="icon-append fa fa-calendar-o"></i>
	<input type="text" name="date" id="date">
</label>

Combine date range

<label class="label">Combine date range</label>
<label class="input-combine">
	<div class="input input-front">
		<i class="icon-prepend fa fa-calendar-o"></i>
		<input type="text" name="combine_start" id="combine_start" placeholder="Start date">
	</div>
	<div class="input input-back">
		<i class="icon-prepend fa fa-angle-double-right"></i>
		<input type="text" name="combine_finish" id="combine_finish" placeholder="Finish date">
	</div>
	<div class="clearfix"></div>
</label>

Select date range

<label class="label">Select date range</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>

Single with inline

<label class="label">Single with inline</label>
<div id="inline"></div>

Date range with inline

<label class="label">Date range with 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>

Datepair Forms 사용법

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

<script src="../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="../plugins/eyoom-form/js/datepicker.js"></script>
<script src="../plugins/eyoom-form/plugins/jquery-timepicker/jquery.timepicker.min.js"></script>
<script src="../plugins/eyoom-form/plugins/jquery-clockpicker/jquery.clockpicker.min.js"></script>
<script>
	jQuery(document).ready(function() {
		//Datepair #1
        $('#datepair_1 .time').timepicker();
        $('#datepair_1 .start_1').datepicker({
            'dateFormat': 'yy-mm-dd',
            'prevText': '',
            'nextText': '',
            'onSelect': function(selectedDate){
                $('#datepair_1 .finish_1').datepicker('option', 'minDate', selectedDate);
            }
        });
        $('#datepair_1 .finish_1').datepicker({
            'dateFormat': 'yy-mm-dd',
            'prevText': '',
            'nextText': '',
            'onSelect': function(selectedDate){
                $('#datepair_1 .start_1').datepicker('option', 'maxDate', selectedDate);
            }
        });
		//Datepair #2
		$('.clockpicker').clockpicker();
        $('#datepair_2 .start_2').datepicker({
            'dateFormat': 'yy-mm-dd',
            'prevText': '',
            'nextText': '',
            'onSelect': function(selectedDate){
                $('#datepair_2 .finish_2').datepicker('option', 'minDate', selectedDate);
            }
        });
        $('#datepair_2 .finish_2').datepicker({
            'dateFormat': 'yy-mm-dd',
            'prevText': '',
            'nextText': '',
            'onSelect': function(selectedDate){
                $('#datepair_2 .start_2').datepicker('option', 'maxDate', selectedDate);
            }
        });
	});
</script>

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

Datepair #1

<label class="label">Datepair #1</label>
<div id="datepair_1" class="datepair-wrap">
	<label class="input-combine">
		<div class="input input-front">
			<i class="icon-prepend fa fa-calendar-o"></i>
			<input type="text" class="start_1" placeholder="Start date">
		</div>
		<div class="input input-back">
			<i class="icon-prepend fa fa-clock-o"></i>
			<input type="text" class="time" placeholder="Start time" class="ui-timepicker-input" autocomplete="off">
		</div>
	</label>
	<div class="input-combine-pair">~</div>
	<label class="input-combine">
		<div class="input input-front">
			<i class="icon-prepend fa fa-calendar-o"></i>
			<input type="text" class="finish_1" placeholder="Finish date">
		</div>
		<div class="input input-back">
			<i class="icon-prepend fa fa-clock-o"></i>
			<input type="text" class="time" placeholder="End time" class="ui-timepicker-input" autocomplete="off">
		</div>
	</label>
	<div class="clearfix"></div>
</div>

Datepair #2

<label class="label">Datepair #2</label>
<div id="datepair_2" class="datepair-wrap">
	<label class="input-combine">
		<div class="input input-front">
			<i class="icon-prepend fa fa-calendar-o"></i>
			<input type="text" class="start_2" placeholder="Start date">
		</div>
		<div class="input input-back clockpicker" data-autoclose="true">
			<i class="icon-prepend fa fa-clock-o"></i>
			<input type="text" placeholder="Start time">
		</div>
	</label>
	<div class="input-combine-pair">~</div>
	<label class="input-combine">
		<div class="input input-front">
			<i class="icon-prepend fa fa-calendar-o"></i>
			<input type="text" class="finish_2" placeholder="Finish date">
		</div>
		<div class="input input-back clockpicker" data-autoclose="true">
			<i class="icon-prepend fa fa-clock-o"></i>
			<input type="text" placeholder="End time">
		</div>
	</label>
	<div class="clearfix"></div>
</div>

Slider Range Forms 사용법

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

<script src="../plugins/eyoom-form/plugins/jquery-ui/jquery-ui.min.js"></script>
<script>
    jQuery(document).ready(function(){
	    //Default
		$('#slider1').slider({
			min: 0,
			max: 1000,
			slide: function(event, ui){
				$('#slider1-value').text(ui.value);
			}
		});
		//Step
		$('#slider2').slider({
			min: 1000,
			max: 3000,
			step: 100,
			slide: function(event, ui){
				$('#slider2-value').text(ui.value);
			}
		});
		//Range
		$('#slider3').slider({
			min: 0,
			max: 40000,
			step: 1000,
			range: true,
			values: [5000, 35000],
			slide: function(event, ui){
				$('#slider3-value1').text(ui.values[0]);
				$('#slider3-value2').text(ui.values[1]);
			}
		});
    });
</script>

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

Default [0]

<label class="label">Default [<span class="slider-value-color" id="slider1-value">0</span>]</label>
<div id="slider1"></div>

Step [1000]

<label class="label">Step [<span class="slider-value-color" id="slider2-value">1000</span>]</label>
<div id="slider2"></div>

Range [5000 ~ 35000]

<label class="label">Range [<span class="slider-value-color" id="slider3-value1">5000</span> ~ <span class="slider-value-color" id="slider3-value2">35000</span>]</label>
<div id="slider3"></div>

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>
<script>
    jQuery(document).ready(function(){
	    //Default
		$('#tagEditor_1').tagEditor({
		    initialTags: ['Hello', 'World', 'Example', 'Tags'],
		    delimiter: ', ',
		    placeholder: 'Enter tags ...'
		})
		//Red color
		$('#tagEditor_2').tagEditor({
		    initialTags: ['Hello', 'World', 'Example', 'Tags'],
		    delimiter: ', ',
		    placeholder: 'Enter tags ...'
		})
		//Green color
		$('#tagEditor_3').tagEditor({
		    initialTags: ['Hello', 'World', 'Example', 'Tags'],
		    delimiter: ', ',
		    placeholder: 'Enter tags ...'
		})
		//Yellow color
		$('#tagEditor_4').tagEditor({
		    initialTags: ['Hello', 'World', 'Example', 'Tags'],
		    delimiter: ', ',
		    placeholder: 'Enter tags ...'
		})
		//Dark color
		$('#tagEditor_5').tagEditor({
		    initialTags: ['Hello', 'World', 'Example', 'Tags'],
		    delimiter: ', ',
		    placeholder: 'Enter tags ...'
		})
		//Autocomplete
		$('#tagEditor_6').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: 'Programming languages ...'
		});
    });
</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

Default

<label class="label">Default</label>
<label class="textarea">
	<textarea id="tagEditor_1"></textarea>
</label>

Red color

<label class="label">Red color</label>
<label class="textarea tag-red">
	<textarea id="tagEditor_2"></textarea>
</label>

Green color

<label class="label">Green color</label>
<label class="textarea tag-green">
	<textarea id="tagEditor_3"></textarea>
</label>

Yellow color

<label class="label">Yellow color</label>
<label class="textarea tag-yellow">
	<textarea id="tagEditor_4"></textarea>
</label>

Dark color

<label class="label">Dark color</label>
<label class="textarea tag-dark">
	<textarea id="tagEditor_5"></textarea>
</label>

Autocomplete

<label class="label">Autocomplete</label>
<label class="textarea">
	<textarea id="tagEditor_6"></textarea>
</label>

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>
<script>
    jQuery(document).ready(function(){
	    //Input
		$('input.maxlength_1').maxlength({
			alwaysShow: true,
			threshold: 10,
			warningClass: "label label-success",
			limitReachedClass: "label label-danger",
			placement: 'bottom-right-inside'
		});
	    //Textarea
		$('textarea.maxlength_2').maxlength({
			alwaysShow: true,
			warningClass: "label label-success",
			limitReachedClass: "label label-danger",
			placement: 'bottom-right-inside'
		});
    });
</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>
<script>
    jQuery(document).ready(function(){
	    //Default spinner
		$('.default_spinner').asSpinner();
		//Mousewheel spinner
        $('.mousewheel_spinner').asSpinner({
            mousewheel: true
        });
        //Format spinner
        $(".format_spinner").asSpinner({
			min: 1000,
			max: 30000,
	        step: 1000,
            format: function(value) {
                return '￦'+value;
            },
            parse: function(value) {
                return value.replace('￦','');
            }
        });
        //Rule spinner
        $(".rule_spinner").asSpinner({
            rule: 'month'
        });
    });
</script>

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

Default spinner

<label class="label">Default spinner</label>
<label class="input">
	<input type="text" class="default_spinner" value="0">
</label>

Mousewheel spinner

<label class="label">Mousewheel spinner</label>
<label class="input">
	<input type="text" class="mousewheel_spinner" value="0">
</label>

Format spinner (￦1000 ~ ￦30000)

<label class="label">Format spinner (￦1000 ~ ￦30000)</label>
<label class="input">
	<input type="text" class="format_spinner" value="￦1000">
</label>

Rule spinner (Month)

<label class="label">Rule spinner (Month)</label>
<label class="input">
	<input type="text" class="rule_spinner" value="1">
</label>

louMultiSelect Forms 사용법

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

<script src="../plugins/eyoom-form/plugins/jquery-louMultiSelect/jquery.multi-select.js"></script>
<script>
    jQuery(document).ready(function(){
	    //Pre-selected options
	    $('#pre-selected-options').multiSelect();
	    //Callbacks
		$('#callbacks').multiSelect({
			afterSelect: function(values){
				alert("Select value: "+values);
			},
			afterDeselect: function(values){
				alert("Deselect value: "+values);
			}
		});
		//Optgroup
		$('#optgroup').multiSelect({
			selectableOptgroup: true
		});
		//Disabled attribute
		$('#disabled-attribute').multiSelect();
		//Public methods
		$('#public-methods').multiSelect();
		$('#select-all').click(function(){
			$('#public-methods').multiSelect('select_all');
			return false;
		});
		$('#deselect-all').click(function(){
			$('#public-methods').multiSelect('deselect_all');
			return false;
		});
		$('#select-10').click(function(){
			$('#public-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(){
			$('#public-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>

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

Pre-selected options

<label class="label">Pre-selected options</label>
<select id="pre-selected-options" 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>

Callbacks

<label class="label">Callbacks</label>
<select id="callbacks" 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>

Optgroup

<label class="label">Optgroup</label>
<select id="optgroup" 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>

Disabled attribute

<label class="label">Disabled attribute</label>
<select id="disabled-attribute" 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>

Public methods

select all deselect all select 10 deselect 10

<label class="label">Public methods</label>
<select id="public-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-dark btn-e-xs">select all</a>
	<a href="#" id="deselect-all" class="btn-e btn-e-red btn-e-xs">deselect all</a>
	<a href="#" id="select-10" class="btn-e btn-e-dark btn-e-xs">select 10</a>
	<a href="#" id="deselect-10" class="btn-e btn-e-red btn-e-xs">deselect 10</a>
</div>

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="#949494" 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="#222222" 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="#F54236" 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="#2196F2" 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="#4DB04F" 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="#FFC208" data-min="-10000" data-displayPrevious=true data-max="10000" data-step="1000" value="0">
	</div>
</div>

asColorPicker Forms 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다. jquery-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/jquery-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.js"></script>
<script src="../plugins/eyoom-form/plugins/jquery-asColorPicker/js/jquery-asGradient.js"></script>
<script src="../plugins/eyoom-form/plugins/jquery-asColorPicker/js/jquery-asColorPicker.min.js"></script>
<script>
    jQuery(document).ready(function(){
	    //Default
		$(".example_default").asColorPicker();
		//Mode: palettes
		$(".example_palettes").asColorPicker();
		//Mode: complex
		$(".example_complex").asColorPicker();
		//Mode: gradient
		$(".example_gradient").asColorPicker();
		//Mode: gradient without switchable
        $(document).ready(function() {
            $(".example_gradient_2").asColorPicker({
                gradient: {
                    switchable: false
                }
            });
        });
        //Mode: gradient with color value
        $(".example_gradient_color").asColorPicker();
    });
</script>

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

Default

<label class="label">Default</label>
<label class="input">
	<input type="text" class="example_default" value="#f54236">
</label>

Mode: palettes

<label class="label">Mode: palettes</label>
<label class="input">
	<input type="text" class="example_palettes" data-mode="palettes" value="#2196f2">
</label>

Mode: complex

<label class="label">Mode: complex</label>
<label class="input">
	<input type="text" class="example_complex" data-mode="complex" value="#4db04f">
</label>

Mode: gradient

<label class="label">Mode: gradient</label>
<label class="input">
	<input type="text" class="example_gradient" data-mode="gradient" value="#ffc208">
</label>

Mode: gradient without switchable

<label class="label">Mode: gradient without switchable</label>
<label class="input">
	<input type="text" class="example_gradient_2" data-mode="gradient" value="#663bb8">
</label>

Mode: gradient with color value

<label class="label">Mode: gradient with color value</label>
<label class="input">
	<input type="text" class="example_gradient_color" data-mode="gradient" value="rgb(120, 84, 71)">
</label>

Validation rules 사용법

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

<script src="../plugins/eyoom-form/plugins/jquery-validate/jquery.validate.min.js"></script>
<script src="../plugins/eyoom-form/js/validation.js"></script>
<script>
    jQuery(document).ready(function(){
		Validation.initValidation();
    });
</script>

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

Required field *

Email field *

URL field *

Date field *

Minimum characters *

Maximum characters *

Range characters *

Digits only *

Decimal available *

Minimum number *

Maximum number *

Range number *

Masked inputs 사용법

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

<script src="../plugins/eyoom-form/plugins/jquery-maskedinput/jquery.maskedinput.min.js"></script>
<script>
    jQuery(document).ready(function(){
	    //Date
        $("#masked_date").mask('9999-99-99', {placeholder:'_'});
        //Time
        $("#masked_time").mask('99:99', {placeholder:'_'});
        //Date & Time
        $("#masked_date_time").mask('9999-99-99 99:99', {placeholder:'_'});
        //Phone
        $("#masked_phone").mask('(999) 9999-9999', {placeholder:'_'});
        //Credit card
        $("#masked_card").mask('9999-9999-9999-9999', {placeholder:'_'});
        //Serial number
        $("#masked_serial").mask('****-****-****-****-****', {placeholder:'_'});
        //Percent
        $("#masked_percent").mask('99.99%', {placeholder:'_'});
        //IP Address
        $("#masked_ip").mask('999.999.999.999', {placeholder:'_'});
        //Corporate
        $("#masked_corporate").mask('999-99-99999', {placeholder:'_'});
    });
</script>

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

Date

Example: YYYY-MM-DD

Time

Example: 00:00

Date & Time

Example: YYYY-MM-DD 00:00

Phone

Example: (999) 9999-9999

Corporate Registration Number

Example: 999-99-99999

Credit card

Example: 9999-9999-9999-9999

Serial number

Example: 9999-9999-9999-9999-9999

Percent

Example: 99.99%

IP Address

Example: 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();
    });
</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>Your so fresh input file — Default version</strong></h6>
	<input type="file" class="dropify">
</form>

<form action="#">
	<h6 class="margin-bottom-10"><strong>You can add a default value</strong></h6>
	<input type="file" class="dropify" data-default-file="url_of_your_file">
</form>

<form action="#">
	<h6 class="margin-bottom-10"><strong>You can set the height</strong></h6>
	<input type="file" class="dropify" data-height="400" data-default-file="url_of_your_file">
</form>

<form action="#">
	<h6 class="margin-bottom-10"><strong>You can add a max file size</strong></h6>
	<input type="file" class="dropify" data-max-file-size="3M">
</form>

<form action="#">
	<h6 class="margin-bottom-10"><strong>You can disabled the input</strong></h6>
	<input type="file" class="dropify" disabled="disabled">
</form>

<form action="#">
	<h6 class="margin-bottom-10"><strong>Also with a default file</strong></h6>
	<input type="file" class="dropify" disabled="disabled" data-default-file="url_of_your_file">
</form>

이윰빌더

이윰몰

가이드

커뮤니티

스터디

회원사이트

Others

Advanced Forms

Advanced Forms

Dropify - File Uploads 사용법

Your so fresh input file — Default version

You can add a default value

You can set the height

You can add a max file size

You can disabled the input

Also with a default file