..
DEV/html/css/js/img (61)
접근성을 해치지 않는 자바스크립트의 사용 - 신현석(Hyeonseok Shin)
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

'DEV > html/css/js/img' 카테고리의 다른 글

[jquery Events trigger] 트리거  (0) 2010.08.02
Global Object : javastring 내장 객체  (0) 2010.05.03
Boolean : javascript 내장 객체  (0) 2010.05.03
  Comments,     Trackbacks
Global Object : javastring 내장 객체
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Infinity 무한수를 의미한다.
NaN Not a Number. 숫자가 아님을 의미
escape() Encoding함수
eval() 문자열을 수식으로 간주하여 계산한다.
isFinite() 유한수인지 Test한다.
isNaN() 숫자가 아닌지(NaN) Test한다.
parseFloat() 문자열을 소수로 변경
parseInt() 문자열을 정수로 변경
unescape Decoding함수

[출처] http://deadfire.hihome.com/jscript/jscript20.html
  Comments,     Trackbacks
Boolean : javascript 내장 객체
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
참인 경우

var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Richard"); //String 값이 있거나 true 인경우

거짓인 경우

var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

[레퍼런스] http://www.w3schools.com/js/js_obj_boolean.asp

'DEV > html/css/js/img' 카테고리의 다른 글

Global Object : javastring 내장 객체  (0) 2010.05.03
date : javascript 내장 객체  (0) 2010.05.03
프린트(print)에 관련된 내용 정리  (0) 2010.04.29
  Comments,     Trackbacks
date : javascript 내장 객체
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

자바스크립트에서 현재 시간을 만들게 되면, 브라우저의 시간을 가져오게 된다는 점이다. 그 브라우저의 시간이라는 것이 곧 윈도우즈의 시간을 의미한다. 이 윈도우즈의 시간이라는 것은 사용자가 언제든 변경할 수 있는 값이다. 바로 여기에 문제가 있다. 일부 개발자들은 사용자들의 현재 시간을 자바스크립트로 구해서 서버 프로그램에서 사용하는 경우가 있는데 대단히 위험한 발상이다.

[출처] http://deadfire.hihome.com/jscript/jscript15.html

[레퍼런스] http://www.w3schools.com/jsref/jsref_obj_date.asp
  Comments,     Trackbacks
프린트(print)에 관련된 내용 정리
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


1. jquery : jquery에서 프린트 관련 플러그인을 제공함. ( jquery.jqprint.0.3.js )

데모 페이지 : http://www.recoding.it/wp-content/uploads/demos/jqprint-demo.htm

2. 페이지 오픈시 자동으로 프린트 dialogue box가 열리도록 하기

  function printpage() {

  window.print();

  }
<body onload="printpage()">

혹은

window.onload = function(){ window.print(); }

3. frame안의 내용만 프린트 하기

if(window.print){

top.otherframe.focus();

top.otherframe.print();

}

4. css : print 모드에서만 적용되는 css

<style type="text/css" media="print">
  .print_close {display:none;}
 </style>

5. 참고 URL

- javascript print 관련 qna 를 정리한 사이트 :
http://www.irt.org/script/print.htm


http://www.cadvance.org/?leftmenu=doc/include/total_menu.asp&mainpage=doc/java/object/iframe_object.asp

  Comments,     Trackbacks
JQuery AlphaNumeric Plugin 한글 문제 수정
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

[출처] http://suyeong.net/
웹페이지 개발하다보면 숫자만 입력받는 경우나 문자만 입력받아야 하는 경우가 종종 있는데

 

Native Javascript로 구현할 수도 있겠지만

JQuery를 사용한다면 Plugin을 이용하면 JQuery의 Selector를 사용할 수 있어서 좋습니다.

 

숫자나 영문자만 입력받거나, 추가로 일부 특수문자도 입력허용하도록 하는
jQuery AlphaNumeric 라는 Plugin을 찾았는데 문제가 좀 있네요.

 

개발자 하신 분이 이역만리에 떨어져 있는 사람들까지는 미처 신경쓰지 못해

숫자만 입력받도록 하든 영문자만 입력받도록 하든 한글은 써집니다.

그리고 어떤 이유에서 인지는 모르겠으나... Underscore('_') 도 항상 허용됩니다.


그래서 조금 수정을 했습니다.

 

먼저 한글문제를 해결하기 위해서 강조된 2군데 라인을 찾아서 (원본 기준으로 60, 76 라인입니다.)

01.$.fn.numeric = function(p) {
02.    var az = "abcdefghijklmnopqrstuvwxyz";
03.    az += az.toUpperCase();
04.    p = $.extend({
05.        nchars: az
06.      }, p);   
07.    return this.each (function()
08.        {
09.  
10.            $(this).alphanumeric(p);
11.        }
12.    );
13.};
14.  
15.$.fn.alpha = function(p) {
16.    var nm = "1234567890";
17.    p = $.extend({
18.        nchars: nm
19.      }, p);   
20.    return this.each (function()
21.        {
22.  
23.            $(this).alphanumeric(p);
24.        }
25.    );  
26.};

 

이렇게 수정합니다.

1.return this.each (function()
2.    {
3.        $(this).css('ime-mode', 'disabled');
4.        $(this).alphanumeric(p);
5.    }

 

다음, Underscore는 원본기준 6번 라인에 특수문자가 죽 나열되어 있는 곳에 아래같이 underscore 를 하나 끼워 넣습니다.

1.p = $.extend({
2.    ichars: "!@#$%^&*()+=[]\\\';,/{}|\":<>?~`.-_ ",
3.    nchars: "",
4.    allow: ""
5.  }, p);

 

아래는 간단한 사용법입니다.


  1. 숫자만 입력 허용
    1.$('#test').numeric();
  2. 영문자만 입력 허용
    1.$('#test').alpha();
  3. 영문 + 숫자 입력 허용
    1.$('#test').alphanumeric();
  4. 숫자 + comma + dot 입력 허용 (위에서 막아버린 underscore 도 필요한 경우 아래와 같이 allow에 추가 하면 됩니다.)
    1.$('#test').numeric({allow:".,"});

 


  Comments,     Trackbacks
Jquery 플러그인 제공 사이트 정리
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1. recoding 사이트 : 대표적으로 프린트 관련 플러그인 jqprint 제공
http://www.recoding.it/

2. jquery tool 사이트
: 다양하고 고급스러운 플러그인 제공. 이미지 갤러리, 플래쉬 플래이어가 좋아 보임

http://flowplayer.org/tools/index.html

http://121.88.23.32:8080/article.jsp?idx=100000026

http://hilldan.springnote.com/pages/5254437

20가지 재미있는 jquery 메소드
http://net.tutsplus.com/tutorials/javascript-ajax/20-helpful-jquery-methods-you-should-be-using/

자주 보면 도움이 될만한 사이트 jquery tip 좋은거 같음.. 웹소식도
http://net.tutsplus.com/page/3/?s=jquery

★참고★

로딩바 생성 사이트 : http://www.ajaxload.info/

'DEV > html/css/js/img' 카테고리의 다른 글

JQuery AlphaNumeric Plugin 한글 문제 수정  (0) 2010.04.26
[jquery plugin] jquery-form-validate  (0) 2010.04.09
dialog 우선 순위 높이기  (0) 2009.12.31
  Comments,     Trackbacks
[jquery plugin] jquery-form-validate
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

폼체크 할때 유용하다. 디자인도 심플하다. 

http://code.google.com/p/jquery-form-validate/

'DEV > html/css/js/img' 카테고리의 다른 글

Jquery 플러그인 제공 사이트 정리  (0) 2010.04.23
dialog 우선 순위 높이기  (0) 2009.12.31
[ jquery ] datepicker 옵션 정리  (0) 2009.08.22
  Comments,     Trackbacks
dialog 우선 순위 높이기
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
다이얼로그 open시 IE6버전에서는

다이얼로그에 뒤에 존재하는 셀렉트 박스가 보이는 경우가 발생한다.

이를 해결하기 위해서는 bgiframe을 사용한다.

<script type="text/javascript" src="../jquery/external/bgiframe/jquery.bgiframe.pack.js"></script>

라이브러리 추가 후 bgiframe: true 옵션추가

$('#id).dialog({
                 width: 640,
                 height: 'auto',
                 resizable: false,
                 autoOpen: false,
                 bgiframe: false,
                 modal: true,
                bgiframe: true,
                 position: 'center',
                 buttons: {
                     닫기: function(){
                         $('#menuLink').dialog('close');
                         $(this).dialog('close');
                         $(this).html('');
                     }
                 }
             }); 

'DEV > html/css/js/img' 카테고리의 다른 글

[jquery plugin] jquery-form-validate  (0) 2010.04.09
[ jquery ] datepicker 옵션 정리  (0) 2009.08.22
jquery radio checked, select option selected  (0) 2009.06.02
  Comments,     Trackbacks
[ jquery ] datepicker 옵션 정리
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
1. 과제방 구현 시 현재 이전 날 선택을 막기  위해 사용한 옵션

maxDate: '+90d'  : 현재를 기준으로 이후 날짜 선택 범위
minDate: '-0d' : 현재를 기준으로 이전 날짜 선택 범위 ( -0d : 현재 부터 선택 가능 )

'DEV > html/css/js/img' 카테고리의 다른 글

dialog 우선 순위 높이기  (0) 2009.12.31
jquery radio checked, select option selected  (0) 2009.06.02
jquery selector , attrivutes, traversing  (0) 2009.04.13
  Comments,     Trackbacks