jquery mobile listbox_jquery의 가치 원칙과 코드
- WBOY원래의
- 2016-05-16 17:34:451302검색
jQuery 작동 목록 상자의 원리는 어렵지 않습니다. 즉, 목록 상자에서 선택한 항목을 이동하여 필요한 이동 효과를 얻는 것입니다. 예제에서는 json의 사용법에도 익숙해질 수 있도록 json 데이터 구조를 사용하여 목록 상자를 동적으로 바인딩했습니다.
먼저 간단한 html부터 살펴보겠습니다. 서버 컨트롤은 자동으로 html 태그로 변환되므로 예제에서는 서버 컨트롤을 사용하지 않았습니다. 다음과 같습니다.
는 자동으로 다음과 같이 변환됩니다.
html 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
" id="btnRight" value =">>" />
json 데이터 구조는 다음과 같습니다.
json 데이터 구조는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다. //data
var vData = { "datalist ": [
{ "data": "jQuery", "text": "jQuery" },
{ "data": "Asp.net", "text": "Asp.net" },
{ "data": "인터넷" , "text": "인터넷" },
{ "data": "Sql", "text": "Sql" }
]
};
다음은 jQuery 구현 코드이며 주요 위치에 주석이 있습니다.
{ "data": "jQuery", "text": "jQuery" },
{ "data": "Asp.net", "text": "Asp.net" },
{ "data": "인터넷" , "text": "인터넷" },
{ "data": "Sql", "text": "Sql" }
]
};
다음은 jQuery 구현 코드이며 주요 위치에 주석이 있습니다.
코드 복사 코드는 다음과 같습니다. //데이터 바인딩
var vlist = "" ; //json 데이터 트래버스
jQuery.each(vData.datalist, function(i, n) {
vlist = "";
});
//listLeft
$("#listLeft").append(vlist)
//왼쪽 이동
$ ("#btnRight").click(function() {
//data 옵션으로 선택한 데이터 세트는 변수 vSelect
var vSelect = $("#listLeft option:selected")에 할당됩니다. ;
// 복제 데이터가 listRight에 추가되었습니다.
vSelect.clone().appendTo("#listRight")
//listRight에서 옵션도 제거합니다.
vSelect.remove(); 🎜>});
//오른쪽 이동
$("#btnLeft").click(function() {
var vSelect = $("#listRight option:selected");
vSelect .clone().appendTo("#listLeft");
vSelect.remove()
});
jQuery.each(vData.datalist, function(i, n) {
vlist = "";
});
//listLeft
$("#listLeft").append(vlist)
//왼쪽 이동
$ ("#btnRight").click(function() {
//data 옵션으로 선택한 데이터 세트는 변수 vSelect
var vSelect = $("#listLeft option:selected")에 할당됩니다. ;
// 복제 데이터가 listRight에 추가되었습니다.
vSelect.clone().appendTo("#listRight")
//listRight에서 옵션도 제거합니다.
vSelect.remove(); 🎜>});
//오른쪽 이동
$("#btnLeft").click(function() {
var vSelect = $("#listRight option:selected");
vSelect .clone().appendTo("#listLeft");
vSelect.remove()
});
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.