'js'에 해당되는 글 3건

  1. 2013.07.27 JQury 달력
  2. 2013.03.20 JQuey 심볼 바꾸기
  3. 2012.07.25 jQuery-cookie Plugin
js2013. 7. 27. 15:43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> new document </title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="./jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="./jquery-ui-1.8.7.min.js"></script>

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

<style type="text/css">

<!--

.ui-datepicker { font:12px dotum; }

.ui-datepicker select.ui-datepicker-month, 

.ui-datepicker select.ui-datepicker-year { width: 70px;}

.ui-datepicker-trigger { margin:0 0 -5px 2px; }

-->

</style>

<script type="text/javascript">

jQuery(function($){

    $.datepicker.regional['ko'] = { // Default regional settings

        closeText: '닫기',

        prevText: '이전달',

        nextText: '다음달',

        currentText: '오늘',

        monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',

        '7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],

        monthNamesShort: ['1월','2월','3월','4월','5월','6월',

        '7월','8월','9월','10월','11월','12월'],

        dayNames: ['일','월','화','수','목','금','토'],

        dayNamesShort: ['일','월','화','수','목','금','토'],

        dayNamesMin: ['일','월','화','수','목','금','토'],

        weekHeader: 'Wk',

        dateFormat: 'yy-mm-dd', // [mm/dd/yy], [yy-mm-dd], [d M, y], [DD, d MM]

        firstDay: 0,

        isRTL: false,

        showMonthAfterYear: true,

        yearSuffix: ''};


    $.datepicker.setDefaults($.datepicker.regional['ko']);


    $('#datepicker').datepicker({

        showOn: 'both', // focus / button / both

        showAnim: 'fadeIn', // slideDown/fadeIn/blind/bounce/clip/drop/fold/slide

        showOptions: {}, // Options for enhanced animations

        defaultDate: null, // +/-number for offset from today, null for today

        appendText: '', // Display text following the input box, e.g. showing the format

        buttonText: '달력입니다', // Text for trigger button

        buttonImage: 'calendar.gif', // URL for trigger button image

        buttonImageOnly: true, // 버튼만 누를 경우 달력 표시 true/false

        hideIfNoPrevNext: false, // True to hide next/previous month links

        navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links

        gotoCurrent: false, // True if today link goes back to current selection instead

        changeMonth: false, // True if month can be selected directly, false if only prev/next

        changeYear: false, // True if year can be selected directly, false if only prev/next

        yearRange: 'c-10:c+10', // Range of years to display in drop-down,

            // either relative to today's year (-nn:+nn), relative to currently displayed year

            // (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n)

        showOtherMonths: true, // 나머지 날짜도 화면에 표시, 선택은 불가

        selectOtherMonths: false, // 나머지 날짜에도 선택을 하려면 true

        showWeek: false, // True to show week of the year, false to not show it

        calculateWeek: this.iso8601Week, // How to calculate the week of the year,

            // takes a Date and returns the number of the week for it

        shortYearCutoff: '+10', // Short year values < this are in the current century,

            // > this are in the previous century,

            // string value starting with '+' for current year + value

        minDate: null, // The earliest selectable date, or null for no limit

        maxDate: null, // +0d 하면 오늘 이후는 선택못함, null 은 제한없음

        duration: 'fast', // Duration of display/closure

        beforeShowDay: null, // Function that takes a date and returns an array with

            // [0] = true if selectable, false if not, [1] = custom CSS class name(s) or '',

            // [2] = cell title (optional), e.g. $.datepicker.noWeekends

        beforeShow: null, // Function that takes an input field and

            // returns a set of custom settings for the date picker

        onSelect: null, // Define a callback function when a date is selected

        onChangeMonthYear: null, // Define a callback function when the month or year is changed

        onClose: null, // Define a callback function when the datepicker is closed

        numberOfMonths: 1, // Number of months to show at a time

        showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0)

        stepMonths: 1, // Number of months to step back/forward

        stepBigMonths: 12, // Number of months to step back/forward for the big links

        altField: '', // Selector for an alternate field to store selected dates into

        altFormat: '', // The date format to use for the alternate field

        constrainInput: true, // The input is constrained by the current date format

        showButtonPanel: true, // True to show button panel, false to not show it

        autoSize: false // True to size the input for the date format, false to leave as is

    });

});

</script>

</head>


<body>


Date: <input type="text" id="datepicker" />


</body>

</html>



Posted by 나웃기면백원
js2013. 3. 20. 18:10

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
    var $JQuery = jQuery.noConflict();
</script> 

Posted by 나웃기면백원
js2012. 7. 25. 16:32

jquery.cookie.js 를 다운( https://github.com/carhartl/jquery-cookie )받아 import 한다.

<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="/js/jquery.cookie.js"></script>

 

<쿠키생성>

1. 세션 쿠키(Session Cookie)

세션 쿠키는 브라우저 열려있는 동안만 유지된다

$.cookie('key' , 'value');

 

2. 만료일 지정한 쿠키

$.cookie('key' , 'value', { expires : 값 });

값의 단위는 일(日)단위 이다

 

주의할 점은 위 생성방식 모두 디폴트로 쿠키가 만들어진 페이지 경로에만 쿠키가 적용된다는 점이다

고로 사이트의 모든 페이지에 쿠키를 적용하려면 아래와 같이 해야 한다

$.cookie('key' , 'value', { expires : 값, path : '/' });

$.cookie('key' , 'value', { path : '/' });

 

<쿠키 읽기>

$.cookie('key');

위처럼 하면 저장된 값을 반환한다. 해당 key가 없다면 null 반환

 

<쿠키삭제>

$.cookie('key', null);

삭제시 주의할 점은 path 옵션을 주어 쿠키를 만들었다면 삭제할때 역시 같은 path 옵션을 주어야 한다

 

<쿠키 생성시 옵션 항목>

expires : 365

쿠키 만료를 일단위로 설정한다 생략하면 세션 쿠키로 만들어진다

 

path : '/'

쿠키가 적용되는 페이지 경로. 사이트 전체 페이지에 적용하려면 위와 같이 슬래쉬(/)를 넣는다. 생략하면 쿠키가 생성된 페이지 경로에만 적용된다

 

domain : 'domain.com'

쿠키가 적용될 도메인 디폴트가 쿠키가 만들어진 도메인이다 이건 뭐 만질 일이 거의 없을 듯...

 

secure : true

디폴트는 false 다. true로 설정하면 쿠키전송은 https 프로토콜로만 가능하다

 

raw : true

디폴트는 false이다 false 일 경우는 쿠키는 생성되거나 읽을 떄 기본적으로 인코딩/디코딩을 한다(encodeURIComponent / decodeURIComponent 이용)

Posted by 나웃기면백원