Selectbox

셀렉트박스의 모든것.



셀렉트박스나 체크박스나 사용할 때 일단 구글링.
아는것도 생각이 잘 안나서 맨날 구글링을 함.
근데 진짜 셀렉트박스사전같은 대박 사이트를 찾아냄.


셀렉트박스로 할 수 있는 거의 모든것이 적혀있다.


원본사이트는 저 위의 사이트이고

어떤 분이 또 잘 정리해둔 사이트가 있다.


아래의 내용은 거기서 퍼온것이고

해당 블로그주소는 요기요기요기요. http://egloos.zum.com/tiger5net/v/5667935



1. jQuery로 선택된 값 읽기

 

$("#selectBox option:selected").val();

$("select[name=name]").val();

 

2. jQuery로 선택된 내용 읽기

 

$("#selectBox option:selected").text();

 

3. 선택된 위치

 

var index = $("#test option").index($("#test option:selected"));

 

4. Add options to the end of a select

 

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

 

5. Add options to the start of a select

 

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

 

6. Replace all the options with new options

 

$("#selectBox").html("<option value='1'>Some oranges</option><option value='2'>MoreOranges</option>");

 

7. Replace items at a certain index

 

$("#selectBox option:eq(1)").replaceWith("<option value='2'>Someapples</option>");

$("#selectBox option:eq(2)").replaceWith("<option value='3'>Somebananas</option>");

 

8. 지정된 index값으로 select 하기

 

$("#selectBox option:eq(2)").attr("selected", "selected");

 

9. text 값으로 select 하기

 

$("#selectBox").val("Someoranges").attr("selected", "selected");

 

10. value값으로 select 하기

 

$("#selectBox").val("2");

 

11. 지정된 인덱스값의 item 삭제

 

$("#selectBox option:eq(0)").remove();

 

12. 첫번째 item 삭제

 

$("#selectBox option:first").remove();

 

13. 마지막 item 삭제

 

$("#selectBox option:last").remove();

 

14. 선택된 옵션의 text 구하기

 

alert(!$("#selectBox option:selected").text());

 

15. 선택된 옵션의 value 구하기

 

alert(!$("#selectBox option:selected").val());

 

16. 선택된 옵션 index 구하기

 

alert(!$("#selectBox option").index($("#selectBox option:selected")));

 

17. SelecBox 아이템 갯수 구하기

 

alert(!$("#selectBox option").size());

 

18. 선택된 옵션 앞의 아이템 갯수

 

alert(!$("#selectBox option:selected").prevAl!l().size());

 

19. 선택된 옵션 후의 아이템 갯수

 

alert(!$("#selectBox option:selected").nextAll().size());

 

20. Insert an item in after a particular position

 

$("#selectBox option:eq(0)").after("<option value='4'>Somepears</option>");

 

21. Insert an item in before a particular position

 

$("#selectBox option:eq(3)").before("<option value='5'>Someapricots</option>");

 

22. Getting values when item is selected

 

$("#selectBox").change(function(){

           alert(!$(this).val());

           alert(!$(this).children("option:selected").text());

});




  1. 또김씨 ㅋ 2017.05.07 01:27 신고

    오오 이거 좋은 자료!!

Fancytree 
트리구조



일하다보니 메뉴구성을 트리구조로 보여줘야 할 필요가 있었는데

차장님이 사용해보라고 알려주심.

괜춘한듯.

여기저기 필요한데가 많을것 같아서 포스팅 한다.


아이콘은 js파일에서 수정 할 수 있다.

그리고 사용방법이 그리 어렵지는 않은데

뭔가 트리구조에 대한 이해가 필요할것 같다.


예제 사이트 주소 → http://wwwendt.de/tech/fancytree/demo/

github 주소 → https://github.com/mar10/fancytree/

document 주소 → https://github.com/mar10/fancytree/wiki

api reference 주소 → http://wwwendt.de/tech/fancytree/doc/jsdoc/



내가 사용해본것만 설명 하도록 하겠다.

그래봤자 몇개 안된다. 하핫.


1. default

가장 기본적인 사용방법이다.


트리구조를 만들어 놓고 id를 부여한다.



2.Complex
테이블태그를 사용해서 리스트를 만들고
그안에 입력폼을 사용 하여 submit을 할 수도 있다.



 

'IT' 카테고리의 다른 글

[MySQL] 문자열 자르기, 합치기, 치환하기  (0) 2018.02.09
[jQuery]select박스  (2) 2017.04.26
[jQuery]트리구조 플러그인 - fancytree  (0) 2017.04.20
[PHP]PhpMyAdmin 설치  (0) 2017.04.12
[리눅스]가상서버 만들기 2탄  (0) 2017.04.09
[Ubuntu]가상서버 만들기 1탄  (0) 2017.04.04

.dotdotdot

말줄임 플러그인



특정 공간에 텍스트를 넣었을 때 넘칠 때 말줄임 표시를 하고 싶을 때 사용하는 플러그인.



기본 사용방법


  1. $(document).ready(function() {
  2. $("#wrapper").dotdotdot({
  3. ellipsis : '... ',                                     // 말줄임 대체 문자watch
  4. watch : false,                                      // 윈도우창에 따라서 업데이트 여부
  5. wrap            : 'word',                                     // 문자를 자를 단위 : 'word'/'letter'/'children'
  6. height : null,                                       // 높이 설정 , null일경우 자동
  7. callback : function( isTruncated, orgContent ) {},     // .dotdotdot 이후 실행 부울,문자열 두개의 매개변수 
  8. lastCharacter : {
  9. remove : [ ' ', ',', ';', '.', '!', '?' ],           // 절단된 문자열에서 삭제할 문자열
  10. }
  11. });
  12. });



자세한 내용은 아래의 사이트 참고...


.dotdotdot 사이트 http://dotdotdot.frebsite.nl/

'IT' 카테고리의 다른 글

[Ubuntu]가상서버 만들기 1탄  (0) 2017.04.04
[Trello]공동작업 툴  (0) 2017.03.23
[jQuery].dotdotdot 말줄임  (2) 2017.03.19
[PHP] 유투브 동영상 정보 추출  (0) 2017.03.02
[PHP]이미지 리사이징 - ImageMagic  (0) 2017.01.16
[유투브]유투브 썸네일 추출하기  (0) 2017.01.16
  1. 호호호호히히히히 2017.03.22 14:58 신고

    귀염터지지 닷닷닷




파일용량 계산하기


일하다보면 가끔 필요한데 외워지진 않고 매번 찾아봐야하는 것들 중 하나....


찾기귀찮아서 적어놓음.


나는 php를 사용하기 때문에 filesize()를 사용해서 byte용량을 받아온다.

그리고 ajax로 통신하여 리턴받은 값을 함수에 변수로 던져준다.


아래에 소스는 구글에 찾으면 가장 많이 나오는 소스중에 하나이다.








function byteCalculation(bytes) {
        var bytes = parseInt(bytes);
        var s = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
        var e = Math.floor(Math.log(bytes)/Math.log(1024));
       
        if(e == "-Infinity") return "0 "+s[0]; 
        else 
        return (bytes/Math.pow(1024, Math.floor(e))).toFixed(2)+" "+s[e];
}





'IT' 카테고리의 다른 글

[유투브]유투브 썸네일 추출하기  (0) 2017.01.16
[구글맵API]구글맵 API사용하기  (0) 2016.12.19
[jQuery]파일용량 계산하기  (0) 2016.12.14
[PHP]배열 키값 재정의  (0) 2016.12.13
[API]차트생성 - Chart.js  (0) 2016.11.25
[OVEN]프로토타이핑 툴 오븐!(beta)  (0) 2016.11.25





[API] Chart.js



 
차트생성기능을 만들기위해
여러 무료 api를 찾던중
디자인과 기능이
젤 맘에들어서 사용해본
chart.js를 소개하도록 하겠다.



오픈소스이고 8가지의 타입이 있고 html5의 canvas를 사용하고 반응형이다.


시작해보자.

일단 chart.js를 사용하려면 GitHub에서 다운받거나 CDN을 이용한다.

나는 걍 CDN을 이용한다.



차트를 만들자.

먼저 canvas를 만들고 너비와 높이를 정한뒤

꼭 id를 넣자.



기본 사용틀이다.



기본 폰트 셋팅이다.



공통으로 사용되는 구성이다.



차트 제목에 관련된 구성요소들인데

일단 저런 옵션 안주면 안나오고

나오게 하고 싶으면 저 도표에 있는 옵션들로 구성하면 될거 같다.



배경에 패턴을 넣을 수 있는데

나는 아직 해보진 않음.

 



차트타입 몇가지만 소개 하도록 하겠다.

내가 사용해본 타입만 설명 하도록 하겠음.



바 차트는 익숙한 형태

사용법도 쉬움.


기본틀에서 벗어나지 않음


안에 들어가는 데이터도 크게 복잡하지 않음.



Line타입도 만만찮게 쉬움.


bar차트와 다르지 않은 사용법이다.




라인 타입에는 각 데이터 마다 포인터가 있어서

거기에 대한 옵션도 추가 할 수 있다.


파이 & 도넛 타입은 같은 사용법으로

타입만 다르게 써주면 된다.


폴라타입도 비슷하다.


레이더 타입은 조금 다르게

각각의 라벨별로 데이터 배열이 있어야된다.


생각보다 설명을 자세히 쓸수가 없구먼...


데이터 한두개 정도로 만드는건 쉽지만

여러개일 때 좀 손이 많이간다.

그리고 프로그램을 짜다보면

같은 데이터로 다른 타입의 차트를 생성하고싶을 때가 있는데


Bar,Line 타입

Pie,Douhnut,Polar타입

Radar타입


이렇게 3가지로 분류해서 데이터를 조물딱 거리면 된다.

나는 배열을 가지고 놀기엔 하수라 고생좀 했지만....


첨엔 이런걸 시키다니 욕나왔지만

하다보니 재밌기도 하고

소스 손봐서 다시 만들고 싶다. 

소스 넘 더럽.....ㅠㅠ

'IT' 카테고리의 다른 글

[유투브]유투브 썸네일 추출하기  (0) 2017.01.16
[구글맵API]구글맵 API사용하기  (0) 2016.12.19
[jQuery]파일용량 계산하기  (0) 2016.12.14
[PHP]배열 키값 재정의  (0) 2016.12.13
[API]차트생성 - Chart.js  (0) 2016.11.25
[OVEN]프로토타이핑 툴 오븐!(beta)  (0) 2016.11.25

+ Recent posts