[javascript] 단어(구분자) 단위 반응형 줄바꿈

 

얼마전 개발자 오픈채팅방에서

가변적인 너비의 div안에 DB에서 가져온 텍스트들을 넣는데

div의 너비가 바뀔때마다 자동으로 줄바꿈이 되어야 하는걸 만들어야 하는데

잘 모르겠다 라는 질문이 있었다.

간단하게 css로 줄바꾸면 되는거 아닌가 했는데

콤마(,) 로 구분되어진 단어들이고 단어안에 띄어쓰기도 들어가 있다고 한다.

즉 콤마로 구분되어진 단어들이 너비에 따라 자동으로 줄바꿈이 되어야 하며

단어들은 띄어쓰기가 포함되어 있고 폰트의 크기도 가변적으로 변할 수 있다고 한다.

 

재밌어 보여서 대충 구현을 해 보았다.

jsbin으로 구현해 보았으니

 

https://jsbin.com/tomojibaku/1/edit?js,output 

 

JS Bin

Sample of the bin:

jsbin.com

 

이 링크에 가서 확인을 하면 된다.

 

코드는

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="textContatiner" class="txt-container">
    
  </div>
</body>
</html>
 cs

 

JS

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
var data = "일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈,육번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈";
setTxt();
 
// 너비가 바뀔때마다 셋팅을 해준다.
$( window ).resize(function() {  
setTxt();
});
 
 
 
function setTxt(){
    // 너비가 변할때마다 div컨테이너를 비워주고 다시 셋팅
  var container = $("#textContatiner");
  container.empty();
 
  var conW = container.width();
  var dataArr = data.split(",");
 
  // 폰트크기도 가변적으로 바뀔수 있기 때문에 1글자의 너비를 구한다.
  container.append($("<span id='test'>한</span>"));
  var oneW = $("#test").width()*2;
  $("#test").remove();
  
  var lineData = "";
  var subData = "";
  var lineNo = 0;
  var spId ="sp"+ lineNo;
  var sp = $("<span id='"+spId+"'></span>");
  container.append(sp);
  
 
  for (var i = 0; i <dataArr.length; i++) {
     subData = lineData;
     lineData = lineData+","+dataArr[i];
    sp.text(lineData);
    var spW = sp.width();
    if(spW > conW - oneW){
      sp.text(subData);
      sp.css("display","block");
      lineNo++;
      i--;
      spId ="sp"+ lineNo;
      sp = $("<span id='"+spId+"'></span>");
      container.append(sp);
      lineData = "";
    }
    console.log(spW);
  };
  
  
  
}
 cs

 

폰트가 바뀔수도 있으니 div안에 한글자를 넣어서 너비를 확인하고 클리어 시킨다음

콤마로 구분된것들을 하나씩 추가 하다가 일정 너비 이상이 되면

이전텍스트로 복원을 하고 새로운 span을 생성해 넣는 식이다.

더 깔끔하게 구현하려면 css도 좀 손봐야 하고

첫번째 문장에 들어가는 콤마 지우고 하면 쓸만할 것 같다.

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.02.19
javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07

[kendo ui] grid command destroy 안되는 현상 해결 방법

kendo ui의 grid 기능중 해당 라인을 삭제(제거) 하는 버튼을 추가 할수 있도록

 

command 의 destory가 있다.

 

그런데 해당 버튼을 클릭해도 dataSource의 destory가 아닌 create가 호출 되는 현상이 있는데

 

dataSource의 schema model에 지정하는 id값이 올바르지 못해서 그런것이다.

 

특히나 vo로 받아오는 경우엔 앞단어가 소문자로 치환되서 받아지는 것에 유의 하여야 한다

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
schema : {
            model : {
                id : "facility_ID",
                fields : {
                    fields : {
                        FACILITY_NM : {},
                        ASSET_CODE : {},
                        ENERGY_USE_ID : {},
                        CM_STANDARD : {},
                        INSTALLATION_DT : {},
                        EXPECTED_DAY : {},
                        PREVICOUS_DT : {},
                        EXPECTED_DT : {},
                    }
                }
            }
 cs

 

저기서 id라고 쓰여져 있는 부분에 id필드명이 정확히 입력이 되어야

 

destory가 호출이 된다.

저작자표시

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[kendo ui] treeView 선택된 노드 정보 가져오기  (0) 2018.05.15
[kendo ui] 켄도 ui bar, column 차트 모서리 radius 효과 넣기  (0) 2018.02.28
[kendo ui] Y축 값이 1 이하일땐 소수점 이상일땐 자연수, 천단위 콤마  (0) 2017.02.27
[css] css만으로 애니메이션 효과주는 방법  (0) 2016.10.07
[Kendo UI] 템플릿을 사용해 그리드 값 IF문 사용 하기( grid value use template for 'if')  (2) 2016.08.12
1
2
3
4
5
list.sort(function(a, b) { // 오름차순
    return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
  });
 
 
 cs

 

배열안의 id값이나 name 순서대로 재정렬 할때 사용 하는 방법

 

 

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[javascript] 단어(구분자) 단위 반응형 줄바꿈  (1) 2022.06.06
[JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.02.19
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var list = [{"name":"사과", "id":"a1"},{"name":"배", "id":"a2"},{"name":"사과", "id":"a1"},{"name":"바나나", "id":"a3"}......] ;
 
var resultArray = []; // 카운팅해서 반환할 결과값 배열
  list.map(item => {
    //for each item in arrayOfObjects check if the object exists in the resulting array
    if(resultArray.find(object => {
        if(object.Name === item.Name && object.id === item.id) {
            //if the object exists iterate times
            object.cnt++;
            return true;
            //if it does not return false
        } else {
            return false;
        }
    })){
    } else {
        //if the object does not exists push it to the resulting array and set the times count to 1
        item.cnt = 1;
        resultArray.push(item);
    }
  });
 
 
 cs

 

배열안에 중복된 객체를 제거하고 중복된 객체가 몇개인지 세는 방법.

 

 

 

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.02.19
javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28

자동차 경주 만들기 웹버전


심심해서 만들어본


자동차 경주 웹버전


자바스크립트 제이쿼리를 이용해서 만들었다


https://jsbin.com/diqiwiroho/1/edit?output


1. html

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
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <h1>자동차 경주</h1>
  <h4>경주할 자동차 대수를 입력 후 경주 시작을 누르시면 됩니다.</h4>
  <h4>이름적용 체크 박스 체크 후엔 자동차의 이름을 지정 할 수 있습니다.</h4>
  <h4>자동차 최대 입력 대수는 30대 입니다.</h4>
  <h4>트랙 최대 길이는 100 입니다.</h4>
  <h4>속도제한은 없습니다. 1000당 1초 입니다.</h4>
  <h4>만든 사람은 잘생긴 야매 개발자 In★ 입니다. 경주 할때마다 감사함을 느끼세요.</h4>
   <label for="nameCheck">이름적용</label><input id="nameCheck" type='checkbox' onchange="countCar();" />
  <br>
  <label for="nameCheck">트랙길이</label><input id="trackLength" type='number' onchange="countCar();" value="10"/>
  <br>
  <label for="nameCheck">속도(ms)</label><input id="raceSpeed" type='number' value="400"/>
  
  
  
  <br>
  <br>
  <label>경주할 자동차 대수</label>
  <input type="number" id="inputCarCnt" onchange="countCar();"/>
  
  <button onclick="startRace();">경주시작</button>
  <button onclick="countCar();">리셋</button>
  
  <div id="carNameContainer">
    
  
  </div>
  
  <div id="trackContainer" class="track-container">
  </div>
  
  <div id="finshBox">
  </div>
  
</body>
</html>
cs




2. css


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
.track-container{
  width:100%;
  display:inline-block;
  
}
.track{
  width:100%;
  float: left;
}
.car-label{
  float:left;
  display:inline-block;
  
}
.cell{
  border:1px solid;
  height:15px;
  width:15px;
  float:left;
}
.move{
  border:1px solid;
  height:15px;
  width:15px;
  float:left;
  background:black;
}
h4{
 margin:0px;
  margin-bottom:5px;
 font-size:15px;
  
}
cs



3. js

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
var carArr = [];
var finshNum = 0;
//var carNameArr = [];
 
function countCar(){
  carNameArr = [];
  carArr = [];
  finshNum = 0;
  var carCnt = $("#inputCarCnt").val();
  
  if(carCnt > 30){
    alert("최대 자동차 입력 개수는 30대 입니다.");
    return false;
  }
  
  
  var trackLen =  $("#trackLength").val();
  
  
  if(trackLen > 100){
    alert("최대 트랙 길이는 100 입니다.");
    return false;
  }else if(trackLen == 0 || trackLen ==""){
    alert("트랙길에 공백 혹은 0은 실행 할 수 없습니다.");
    return false;
  }
 
  
  var trackCon = $("#trackContainer");
  
  trackCon.empty();
   $("#finshBox").empty();
  $("#carNameContainer").empty();
  for(trackCnt=0; trackCnt < carCnt; trackCnt++){
    var track = $("<div class='track'></div>");
    track.append($("<div id='name"+trackCnt+"' class='car-label'>"+(trackCnt+1)+"번 차 : </div>"));
    
    for(cellCnt = 0; cellCnt < trackLen; cellCnt++){
      track.append($("<div class='cell'></div>"));
    }
    
    trackCon.append(track);
    
    if($("#nameCheck").prop("checked")){
        $("#carNameContainer").append($("<div><label>차이름 : </label><input class='car-nm-input' type='text' onkeyup='applyCarName();'/></div>"));
    }
    var carObj = {};
    carObj.num = trackCnt+1;
    carObj.name ="";
    carObj.move = 0;
    carObj.track = track;
    carObj.finshNum =0;
    carArr.push(carObj);
  }
}
 
 
function applyCarName(){
  var carNames = $(".car-nm-input");
  $.each(carArr, function(index, item) {
     item.name = carNames.eq(index).val();
    
    if(item.name != ""){
      $("#name"+index).text(item.name+" : ");
    }
    
  });
  
  
}
 
function startRace(){
  console.log("start");
  var startNmCheck = true;
  if($("#nameCheck").prop("checked")){
    $.each(carArr, function(index, item) {
      if(item.name == ""){
        startNmCheck = false;
      }
    });
   }
  
  var raceSpd =  $("#raceSpeed").val();
  
  if(raceSpd==""){
    alert("속도에 값을 입력 하여 주십시오");
    return false;
  }
  
  if(!startNmCheck){
    alert("경주할 차 이름을 모두 입력하여 주십시오.");
     return false;
  }
  
  
  
  
  moveAction();
}
 
 
function moveAction(){
  var finsh = true;
  
      $.each(carArr, function(index, item) {
      var moveVal = Math.round( Math.random()*10 );
      if(moveVal > 4){
        item.move++;
         var trackCell = item.track.find(".cell");
        trackCell.eq(0).attr("class","move");
      }
      
      
      if(item.finshNum==0){
        var trackLen =  $("#trackLength").val();
        if(item.move==trackLen){
          finshNum++;
          item.finshNum = finshNum;
          if($("#nameCheck").prop("checked")){
            $("#finshBox").append($("<div>"+finshNum+"등 "+item.name+"</div>"));
          }else{
            $("#finshBox").append($("<div>"+finshNum+"등 "+item.num+"번차</div>"));
          }
          
       
        }
        finsh = false;
      }
      
      
    });
  
  
  if(!finsh){
    setTimeout(function() {
       moveAction();
    }, $("#raceSpeed").val());
  }else{
   
  }
  
}
cs



이렇게 하면


트랙길이, 경주할자동차 대수, 시간 설정이 가능한 자동차 경주 만들수 있음


차이름에 메뉴이름 같은거 적어놓고 사다리 타기 대용으로도 할수 있음.

저작자표시

'Yame Daily Life' 카테고리의 다른 글

나의 부채 이야기  (0) 2019.10.25
[합죽선] 전주 미선공예사, 부채박물관 방문기  (0) 2019.10.11
[달빛조각사] 달조 개꿀팁 및 노하우 모음  (0) 2019.10.10
[리니지2 M] 리니지2 M 공식 영상 및 플레이 영상 모음  (0) 2019.09.06
[리니지2 M] 리니지2 모바일 사전 예약및 사전예약 방법  (2) 2019.09.06

[제이쿼리] 동적으로 DOM추가 append 함수


예전에 동적으로 셀렉트 박스 내용 바꿔주기 할때 사용했던 append인데


프로젝트 중간중간 자주 사용하는 부분이라 복사용으로 포스팅 합니다.


이전엔 for문을 썻는데 each가 훨씬 간략하고 편하다 따로 길이를 구해주지 않아도 되기 떄문에


아주 편하게 사용 할 수 있다.


each에서 key 부분은 배열을 넣었을땐 index 숫자값이 들어오고

object(map) 형태의 데이터가 들어갔을떈 키값을 반환해 준다.


value는 당연히 해당 키값이나 인덱스의 값이 들어감.


아래 예제로 써놓은 코드는 dataList라는 배열에 각각 a,b,c,d,e 라는 맵형태의


데이터가 들어가있는 경우를 산정하고 작성한 것.




1
2
3
4
5
6
7
8
9
10
var dataList = [a,b,c,d,e];
//안에 있는 자식 노드 비우기    
$("#failListUl").empty();
// 반복
    $.each(dataList , function(key, value) { 
        // 안에 넣을 dom 생성 
        var addContent = $("<li>"+value.tag_ID+"</li>");
        // dom에 생성한 dom 추가
        $("#failListUl").append(addContent);
    });
cs


저작자표시 비영리

'Yame Daily Life' 카테고리의 다른 글

[리뷰] 스노우 울프 엠팽 베이비 후기  (0) 2019.06.10
[합죽선] 부채를 좋아하는 사람 (전통을 손에 쥐기까지)  (3) 2019.05.20
[라그M] 니플헤임 안개숲 초월 퀘스트 NPC 위치!  (0) 2018.11.12
[라그M] 프리 비숍 룬판 정보(5.0 추가)  (2) 2018.10.10
[MSSQL] 날짜,시간 데이터 생성하기  (0) 2018.07.10

[자바스크립트] 자바스크립트 다국어 적용 방법



1. 자바스크립트


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
// 언어팩 선언.
$.lang = {};
 
$.lang.ko = {
    0: '자바스크립트 다국어 처리.',
    1: '안녕하세요',
    2: '오늘은 금요일 입니다.',
    3: '불금을 즐겨 보아요.'
};
 
$.lang.en = {
    0: 'Javascript Language Localization.',
    1: 'Hello.',
    2: 'Today is Friday',
    3: 'Fire~!!'
};
    
$.lang.ja = {
    0: 'JavaScriptの言語',
    1: 'こんにちは',
    2: '今日は金曜日です。',
    3: 'ガンバレ~!!'
};
 
/**
* setLanguage 
* use $.lang[currentLanguage][languageNumber]
*/
function setLanguage(currentLanguage) {
  console.log('setLanguage', arguments);
  
  $('[data-langNum]').each(function() {
    var $this = $(this); 
    $this.html($.lang[currentLanguage][$this.data('langnum')]); 
  });    
}  
 
// 언어 변경
$('button').click(function() {
  var lang = $(this).data('lang');
  setLanguage(lang); 
});
cs





2. HTML


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
  <meta charset="utf-8">
  <title>자바스크립트 다국어 처리.</title>
</head>
<body>
  <div id="wrap">
    <h1 data-langNum="0">자바스크립트 다국어 처리</h1>
    <button data-lang="ko">한국어</button>
    <button data-lang="ja">일본어</button>
    <button data-lang="en">영어</button>
    <hr>
  
    <h2 data-langNum="1">안녕하세요</h2>
    <h2 data-langNum="2">오늘은 금요일 입니다.</h2>
    <h2 data-langNum="3">불금을 즐겨 보아요.</h2>
  </div>
</body>
</html>
cs





출처 : http://jsbin.com/losejo/edit?html,js,output

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13

[안드로이드] 웹뷰 자바스크립트와 안드로이드 자바 연동 방법


안드로이드의 웹뷰를 사용해 개발을 하다 보면 웹뷰에서 띄운 자바스크립트와


안드로이드의 자바 소스간에 연동을 해야 하는 경우가 생긴다



즉 자바스크립트에서 안드로이드 메소드를 호출 하거나


안드로이드에서 자바스크립트 함수를 호출해야 하는 경우인데.


그 방법에 대해서 알아 보도록 하자.



1. mainActivity.java 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final DBHelper dbHelper = new DBHelper(getApplicationContext(), "MoneyBook.db", null, 1);
        // 웹뷰 셋팅팅
        mWebView = (WebView) findViewById(webView);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl(myUrl + "/html/test.html");
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.setWebViewClient(new WebViewClientClass());
    
 
        // Bridge 인스턴스 등록
        mWebView.addJavascriptInterface(new AndroidBridge(mWebView, dbHelper, newtwork), "HybridApp");
 
 
 
    }
cs



메인 액티비티의 oncreate 메소드에 웹뷰 셋팅을 해놓고 그 아래에 안드로이드브릿지를 등록 한다.



2. AndroidBridge.java


1번의 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
57
58
59
60
61
62
package com.xxx.xxxxx;
 
import android.os.Handler;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
 
import java.text.SimpleDateFormat;
import java.util.Date;
 
/**
 * Created by Administrator on 2017-08-03.
 */
 
public class AndroidBridge {
    private final Handler handler = new Handler();
    private WebView mWebView;
    private DBHelper dbHelper;
    private  boolean newtwork;
 
    // 생성자
    // 따로 사용할일 없으면 이거 안만들고 위의 변수도 안만들어도 됨.
    public AndroidBridge(WebView mWebView, DBHelper dbHelper, boolean newtwork) {
        this.mWebView = mWebView;
        this.dbHelper = dbHelper;
        this.newtwork = newtwork;
    }
 
    // DB데이터 가져오기
    @JavascriptInterface
    public void requestData() { // must be final
        handler.post(new Runnable() {
            public void run() {
                Log.d("HybridApp", "데이터 요청");
                String test  =  dbHelper.getResult();
                Log.d("HybridApp", test);
                mWebView.loadUrl("javascript:getAndroidData('"+test+"')");
            }
        });
    }
 
    // DB에 데이터 저장하기
    @JavascriptInterface
    public void saveData(final String item, final int num) { // must be final
        handler.post(new Runnable() {
            public void run() {
                Date d = new Date();
 
                String s = d.toString();
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
 
                dbHelper.insert(sdf.format(d), item, num);
                Log.d("HybridApp", "데이터 저장");
                String test  =  dbHelper.getResult();
                mWebView.loadUrl("javascript:getAndroidData('"+test+"')");
            }
        });
    }
 
 
 
}
cs



DB데이터 가져온다는 내용은 신경쓰지 말자


일단 1번과 2번을 완료 했다면 안드로이드에서 할일은 끝났다.


여기서 봐야 할 것은


30번 43번 라인의 어노테이션이다. API17이상부터 저 어노테이션을 달아주지 않으면


정상 작동하지 않는다.


그리고 31 44번의 requestData, saveData 이 메소드명이 자바스크립트에서 호출하는 이름이 된다.


그리고 37 55번라인은 안드로이드에서 자바스크립트로 데이터를 날려주면서 


자바스크립트 function을 호출하는 부분이다.



3. javascript


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
$(function(){
    window.HybridApp.requestData();
});
 
function saveData(){
    var item = $("#item").val();
    var num = $("#num").val();
    window.HybridApp.saveData(item, num);
}
 
 
function getAndroidData(data){
    alert(data);
 
    var dataArr = data.split("*nn*");
    $("#testDiv").empty();
    for(var count=0; count < dataArr.length; count++){
        $("#testDiv").append("<p>"+dataArr[count]+" </p>");
    }
 
}
cs



자바스크립트에서 안드로이드 메소드를 호출할땐


window.1의 15번라인에서 선언한 이름.2에서 선언한 메소드명();


이런식으로 호출을 해주면 된다.


만약 3번라인의 리퀘스트데이터를 호출하면


2의 31번 메소드가 응답하며 2의 37번 라인이 동작해 자바스크립트 3의 13번function이 동작한다.




물론 위에 보는 것 처럼 안드로이드와 자바스크립트간의 텍스트 데이터도 전송이 가능 하다.

저작자표시 비영리

'Yame Programmer > Android' 카테고리의 다른 글

[안드로이드] Error:Execution failed for task ':app:transformClassesWithDexForDebug'. 오류 해결 방법  (0) 2017.09.04
[안드로이드] 기기의 카메라에 오류가 생겼습니다. 기기를 재시작해야할수도있습니다 해결방법  (0) 2017.08.08
[안드로이드] androidBridge they will not be visible in API 17 오류 해결 방법  (0) 2017.08.03
[안드로이드] 인터넷 연결상태 확인하는 방법  (1) 2017.08.03
[안드로이드] 간단하게 웹뷰 구현 예제  (12) 2017.08.03

select 와 option은 웹사이트를 구현할때 아주 많이 사용되며 유용한 태그 이다.


append 함수와 empty함수를 사용해 셀렉트박스 안에 있는 선택 옵션들을 HTML에 고정으로 만들어 두는 것이 아닌


특정 이벤트가 앞에 있는 셀렉트박스의 다른 값을 선택할때마다 동적으로 내용이 바뀌게 하는 방법을


알아 보도록 하자.



예를들어 1번 셀렉트 박스와 2번 셀렉트 박스가 있을떄


사용자가 1번 셀렉트 박스의 값을 선택할때마다 2번 셀렉트 박스의 선택 옵션의 내용이 바뀌도록 말이다.


혹은 1번 셀렉트 박스의 값이 바뀔때마다가 아닌 그 어떠한 이벤트라도 가능 하다.



1
2
3
4
5
6
7
8
<select id="select1" onchange="itemChange()">
<option>키보드</option>
<option>마우스</option>
<option></option>
</select>
 
<select id="select2">
</select>
cs


먼저 위와 같은 코드로 셀렉트 박스가 2개 있을때


1번 셀렉트 박스의 값이 바뀔때마다 2번 셀렉트 박스의 옵션들이 바뀌도록 만들어 보자




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
function itemChange(){
 
var keyboard = ["갈축","청축","적축"];
var mouse = ["광마우스","유선마우스","비싼마우스","미키마우스"];
var monitor = ["17인치","22인치","24인치","26인치"];
 
var selectItem = $("#select1").val();
 
var changeItem;
 
if(selectItem == "키보드"){
changeItem = keyboard;
}
else if(selectItem == "마우스"){
changeItem = mouse;
}
else if(selectItem == "모니터"){
changeItem =  monitor;
}
 
$('#select2').empty();
 
for(var count = 0; count < changeItem.size(); count++){                
                var option = $("<option>"+changeItem[count]+"</option>");
                $('#select2').append(option);
            }
 
}

cs

   


여기서 주목할 것은


empty()와 append 이다



기존에 들어가 있는 2번 셀렉트 박스 안의 옵션들을 깨끗하게 지우기 위해서 empty함수를 사용 하였고


append 함수를 이용해 셀렉트 박스 안에 만들어진 option을 삽입한 것이다.


이를 응용하면 Ajax를 이용해 위의 스크립트와 같은 하드코딩이 아닌 좀더 다이나믹한 웹서비스를 제공해 줄수도 있다.







저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
제이쿼리 foreach 사용하기  (1) 2016.06.15
[JavaScript] object 객체의 속성 동적 추가  (0) 2016.03.07
[javaScript] setInterval / 시간단위 반복  (0) 2015.07.01

켄도 ui 라인차트의 bullet(라인 사이의 동그라미)을 없애는 방법 입니다.


라인을 그려줄때 동그란 마커 없이 깔끔하게 그려주고 싶을때 사용 합니다.


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
 $("#chart").kendoChart({
                title: {
                    text: "Gross domestic product growth \n /GDP annual %/"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "line",
                    style: "smooth",
                   markers:{
                                  size:1
                                  }
                },
                series: [{
                    name: "India",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
                  
                },{
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                },{
                    name: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                },{
                    name: "Haiti",
                    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
                }],
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                    majorGridLines: {
                        visible: false
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
cs



이전과 같은 켄도 ui 라인차트 데모페이지의 첫번째 소스 입니다.


저기에서 


seriesDefaults 속성에


 markers:{
           size:1
       }


markers 라는 속성을 추가 하였고 사이즈는 1로 지정 하였습니다.


0으로 지정하면 마우스오버 되었을때 엄청 커다란 동그라미가 생기네요


시리즈 디폴트에 마커스 사이즈를 1로 지정해 놓으면 모든 라인에 bullet가 사라지게 됩니다.


혹은 특정 라인에만 bullet를 없애고 싶을땐




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
series: [{
                    name: "India",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
                      markers:{
                              size:1
                           }
                },{
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727],
                  markers:{
                           size:1
                         }
                },{
                    name: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                },{
                    name: "Haiti",
                    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
                }],
cs



시리즈에 들어가는 속성에 마커스를 따로 지정해 주면 됩니다.


저작자표시 비영리

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[Kendo UI] 템플릿을 사용해 그리드 값 IF문 사용 하기( grid value use template for 'if')  (2) 2016.08.12
[CSS] 선택자 브라우저별 지원여부  (0) 2016.06.21
[kendo ui] 켄도 ui 차트 색상 지정하기  (0) 2016.06.21
[kendo ui] 차트 valueAxes 라벨 위치 지정 하기  (0) 2016.06.20
[Kendo ui] 켄도 그리드 값이 null 일때 대체문자 사용 하기[template 사용]  (0) 2016.06.20

+ Recent posts

티스토리툴바