jQuery를 UI 예 - 선택 (선택 가능)
요소의 단일 요소 또는 그룹을 선택하려면 마우스를 사용합니다.
선택 가능한 상호 작용에 대한 자세한 내용은 API 설명서를 참조 위젯 (선택 가능한 위젯)을 선택할 수 있습니다 .
기본 기능
선택 기능을 활성화하거나 DOM 요소의 요소 그룹에. 마우스를 드래그하여 항목을 선택합니다. 여러 인접하지 않은 항목을 선택하려면 Ctrl 키를 누른 상태.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 선택 (선택 가능) - 기본 기능 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#feedback {글꼴 크기 : 1.4em;}
#selectable .ui-선택 {배경 : # FECA40;}
#selectable .ui 선택 {배경 : # F39814; 색상 : 흰색;}
#selectable {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 폭 : 60 %;}
#selectable 리 {마진 : 3px의; 패딩 : 0.4em; 글꼴 크기 : 1.4em; 높이 : 18px;}
</ 스타일>
<스크립트>
$ (함수 () {
$ ( "#selectable") .selectable ();
});
</ 스크립트>
</ 헤드>
<바디>
<안녕, 아이디 = "선택">
<리 클래스 = "UI 위젯 콘텐츠"> 항목 1 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 2 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 3 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 4 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 5 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 6 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 7 </ 리>
</ 올>
</ BODY>
</ HTML>
그것은 격자로 표시됩니다
동일한 기준 및 플로팅 디스플레이 CSS를 사용하도록 선택 가능한 항목은 그리드로 도시하자.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 선택 (선택 가능) - 그리드를 표시 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#feedback {글꼴 크기 : 1.4em;}
#selectable .ui-선택 {배경 : # FECA40;}
#selectable .ui 선택 {배경 : # F39814; 색상 : 흰색;}
#selectable {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 폭 : 450 픽셀;}
#selectable 리 {마진 : 3px의; 패딩 : 1 픽셀; 플로트 : 왼쪽; 폭 : 100 픽셀, 높이 : 픽셀 범위; 글꼴 크기 : 4em; 텍스트 정렬 : 센터;}
</ 스타일>
<스크립트>
$ (함수 () {
$ ( "#selectable") .selectable ();
});
</ 스크립트>
</ 헤드>
<바디>
<안녕, 아이디 = "선택">
<리 클래스 = "UI 상태 기본"> 1 </ 리>
<리 클래스 = "UI 상태 기본"> 2 </ 리>
<리 클래스 = "UI 상태 기본"> 3 </ 리>
<리 클래스 = "UI 상태 기본"> 4 </ 리>
<리 클래스 = "UI 상태 기본"> 5 </ 리>
<리 클래스 = "UI 상태 기본"> 6 </ 리>
<리 클래스 = "UI 상태 기본"> 7 </ 리>
<리 클래스 = "UI 상태 기본"> 8 </ 리>
<리 클래스 = "UI 상태 기본"> 9 </ 리>
<리 클래스 = "UI 상태 기본"> 10 </ 리>
<리 클래스 = "UI 상태 기본"> 11 </ 리>
<리 클래스 = "UI 상태 기본"> 12 </ 리>
</ 올>
</ BODY>
</ HTML>
직렬화
함수 작성 stop 트리거 이벤트가 선택한 항목의 인덱스 값을 수집 할 경우. 이러한 값은 피드백으로서 제시하거나, 데이터 전송의 스트링의 형태로되어있다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 선택 (선택 가능) - 직렬화 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#feedback {글꼴 크기 : 1.4em;}
#selectable .ui-선택 {배경 : # FECA40;}
#selectable .ui 선택 {배경 : # F39814; 색상 : 흰색;}
#selectable {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 폭 : 60 %;}
#selectable 리 {마진 : 3px의; 패딩 : 0.4em; 글꼴 크기 : 1.4em; 높이 : 18px;}
</ 스타일>
<스크립트>
$ (함수 () {
{(.selectable $ ( "#selectable")
중지 기능 () {
var에 결과 = $ ( "#-결과 선택")) (.empty을;
$ ( ".ui-선택"이) .each (함수 () {
VAR 지수 = $ ( "#selectable 리")있는 .index (이);
result.append ( "#"+ (인덱스 + 1));
});
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<P ID = "피드백">
<스팬>는 당신이 선택한 </ SPAN> <스팬 ID = "-결과를 선택"> 없음 </ 스팬>.
</ P>
<안녕, 아이디 = "선택">
<리 클래스 = "UI 위젯 콘텐츠"> 항목 1 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 2 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 3 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 4 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 5 </ 리>
<리 클래스 = "UI 위젯 콘텐츠"> 항목 6 </ 리>
</ 올>
</ BODY>
</ HTML>