<JSP> HTML을 JSP 로 만들기

실전 코드 입니다.

1. 셀렉트 리스트 ( 콤보박스, 콤보리스트 등) 를 JSP 변경 코드

(1) Html 소스

<span class="ui-select-wrap">
<label for="uiSelect1-button">공시년도</label>
<select id="uiSelect1" title="공시년도" class="ui-select" data-width="80" style="display: none;">
  <option value="">2018</option>
  <option value="">2017</option>
  <option value="">2016</option>
  <option value="">2015</option>
  <option value="">2014</option>
  <option value="">2013</option>
</select><span tabindex="0" id="uiSelect1-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="uiSelect1-menu" aria-haspopup="true" title="공시년도" class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget" style="width: 80px;"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">2018</span></span>
</span>

(2) JSP 소스

<span class="ui-select-wrap">
<label for="uiSelect1-button"><spring:message code="code.m00112" /></label><%--공시년도--%>
<select path="svyYr" id="vn_svyYr"  class="ui-select" data-width="130">
	<c:forEach var="code" items="${codeSvyYr}" varStatus="status">
	<option value="${code.cdid}" >${code.cdnm}</option>
	</c:forEach>
</select>
</span>

(3) html 전체가 필요한경우

<span class="ui-select-wrap">
	<label for="uiSelect2-button">주야간</label>
	<select id="uiSelect2" title="주야간" class="ui-select" data-width="80" style="display: none;">
		<option value="">전체</option>
		<option value="">주간</option>
		<option value="">야간</option>
	</select><span tabindex="0" id="uiSelect2-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="uiSelect2-menu" aria-haspopup="true" title="주야간" class="ui-selectmenu-button ui-button ui-widget ui-selectmenu-button-closed ui-corner-all" style="width: 80px;" aria-activedescendant="ui-id-1" aria-labelledby="ui-id-1" aria-disabled="false"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">전체</span></span>
</span>

(4)  JSP 전체가 필요한경우

<span class="ui-select-wrap">
  <label for="uiSelect2-button"><spring:message code="code.m10011" /></label><%--주야구분--%>
  <select id="uiSelect2" title="<spring:message code="code.m10011" />" class="ui-select" data-width="80">
  <c:choose>
  <c:when test="${not empty dgHtDivCodeList}">
  <option value="" ><spring:message code="code.m00595" /></option> <%--전체--%>
  </c:when>
  </c:choose>  
  <c:forEach var="dgHtDivCode" items="${dgHtDivCodeList}" varStatus="status">
  <option value="${dgHtDivCode.cd}" >${dgHtDivCode.nm}</option>
  </c:forEach>
  </select>
 </span>

(5) 선택하면 다음 단계에 영향을 주는 경우

<div class="row">
  <span class="ui-select-title">표준분류</span>

  <span class="ui-select-wrap">
  <label for="uiSelect4-button" class="color-gray">대계열</label>
  <select id="uiSelect4" title="공시년도" class="ui-select" data-width="240" style="display: none;">
  <option value="">2018</option>
  <option value="">2017</option>
  <option value="">2016</option>
  <option value="">2015</option>
  <option value="">2014</option>
  <option value="">2013</option>
  </select><span tabindex="0" id="uiSelect4-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="uiSelect4-menu" aria-haspopup="true" title="공시년도" class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget" style="width: 240px;"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">2018</span></span>
  </span>

  <span class="ui-select-wrap">
  <label for="uiSelect5-button" class="color-gray">중계열</label>
  <select id="uiSelect5" title="주야간" class="ui-select" data-width="240" style="display: none;">
  <option value="">전체</option>
  <option value="">주간</option>
  <option value="">야간</option>
  </select><span tabindex="0" id="uiSelect5-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="uiSelect5-menu" aria-haspopup="true" title="주야간" class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget" style="width: 240px;"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">전체</span></span>
  </span>

  <span class="ui-select-wrap">
  <label for="uiSelect6-button" class="color-gray">소계열</label>
  <select id="uiSelect6" title="학과특성" class="ui-select" data-width="240" style="display: none;">
  <option value="">전체</option>
  <option value="">전체</option>
  <option value="">전체</option>
  </select><span tabindex="0" id="uiSelect6-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="uiSelect6-menu" aria-haspopup="true" title="학과특성" class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget" style="width: 240px;"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">전체</span></span>

  </span>

</div>

 

2. input text

(1) html 소스

<span class="search-input-wrap">
<label for="search-keyword">학과명</label>
  <input type="text" id="search-keyword" title="학과명" class="w240">
</span>

(2) JSP 소스

<span class="search-input-wrap">
<label for="search-keyword">학과명</label>
  <input type="text" id="schTxt" class="w240" name="schTxt" value="${param.schTxt}" onKeyPress="if(event.keyCode==13) fn_doSelect();" placeholder="<spring:message code="code.m10027" />">
</span>

 

계속해서 추가됩니다.