'script'에 해당되는 글 23건

모달창 이동, 드래그 가 가능

[head]

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

[jsp]

<div class="side-menu" id="sideMenu">
    <menu>
        <ul class="nav nav-tabs nav-stacked">
            <li><a href="#myModal" data-backdrop="false" data-toggle="modal">Click Me</a>
            </li>
        </ul>
    </menu>
</div>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Settings</h4>

            </div>
            <div class="modal-body">
                <p>Settings</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

[script]

  $("#myModal").draggable({
      handle: ".modal-header"
  });

[css]

.modal
{
    overflow: hidden;
}
.modal-dialog{
    margin-right: 0;
    margin-left: 0;
}

• MOVE
  • 
  • 노을이야기 Click me
    • 

      • A link and paragraph is all we need.

    • A link and paragraph is all we need.

* ajax 파라미터 전송시 데이터 변환으로 주로 쓰임

serialize() : form element 데이터 속성을 갖는 값의 형식을 query string 형식인 &key=value 형식으로 변환해줌. 

$("#fromName").serialize();

serializeArray() : 위와 동일하며, 값의 형식을 {key  = value} 형식으로 변환해 줌.

$("#fromName").serializeArray();

* 자식의 영역을 감지하지 않음

mouseenter : 마우스가 영역에 올라가면 이벤트 발생

mouseleave : 마우스가 영역에서 내려오면 이벤트 발생

* 자식영역까지 들어가 감지

mouseover : 마우스가 영역에 올라가면 이벤트 발생

mouseout : 마우스가 영역에서 내려오면 이벤트 발생

<c:out value="${data.value}" escapeXml="false" />

jstl 사용시 ${data.value} 값에 <, > 와 같은 특수문자가 포함되어 오류가 뜨는 경우가 있다. 이때 escapeXml 값에 fasle 를 해주면 defalut로 escape되어 정상적으로 데이터를 화면에서 확인할 수 있다.

예전 프로젝트 하다가 CKEditor <P>태그를 DB에서

처리했던 기억이 있었는데 알고 보니 설정이 있었음.

js/ckeditor/config.js 에 아래 펑션을 넣어주니 바로 해결됨.

CKEDITOR.editorConfig = function( config ) {
    config.enterMode = CKEDITOR.ENTER_BR

};

- 호출(도시명, 도시ID, 위도경도)

http://openweathermap.org/current

- 코드

http://bugs.openweathermap.org/projects/api/wiki/Weather_Condition_Codes

- 데이터
http://bugs.openweathermap.org/projects/api/wiki/Weather_Data

소스 :weather.jsp

보내는 쪽(jsp) : escape(encodeURIComponent(document.forms[0].mdFaultIss.value))

- 일반적인 폼형식은 URL 인코딩을 지원하지만 AJAX는 URL 인코딩을 하지 않는다고 한다. 그래서 encodeURIComponent() 싸주고, 인코딩된 파라미터의 탈락을 막기 위해 escape() 써준다.

받는쪽(java) : URLDecoder.decode(CommUtil.getParameter(request, "mdFaultIss"), "UTF-8");

- 인코딩된 파라미터를 다시 디코딩을 해주면 정상적인 한글문자열을 확인 할 수 있다.

var dateDash = "2014" +"-"+ "11" +"-"+ "02";

var replace = dateDash.replace(/-/gi, '');

- '변경될 문자열'.(/무엇을/gi, '어떻게');   변경할 것인가.

jsp : replace.jsp