달력

4

« 2014/4 »

  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  
  •  

'2014/04'에 해당되는 글 3

  1. 2014.04.18 [jQuery] XML 데이터 파싱
  2. 2014.04.16 [jQuery] justGage 차트
  3. 2014.04.01 구글 지도 예제소스
2014.04.18 11:53

[jQuery] XML 데이터 파싱 CODE/jQuery 기초2014.04.18 11:53


$.ajax( {

url : 'xml.asp', //ajax로 접근해 데이터를 수집해 올 url을 지정 합니다.

type : 'post', //method를 지정 합니다. (get / post)

data : 'pNo=3&pName=k', //지정한 url으로 보낼 파라미터를 입력 합니다. (get / post 동일)

dataType : 'xml', //데이터를 주고 받는 형식 을 지정 합니다. (text, xml, json)

beforeSend : function() {

alert( 'url 접근 전 입니다 :) ');

//ajax 동작 전 수행하고 싶은 내용을 입력 합니다. (로딩 이미지 출력 등)

},

success : function( result ) {

alert( '오류 없이 url 접근과 response 획득이 완료 되었습니다 :)' );

//정상적으로 획득한 response 응답 데이터로 수행하고 싶은 내용을 입력 합니다. (실제 데이터 처리)

},

error : function( result ) {

alert( '오류가 발생 되었습니다' );

//오류 발생시 수행하고 싶은 내용을 입력 합니다.

},

complete : function() {

alert( 'ajax 동작이 완료 되었습니다 :)' );

//ajax 동작 완료 후 수행하고 싶은 내용을 입력 합니다. (로딩 이미지, 완료 문구 출력 등)

//success 또는 error 완료 후 수행 됩니다.

}

});


'CODE > jQuery 기초' 카테고리의 다른 글

[jQuery] XML 데이터 파싱  (0) 2014.04.18
Posted by 레이칸트
2014.04.16 20:28

[jQuery] justGage 차트 CODE/Chart 예제2014.04.16 20:28



<!doctype html>


<html>

  <head>

    <title>Customize style</title>

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

    

    <style>

      body {

        text-align: center;

      }

      

      #g1, #g2, #g3, #g4, #g5, #g6 {

        width:200px; height:160px;

        display: inline-block;

        margin: 1em;

      }

    </style>

    

    <script src="js/raphael.2.1.0.min.js"></script>

    <script src="js/justgage.1.0.1.min.js"></script>

    <script>

      var g1, g2, g3, g4, g5, g6;

      

      window.onload = function(){

      var g1 = new JustGage({

        id: "g1"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Custom Width",

        label: "",    

        gaugeWidthScale: 0.2          

      });

      

      var g2 = new JustGage({

        id: "g2"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Custom Shadow",

        label: "",    

        shadowOpacity: 1,

        shadowSize: 0,

        shadowVerticalOffset: 10        

      });

      

      var g3 = new JustGage({

        id: "g3"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Custom Colors",

        label: "",  

        levelColors: [

          "#00fff6",

          "#ff00fc",

          "#1200ff"

        ]          

      });

      

      var g4 = new JustGage({

        id: "g4"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Hide Labels",

        showMinMax: false       

      });

     

      

      var g5 = new JustGage({

        id: "g5"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Animation Type",

        label: "",  

        startAnimationTime: 2000,

        startAnimationType: ">",

        refreshAnimationTime: 1000,

        refreshAnimationType: "bounce"                

      });

      

      var g6 = new JustGage({

        id: "g6"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Minimal",

        label: "",  

        showMinMax: false,

        gaugeColor: "#fff",

        levelColors: ["#000"],

        showInnerShadow: false,        

        startAnimationTime: 1,

        startAnimationType: "linear",

        refreshAnimationTime: 1,

        refreshAnimationType: "linear"          

      });

      

        setInterval(function() {

          g1.refresh(getRandomInt(0, 100));

          g2.refresh(getRandomInt(0, 100));          

          g3.refresh(getRandomInt(0, 100));

          g4.refresh(getRandomInt(0, 100));

          g5.refresh(getRandomInt(0, 100));          

          g6.refresh(getRandomInt(0, 100));

        }, 2500);

      };

    </script>


</head>

  <body>    

    <div id="g1"></div>

    <div id="g2"></div>

    <div id="g3"></div>

    <div id="g4"></div>

    <div id="g5"></div>

    <div id="g6"></div>

  </body>

</html>


justgage.1.0.1.js

justgage.1.0.1.min.js

raphael.2.1.0.min.js

'CODE > Chart 예제' 카테고리의 다른 글

[jQuery] justGage 차트  (0) 2014.04.16
Posted by 레이칸트
2014.04.01 10:15

구글 지도 예제소스 CODE/jQuery 활용2014.04.01 10:15

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key= YOUKEY &sensor=false">
 </script>
 <script type="text/javascript">
 // 메인 가운데 마커
 var myLatlng = new google.maps.LatLng(37.524975,126.987135);
   
 //추가 마커
 var neighborhoods = [
    new google.maps.LatLng(37.524975,126.987135),
    new google.maps.LatLng(37.549061, 126.422975),
    new google.maps.LatLng(37.497622, 126.396110),
    new google.maps.LatLng(37.517683, 126.394393)
 ];
  
 var markers = [];
 var iterator = 0;
 var map;
 function initialize() {
    var mapOptions = {
    zoom: 12,
    center: myLatlng
 };
 map = new google.maps.Map(document.getElementById('DIV-ID'),mapOptions);
   drop();
 }
  
 function drop() {
   for (var i = 0; i < neighborhoods.length; i++) {
     setTimeout(function() {
       addMarker();
     }, i * 200);
   }
 }
  
function addMarker() {
   markers.push(new google.maps.Marker({
     position: neighborhoods[iterator],
     map: map,
     draggable: false,
     animation: google.maps.Animation.DROP
  }));
   iterator++;  
}
  
//지도 로드 이벤트
google.maps.event.addDomListener(window'load', initialize);
 
//지도 리사이즈 이벤트
google.maps.event.addDomListener(window"resize"function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});
</script>
                                                                                                                                                         

'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
[jQuery] jqGrid array 테이블  (0) 2014.05.08
구글 지도 예제소스  (0) 2014.04.01
Posted by 레이칸트