WEB Front (jquery, JS, HTML)

jquery 관련

https://blog.jquery.com/category/jquery/

기존 웹 프로젝트 소스에 data-role="content" 이런식으로 정의 되어있음
이 부분은 jQuery Mobile 페이지 구성시 영역에 해당된다.
page/header/content/footer

현재 jQuery 최신 버전은 3.6.4 이고 내가 하고 있는 프로젝트는 3.4.1 버전이다.
jQuery UI 최신 버전은 1.13이고 내가 하고 있는 프로젝트의 jQuery UI 버전은 1.12버전이다.

https://blog.jqueryui.com/2021/10/jquery-ui-1-13-0-released/

---

jQuery Mobile은 더 이상 지원되지 않습니다
jQuery Mobile 프로젝트의 상태에 대한 자세한 내용은 공지 블로그 게시물을 참조하십시오.

https://jquerymobile.com/

안정적인 버전
Version 1.4.5
jQuery 1.8 - 1.11 / 2.1

---

TAGS

<span></span> 태그는 <div></div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰입니다.
<div> 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점인데, 이는 CSS display 항목에서 세부 정보를 알 수 있습니다.
이 둘의 차이를 쉽게 설명하자면, <div>는 줄 바꿈이 되지만, <span>은 줄 바꿈이 되지 않다는 점입니다.

---

검색 form 이나 입력 form에 달력으로 날짜를 선택할때 하이픈(-)이 포함되어 있는 경우가 많은데
DB에 입력할때는 하이픈(-)을 제거해야 하는 경우가 있어서 날짜 형태를 변경하는 함수를 만들었습니다.
YYYY-MM-DD 형태를 YYYYMMDD 형태로 변경하고, 다시 YYYYMMDD 형태를 YYYY-MM-DD 형태로 변경하는 함수 입니다.

- YYYY-MM-DD 변환
    /**
     * YYYY-MM-DD 형태의 문자를 YYYYMMDD 형태로 변환
     * @param argDate
     * @returns {XML|string}
     */

    function fncDateToStr(argDate){
        var tmp = '';
        if(argDate !== undefined){
            var regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
            tmp = String(argDate).replace(/(^\s*)|(\s*$)/gi, '').replace(regExp, ''); // 공백 및 특수문자 제거
        }
        return tmp;
    }

- YYYYMMDD 형태 변환
    /**
     * YYYYMMDD 형태의 문자를 YYYY-MM-DD 형태로 변환
     * @param argStr : 변환할 데이터
     * @returns 변환된 데이터
     */

    function fncStrToDate (argStr){
        var retVal;
        if(argStr !== undefined && String(argStr) !== ''){
            var regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
            var tmp = String(argStr).replace(/(^\s*)|(\s*$)/gi, '').replace(regExp, ''); // 공백 및 특수문자 제거
           if(tmp.length <= 4){
                retVal = tmp;
            } else if(tmp.length > 4 && tmp.length <= 6){
                retVal = tmp.substr(0, 4) + '-' + tmp.substr(4, 2);
            } else if(tmp.length > 6 && tmp.length <= 8){
                retVal = tmp.substr(0, 4) + '-' + tmp.substr(4, 2) + '-' + tmp.substr(6, 2);
            } else {
                alert('날짜 형식이 잘못되었습니다.\n입력된 데이터:'+tmp);
                retVal = '';
            }
        }
        return retVal;
    }

---

cannot read properties of undefined (reading msie)

페이지 이동 하는데 jquery.history.js에서 오류가 난다. 아래 내용을 정의하여 추가한다.

jQuery.browser = {};
(function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
    }
})();

---

Filp Date picker

참고 사이트
http://jsfiddle.net/05542o8o/8/ 

<div class="ui-field-contain">
            <label for="mode6">DurationFlipBox</label>
            <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear"><input name="mode6" id="mode6" type="text" data-role="datebox" data-options="{&quot;mode&quot;:&quot;flipbox&quot;}" readonly="readonly"><a href="#" class="ui-input-clear ui-btn ui-icon-clock ui-btn-icon-notext ui-corner-all" title="Open Date Picker">Open Date Picker</a></div>
          </div>


 https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:mrte:ux_ui:ux_ui_controller_component_3.5