이윰

확장된 폼

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

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

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

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

Selectize Forms 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다.

<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="<?php echo EYOOM_THEME_URL; ?>/plugins/eyoom-form/plugins/selectize/selectize.bootstrap3.css">

<!--작업중인 파일 하단에 추가-->
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/eyoom-form/plugins/selectize/selectize.min.js"></script>

태그 추가

awesome

neat

<label for="input-tags">태그 추가</label>
<input type="text" id="input-tags" value="awesome,neat">
<script>
    $(document).ready(function(){
		$('#input-tags').selectize({
			persist: false,
			createOnBlur: true,
			create: true
		});
	});
</script>

선택 기본

<label for="select-beast">선택 기본</label>
<select id="select-beast" placeholder="Select a person...">
	<option value="">Select a person...</option>
	<option value="1">Thomas Edison</option>
	<option value="2">Nikola</option>
	<option value="3">Nikola Tesla</option>
	<option value="4">Arnold Schwarzenegger</option>
</select>
<script>
    $(document).ready(function(){
		$('#select-beast').selectize({
			sortField: {
				field: 'text',
				direction: 'asc'
			}
		});
	});
</script>

선택 옵션 (기본선택, 비활성)

Nikola Tesla

<label for="select-beast-single-disabled">선택 옵션 (기본선택, 비활성)</label>
<select id="select-beast-single-disabled" placeholder="Select a person...">
	<option value="">Select a person...</option>
	<option value="1" disabled>Thomas Edison</option>
	<option value="2">Arnold Schwarzenegger</option>
	<option value="3" selected>Nikola Tesla</option>
</select>
<script>
    $(document).ready(function(){
		$('#select-beast-single-disabled').selectize({
			sortField: {field: 'text'}
		});
	});
</script>

태그 다중 선택 (최대 3개)

<label for="select-state">태그 다중 선택 (최대 3개)</label>
<select id="select-state" name="state[]" multiple placeholder="Select a state...">
	<option value="">Select a state...</option>
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>
	<option value="CA">California</option>
	<option value="CO">Colorado</option>
	<option value="CT">Connecticut</option>
	<option value="DE">Delaware</option>
	<option value="DC">District of Columbia</option>
	<option value="FL">Florida</option>
	<option value="GA">Georgia</option>
	<option value="HI">Hawaii</option>
	<option value="ID">Idaho</option>
	<option value="IL">Illinois</option>
	<option value="IN">Indiana</option>
	<option value="IA">Iowa</option>
	<option value="KS">Kansas</option>
	<option value="KY">Kentucky</option>
	<option value="LA">Louisiana</option>
	<option value="ME">Maine</option>
	<option value="MD">Maryland</option>
	<option value="MA">Massachusetts</option>
	<option value="MI">Michigan</option>
	<option value="MN">Minnesota</option>
	<option value="MS">Mississippi</option>
	<option value="MO">Missouri</option>
	<option value="MT">Montana</option>
	<option value="NE">Nebraska</option>
	<option value="NV">Nevada</option>
	<option value="NH">New Hampshire</option>
	<option value="NJ">New Jersey</option>
	<option value="NM">New Mexico</option>
	<option value="NY">New York</option>
	<option value="NC">North Carolina</option>
	<option value="ND">North Dakota</option>
	<option value="OH">Ohio</option>
	<option value="OK">Oklahoma</option>
	<option value="OR">Oregon</option>
	<option value="PA">Pennsylvania</option>
	<option value="RI">Rhode Island</option>
	<option value="SC">South Carolina</option>
	<option value="SD">South Dakota</option>
	<option value="TN">Tennessee</option>
	<option value="TX">Texas</option>
	<option value="UT">Utah</option>
	<option value="VT">Vermont</option>
	<option value="VA">Virginia</option>
	<option value="WA">Washington</option>
	<option value="WV">West Virginia</option>
	<option value="WI">Wisconsin</option>
	<option value="WY">Wyoming</option>
</select>
<script>
    $(document).ready(function(){
		$('#select-state').selectize({
			maxItems: 3
		});
	});
</script>

선택 국가

<label for="select-country">선택 국가</label>
<select id="select-country" placeholder="Select a country...">
    <option value="">Select a country...</option>
	<option value="AF">Afghanistan</option>
    <option value="AX">Åland Islands</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>
    <option value="AQ">Antarctica</option>
    <option value="AG">Antigua and Barbuda</option>
    <option value="AR">Argentina</option>
    <option value="AM">Armenia</option>
    <option value="AW">Aruba</option>
    <option value="AU">Australia</option>
    <option value="AT">Austria</option>
    <option value="AZ">Azerbaijan</option>
    <option value="BS">Bahamas</option>
    <option value="BH">Bahrain</option>
    <option value="BD">Bangladesh</option>
    <option value="BB">Barbados</option>
    <option value="BY">Belarus</option>
    <option value="BE">Belgium</option>
    <option value="BZ">Belize</option>
    <option value="BJ">Benin</option>
    <option value="BM">Bermuda</option>
    <option value="BT">Bhutan</option>
    <option value="BO">Bolivia, Plurinational State of</option>
    <option value="BA">Bosnia and Herzegovina</option>
    <option value="BW">Botswana</option>
    <option value="BV">Bouvet Island</option>
    <option value="BR">Brazil</option>
    <option value="IO">British Indian Ocean Territory</option>
    <option value="BN">Brunei Darussalam</option>
    <option value="BG">Bulgaria</option>
    <option value="BF">Burkina Faso</option>
    <option value="BI">Burundi</option>
    <option value="KH">Cambodia</option>
    <option value="CM">Cameroon</option>
    <option value="CA">Canada</option>
    <option value="CV">Cape Verde</option>
    <option value="KY">Cayman Islands</option>
    <option value="CF">Central African Republic</option>
    <option value="TD">Chad</option>
    <option value="CL">Chile</option>
    <option value="CN">China</option>
    <option value="CX">Christmas Island</option>
    <option value="CC">Cocos (Keeling) Islands</option>
    <option value="CO">Colombia</option>
    <option value="KM">Comoros</option>
    <option value="CG">Congo</option>
    <option value="CD">Congo, the Democratic Republic of the</option>
    <option value="CK">Cook Islands</option>
    <option value="CR">Costa Rica</option>
    <option value="CI">Côte d'Ivoire</option>
    <option value="HR">Croatia</option>
    <option value="CU">Cuba</option>
    <option value="CY">Cyprus</option>
    <option value="CZ">Czech Republic</option>
    <option value="DK">Denmark</option>
    <option value="DJ">Djibouti</option>
    <option value="DM">Dominica</option>
    <option value="DO">Dominican Republic</option>
    <option value="EC">Ecuador</option>
    <option value="EG">Egypt</option>
    <option value="SV">El Salvador</option>
    <option value="GQ">Equatorial Guinea</option>
    <option value="ER">Eritrea</option>
    <option value="EE">Estonia</option>
    <option value="ET">Ethiopia</option>
    <option value="FK">Falkland Islands (Malvinas)</option>
    <option value="FO">Faroe Islands</option>
    <option value="FJ">Fiji</option>
    <option value="FI">Finland</option>
    <option value="FR">France</option>
    <option value="GF">French Guiana</option>
    <option value="PF">French Polynesia</option>
    <option value="TF">French Southern Territories</option>
    <option value="GA">Gabon</option>
    <option value="GM">Gambia</option>
    <option value="GE">Georgia</option>
    <option value="DE">Germany</option>
    <option value="GH">Ghana</option>
    <option value="GI">Gibraltar</option>
    <option value="GR">Greece</option>
    <option value="GL">Greenland</option>
    <option value="GD">Grenada</option>
    <option value="GP">Guadeloupe</option>
    <option value="GU">Guam</option>
    <option value="GT">Guatemala</option>
    <option value="GG">Guernsey</option>
    <option value="GN">Guinea</option>
    <option value="GW">Guinea-Bissau</option>
    <option value="GY">Guyana</option>
    <option value="HT">Haiti</option>
    <option value="HM">Heard Island and McDonald Islands</option>
    <option value="VA">Holy See (Vatican City State)</option>
    <option value="HN">Honduras</option>
    <option value="HK">Hong Kong</option>
    <option value="HU">Hungary</option>
    <option value="IS">Iceland</option>
    <option value="IN">India</option>
    <option value="ID">Indonesia</option>
    <option value="IR">Iran, Islamic Republic of</option>
    <option value="IQ">Iraq</option>
    <option value="IE">Ireland</option>
    <option value="IM">Isle of Man</option>
    <option value="IL">Israel</option>
    <option value="IT">Italy</option>
    <option value="JM">Jamaica</option>
    <option value="JP">Japan</option>
    <option value="JE">Jersey</option>
    <option value="JO">Jordan</option>
    <option value="KZ">Kazakhstan</option>
    <option value="KE">Kenya</option>
    <option value="KI">Kiribati</option>
    <option value="KP">Korea, Democratic People's Republic of</option>
    <option value="KR">Korea, Republic of</option>
    <option value="KW">Kuwait</option>
    <option value="KG">Kyrgyzstan</option>
    <option value="LA">Lao People's Democratic Republic</option>
    <option value="LV">Latvia</option>
    <option value="LB">Lebanon</option>
    <option value="LS">Lesotho</option>
    <option value="LR">Liberia</option>
    <option value="LY">Libyan Arab Jamahiriya</option>
    <option value="LI">Liechtenstein</option>
    <option value="LT">Lithuania</option>
    <option value="LU">Luxembourg</option>
    <option value="MO">Macao</option>
    <option value="MK">Macedonia, the former Yugoslav Republic of</option>
    <option value="MG">Madagascar</option>
    <option value="MW">Malawi</option>
    <option value="MY">Malaysia</option>
    <option value="MV">Maldives</option>
    <option value="ML">Mali</option>
    <option value="MT">Malta</option>
    <option value="MH">Marshall Islands</option>
    <option value="MQ">Martinique</option>
    <option value="MR">Mauritania</option>
    <option value="MU">Mauritius</option>
    <option value="YT">Mayotte</option>
    <option value="MX">Mexico</option>
    <option value="FM">Micronesia, Federated States of</option>
    <option value="MD">Moldova, Republic of</option>
    <option value="MC">Monaco</option>
    <option value="MN">Mongolia</option>
    <option value="ME">Montenegro</option>
    <option value="MS">Montserrat</option>
    <option value="MA">Morocco</option>
    <option value="MZ">Mozambique</option>
    <option value="MM">Myanmar</option>
    <option value="NA">Namibia</option>
    <option value="NR">Nauru</option>
    <option value="NP">Nepal</option>
    <option value="NL">Netherlands</option>
    <option value="AN">Netherlands Antilles</option>
    <option value="NC">New Caledonia</option>
    <option value="NZ">New Zealand</option>
    <option value="NI">Nicaragua</option>
    <option value="NE">Niger</option>
    <option value="NG">Nigeria</option>
    <option value="NU">Niue</option>
    <option value="NF">Norfolk Island</option>
    <option value="MP">Northern Mariana Islands</option>
    <option value="NO">Norway</option>
    <option value="OM">Oman</option>
    <option value="PK">Pakistan</option>
    <option value="PW">Palau</option>
    <option value="PS">Palestinian Territory, Occupied</option>
    <option value="PA">Panama</option>
    <option value="PG">Papua New Guinea</option>
    <option value="PY">Paraguay</option>
    <option value="PE">Peru</option>
    <option value="PH">Philippines</option>
    <option value="PN">Pitcairn</option>
    <option value="PL">Poland</option>
    <option value="PT">Portugal</option>
    <option value="PR">Puerto Rico</option>
    <option value="QA">Qatar</option>
    <option value="RE">Réunion</option>
    <option value="RO">Romania</option>
    <option value="RU">Russian Federation</option>
    <option value="RW">Rwanda</option>
    <option value="BL">Saint Barthélemy</option>
    <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
    <option value="KN">Saint Kitts and Nevis</option>
    <option value="LC">Saint Lucia</option>
    <option value="MF">Saint Martin (French part)</option>
    <option value="PM">Saint Pierre and Miquelon</option>
    <option value="VC">Saint Vincent and the Grenadines</option>
    <option value="WS">Samoa</option>
    <option value="SM">San Marino</option>
    <option value="ST">Sao Tome and Principe</option>
    <option value="SA">Saudi Arabia</option>
    <option value="SN">Senegal</option>
    <option value="RS">Serbia</option>
    <option value="SC">Seychelles</option>
    <option value="SL">Sierra Leone</option>
    <option value="SG">Singapore</option>
    <option value="SK">Slovakia</option>
    <option value="SI">Slovenia</option>
    <option value="SB">Solomon Islands</option>
    <option value="SO">Somalia</option>
    <option value="ZA">South Africa</option>
    <option value="GS">South Georgia and the South Sandwich Islands</option>
    <option value="ES">Spain</option>
    <option value="LK">Sri Lanka</option>
    <option value="SD">Sudan</option>
    <option value="SR">Suriname</option>
    <option value="SJ">Svalbard and Jan Mayen</option>
    <option value="SZ">Swaziland</option>
    <option value="SE">Sweden</option>
    <option value="CH">Switzerland</option>
    <option value="SY">Syrian Arab Republic</option>
    <option value="TW">Taiwan, Province of China</option>
    <option value="TJ">Tajikistan</option>
    <option value="TZ">Tanzania, United Republic of</option>
    <option value="TH">Thailand</option>
    <option value="TL">Timor-Leste</option>
    <option value="TG">Togo</option>
    <option value="TK">Tokelau</option>
    <option value="TO">Tonga</option>
    <option value="TT">Trinidad and Tobago</option>
    <option value="TN">Tunisia</option>
    <option value="TR">Turkey</option>
    <option value="TM">Turkmenistan</option>
    <option value="TC">Turks and Caicos Islands</option>
    <option value="TV">Tuvalu</option>
    <option value="UG">Uganda</option>
    <option value="UA">Ukraine</option>
    <option value="AE">United Arab Emirates</option>
    <option value="GB">United Kingdom</option>
    <option value="US">United States</option>
    <option value="UM">United States Minor Outlying Islands</option>
    <option value="UY">Uruguay</option>
    <option value="UZ">Uzbekistan</option>
    <option value="VU">Vanuatu</option>
    <option value="VE">Venezuela, Bolivarian Republic of</option>
    <option value="VN">Viet Nam</option>
    <option value="VG">Virgin Islands, British</option>
    <option value="VI">Virgin Islands, U.S.</option>
    <option value="WF">Wallis and Futuna</option>
    <option value="EH">Western Sahara</option>
    <option value="YE">Yemen</option>
    <option value="ZM">Zambia</option>
    <option value="ZW">Zimbabwe</option>
</select>
<script>
    $(document).ready(function(){
		$('#select-country').selectize();
	});
</script>

Clockpicker Forms 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다.

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

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

기본

좌측형

우측형

상단형

기본 자동 닫힘

좌측형 자동 닫힘

우측형 자동 닫힘

상단형 자동 닫힘

Timepicker Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다.

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

기본

시간 범위

비활성 시간 지정

현재 시간 선택

현재 시간

Datepicker Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다.

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

단일 선택 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>
    $(document).ready(function(){
        $('#date').datepicker({
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fas fa-angle-left"></i>',
            nextText: '<i class="fas 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 far fa-calendar-alt"></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 far fa-calendar-alt"></i>
            <input type="text" name="finish" id="finish" placeholder="Finish date">
        </label>
    </div>
</div>
<script>
    $(document).ready(function(){
        $('#start').datepicker({
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fas fa-angle-left"></i>',
            nextText: '<i class="fas 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="fas fa-angle-left"></i>',
            nextText: '<i class="fas 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

2025 년 7월

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

<label class="label">단일 선택 Inline</label>
<div id="inline"></div>
<script>
    $(document).ready(function(){
        $('#inline').datepicker({
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fas fa-angle-left"></i>',
            nextText: '<i class="fas 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

2025 년 7월

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

<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="fas fa-angle-left"></i>',
            nextText: '<i class="fas 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="fas fa-angle-left"></i>',
            nextText: '<i class="fas 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="<?php echo EYOOM_THEME_URL; ?>/plugins/eyoom-form/plugins/bootstrap-daterangepicker/daterangepicker.min.css">

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

기본 Daterangepicker

<label class="label">기본 Daterangepicker</label>
<label class="input">
    <i class="icon-append far fa-calendar-alt"></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="fas fa-check"></i>',
                cancelLabel: '취소 <i class="fas 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 far fa-calendar-alt"></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="fas fa-check"></i>',
                cancelLabel: '취소 <i class="fas 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 far fa-calendar-alt"></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="fas fa-check"></i>',
                cancelLabel: '취소 <i class="fas 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 far fa-calendar-alt"></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="fas fa-check"></i>',
                cancelLabel: '취소 <i class="fas 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 far fa-calendar-alt"></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 far fa-calendar-alt"></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 far fa-calendar-alt"></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="far fa-calendar-alt"></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="fas fa-check"></i>',
                cancelLabel: '취소 <i class="fas 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 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다.

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

기본 Slider [0]

<label class="label">기본 Slider [<span class="slider-value-color" id="slider_default_value">0</span>]</label>
<div id="slider_default"></div>
<script>
    $(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>
    $(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>
    $(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 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다.

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

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

기본 tagEditor

,
서울
,
대전
,
대구
,
부산

<label class="label">기본 tagEditor</label>
<label class="textarea">
    <textarea id="tagEditor_default"></textarea>
</label>
<script>
    $(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>
    $(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>
    $(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>
    $(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>
    $(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>
    $(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 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다.

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

Input

Textarea

asSpinner Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다.

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

기본 Spinner

<label class="label">기본 Spinner</label>
<label class="input">
    <input type="text" class="default_spinner" value="0">
</label>
<script>
    $(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>
    $(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>
    $(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>
    $(document).ready(function(){
        $(".rule_spinner").asSpinner({
            rule: 'month'
        });
    });
</script>

louMultiSelect Forms 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다.

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

미리 선택된 MultiSelect

elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20

elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20

<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>
    $(document).ready(function(){
        $('#multiselect_pre_selected').multiSelect();
    });
</script>

콜백 MultiSelect

elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20

elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20

<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>
    $(document).ready(function(){
        $('#multiselect_callback').multiSelect({
            afterSelect: function(values){
                alert("선택 : "+values);
            },
            afterDeselect: function(values){
                alert("선택해제 : "+values);
            }
        });
    });
</script>

그룹 MultiSelect

- Friends
- Yoda
- Obiwan
- Enemies
- Palpatine
- Darth Vader

- Friends
- Yoda
- Obiwan
- Enemies
- Palpatine
- Darth Vader

<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>
    $(document).ready(function(){
        $('#multiselect_group').multiSelect({
            selectableOptgroup: true
        });
    });
</script>

비활성 MultiSelect

elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20

elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20

<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>
    $(document).ready(function(){
        $('#multiselect_disabled').multiSelect();
    });
</script>

메소드 MultiSelect

elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20

elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20

모두 선택 모두 선택해제 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>
    $(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 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다.

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

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 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다.

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

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

기본

<label class="label">기본</label>
<label class="input">
    <input type="text" class="ascolorpicker_default" value="#FF2900">
</label>
<script>
    $(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>
    $(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>
    $(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>
    $(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>
    $(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>
    $(document).ready(function(){
        $(".ascolorpicker_gradient_color").asColorPicker();
    });
</script>

Validation rules 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다.

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

<!--작업중인 파일 하단에 추가-->
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/eyoom-form/plugins/jquery-validate/jquery.validate.min.js"></script>
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/eyoom-form/plugins/jquery-validate/additional-methods.min.js"></script>
<script>
    $(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>

필수 *

이메일 *

URL *

날짜 *

5자 이상 *

10자 이하 *

글자수 범위 *

정수 *

숫자 *

10이상 숫자 *

20이하 숫자 *

숫자 범위 *

Masked inputs 사용법

테마 내 작업중인 파일 하단에 아래소스를 추가합니다.

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

날짜

예제: 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 사용법

테마 내 작업중인 파일 상단과 하단에 아래소스를 추가합니다.

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

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

<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" data-default-file="지정 파일 URL">
</form>

확장된 폼

Dropify - File Uploads 사용법

기본 Dropify

기본 파일 지정 Dropify

높이 설정 Dropify

파일 사이즈 설정 Dropify

비활성 Dropify

지정된 파일 Dropify