편집토론문서 역사

"JQuery"의 두 판 사이의 차이

imported>Bbon
imported>Bbon
 
(같은 사용자의 중간 판 하나는 보이지 않습니다)
1번째 줄: 1번째 줄:
−
=jQuery UI=
+
=jQuery=
 +
[http://jquery.com jQuery.com]
 +
 
 +
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
 +
 
 +
[http://learn.jquery.com Learn jQuery]
 +
 
 
jQuery CDN
 
jQuery CDN
−
<syntaxhighlight lang="html5"><link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" media="all">
+
 
−
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
+
==Plugins ==
−
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
+
=== maskMoney===
−
<script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-ko.js" charset="utf-8"></script>
+
금액을 표시할 때 사용하면 편리하다.
−
<script type="text/javascript" src="http://jqueryui.com/ui/i18n/jquery.ui.datepicker-ko.js" charset="utf-8"></script>
+
[http://plugins.jquery.com/maskmoney/ maskMoney]
 +
<syntaxhighlight lang="javascript"><script type="text/javascript">
 +
    $(document).ready(function () {
 +
        $('.numericEditor').maskMoney({ precision: 0 });  // amskMoney 적용
 +
        $('.numericEditor').maskMoney('mask');            // 텍스트 포맷팅
 +
    });
 +
</script>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
=jQuery UI=
  
 
==Widget==
 
==Widget==

2013년 8월 1일 (목) 06:39 기준 최신판

jQuery

jQuery.com

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Learn jQuery

jQuery CDN

Plugins

maskMoney

금액을 표시할 때 사용하면 편리하다. maskMoney 

<script type="text/javascript">
    $(document).ready(function () {
        $('.numericEditor').maskMoney({ precision: 0 });  // amskMoney 적용
        $('.numericEditor').maskMoney('mask');             // 텍스트 포맷팅
    });
</script>

jQuery UI

Widget

datePicker

한글화 적용 

$(function() {
      $.datepicker.regional['ko'] = {
  closeText: '닫기',
  prevText: '이전달',
  nextText: '다음달',
  currentText: '오늘',
  monthNames: ['1월','2월','3월','4월','5월','6월',
  '7월','8월','9월','10월','11월','12월'],
  monthNamesShort: ['1월','2월','3월','4월','5월','6월',
  '7월','8월','9월','10월','11월','12월'],
  dayNames: ['일','월','화','수','목','금','토'],
  dayNamesShort: ['일','월','화','수','목','금','토'],
  dayNamesMin: ['일','월','화','수','목','금','토'],
  weekHeader: 'Wk',
  dateFormat: 'yy-mm-dd',
  firstDay: 0,
  isRTL: false,
  duration:200,
  showAnim:'show',
  showMonthAfterYear: true,
  yearSuffix: '년'};
      $.datepicker.setDefaults($.datepicker.regional['ko']);
});

기간체크 

<script>
/*
jQuery DatePicker 를이용하여 기간설정 유효성 적용 
*/
  $(function() {
 
    //시작일
    $( "#from" ).datepicker({
    numberOfMonths: 1,
        dateFormat: "yy-mm-dd",
        showOn: "button",
    buttonImage: "이미지경로",
    buttonImageOnly: true,
        onSelect: function( selectedDate ) {
           var option = this.id == "from" ? "minDate" : "maxDate",
           instance = $( this ).data( "datepicker" ),
           date = $.datepicker.parseDate(
           instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
           selectedDate, instance.settings );
           jQuery( "#from, #to" ).not( this ).datepicker( "option", option, date );
       }
    });
 
    //종료일
    $( "#to" ).datepicker({
    numberOfMonths: 1,
        dateFormat: "yy-mm-dd",
        showOn: "button",
        buttonImage: "이미지경로",
    buttonImageOnly: true,
        onSelect: function( selectedDate ) {
           var option = this.id == "from" ? "minDate" : "maxDate",
           instance = $( this ).data( "datepicker" ),
           date = $.datepicker.parseDate(
           instance.settings.dateFormat ||
           $.datepicker._defaults.dateFormat,
           selectedDate, instance.settings );
           jQuery( "#from, #to" ).not( this ).datepicker( "option", option, date );
        }
     });
  });
</script>

<input type="text" id="from" name="from" style="border: 1px solid #eee; margin:2px;" size="10"> ~ 
<input type="text" id="to" name="to" style="border: 1px solid #eee; margin:2px;" size="10">