이 UI 패턴은 무엇입니까?
저는 이런 종류의 이름이 무엇인지, 결국 웹 브라우저에서 어떻게 만들 수 있는지 알아 내려고합니다. 다음과 같이 시청 (최초로 떠오른 앱의 스크린 샷).
내가 찾고있는 특정 구성 요소 / 패턴 은 세트에서 항목의 포함 / 제외를 선택할 두 개의 목록 상자 ( "Included Gear"및 "Excluded Gear")입니다. WPF 이름 (있는 경우)을 사용하고있는 경우 도움이 될 수 있습니다.
내가 하고 존재하는 경우,이 꼬추의 이름을 찾고, 당신은 정말 내 일을하려는 경우, 당신은 브라우저 에서이 dealies 중 하나를 만드는 jQuery를를 또는 YUI 방법으로 나를 가리킬 수 있습니다.
일반적으로 "이중 목록"또는 "두 개의 상자에 그 사이에 물건을 넣을 수있는 것"으로 더 일반적으로 "공식적인"이름이 있습니다.
이에 대한 jQuery 플러그인이 있습니다. : https://github.com/Geodan/DualListBox
UI 패턴 컬렉션 인 인터페이스 디자인 에서 Jenifer Tidwell 은이 를 목록 작성기 라고 부 사용 합니다. 모두 "듀얼리스트" 와 "목록 빌더는" 모두에 대한 이름을 인식하는 것 학계 와 산업 자원 도 여기에 SO 에 대한 이 댓글 게시물에 대한 웹 긴 체크리스트 UI 패턴 .
패키징 된 jQuery 구성 요소가 있는지 여부는 모르겠지만 DZone에는 jQuery를 사용하여 롤링하는 방법에 대한 기사가 있습니다 . HTML 목록 작성기 : jQuery 적용 연구
또한 동일한 핵심 문제에 대해 매우 다른 접근 방식을 취하는 방식을 취하는 다른 목록 작성기 패턴 을 발견했습니다 .
이들 및 기타 다양한 디자인 패턴 카탈로그의 패턴 은 문제를 공격하는 다른 방법에 대한 영감을 줄 수 있습니다. 저는 개인적으로 항상 "이중 목록"패턴을 우리가 훨씬 더 나은 대안을 가지고있는 약간의 해킹이라고 생각했습니다 ... 저는 년, 지금 :-)
업데이트 : 난 그냥 또한 표시이 패턴을 우연히 발견 "swaplist" 에 Tklib 과 "연결되지 않은리스트 박스" 에서 [위젯 증분] TK에 "메가 위젯"라이브러리입니다. 따라서 Perl / Tk , Tkinter , Ruby / Tk 및 "어디서나 (다른) 훌륭한 (Tk) 위젯이 판매되는 곳")에서 사용할 수 있습니다.
정말 영광스러운 다중 선택 목록입니다. "포함됨"(선택됨) "제외됨"(선택되지 않음) 상태가 2 개뿐이기 때문에. 선택한 항목과 선택되지 않은 항목을 2 개의 열로 분할하고 두 열 사이에 드래그 앤 드롭 할 수있는 꽤 멋진 다중 선택 위젯이 있습니다.
http://www.quasipartikel.at/multiselect/
아니 것을 마이크로 소프트 UXGuide는 어떤 방법으로 또는 그것이 필요대로 완료하지만이 같은이 개념을 참조 목록 작성기 .
저는 최근에 화살표 나 레이블이있는 버튼 등을 사용할 때의 모범 사례에 대한 아이디어를 위해이 UI 개념의 예도 검색했습니다. Google 이미지를 통해 가장 많은 예를 얻은 검색은 이중 목록 UI 입니다.
질문의 두 번째 부분에 대한 jQuery 솔루션과 관련하여 무한의 대답이 아마도 가장 분명한 생각하지만이 UI 패턴과 관련하여 그것에 대해 2 센트를주고 싶었습니다.
나는 벤더가 그것들을 slushbuckets 라고 부르는 것을 들었습니다 .
나는 항상 그것이 누산기 라고 생각 했지만 Google에서이를 지원할 수있는 것을 찾기가 매우 어려웠습니다. UI 사용성 에 대한 모호한 철학 논문 에서 이에 대한 언급이 있습니다 .
그림 4-1은 누산기 위젯 (즉, 가능한 값의 오른쪽 목록에서 항목을 전송하는 구성 요소)에 대한 방향 변경 규칙의 예를 보여줍니다.
그리고 1998의 년 일부 학생 프로젝트에서 또 다른 언급이 있습니다 .
나는 가능성을 웹에서 사용할 것입니다 : http://jqueryui.com/demos/sortable/#connect-lists
나는 당신이 정보를 앞뒤로 이동하기 때문에 항상 "셔틀 구성 요소"라고 불렀습니다 . 이것은 다소 일반적인 것 입니다. 가능성 목록에 추가 할 생각했습니다.
다음은 jQuery 또는 YUI가 어느 쪽인지 두 가지 예입니다. 이 두 가지 예는 ExtJS에서 것입니다. 하나는 두 개의 개의 트리와 다른 두 개의 개의 데이터 그리드를 사용합니다. 둘 다 매우 매끄럽고 디자인 아이디어에 도움이 될 수 있습니다.
BTW : 일반적으로 이중 목록이라고도합니다.
종종 "Mover"또는 "List Mover"라고합니다.
다음은 JavaScript 및 JQuery 예제입니다.
http://javascript.internet.com/miscellaneous/move-dual-list.html
http://www.hscripts.com/scripts/JavaScript/move-list.php
http://viralpatel.net/blogs/2009/06/listbox-select-all-move-left-right-up-down-javascript.html
http://kgaddy.com/jqueryMoverBoxes/
구현을 통해 여러 선택을 수행하고 선택한 모든 항목을 한 번에 선택할 수 있습니다.
또 다른 변형은 더블 클릭을 활성화하여 이동하는 것입니다.
이에 대한 표준 제어가 없습니다. 일반적으로 하나 또는 모든 항목을 한 목록에서 다른 목록으로 또는 그 목록에서 이동하는 두 개의 목록과 일부 버튼으로 구현합니다. 단일 항목을 이동하는 버튼 대신 더블 클릭을 사용할 수 있습니다. 하나 이상의 항목을 이동하여 비용을 지불하고 드롭 할 수 있습니다.
패턴의 이름은 .. 정말 모르겠어요.
DevX에는 분명한 것의 JavaScript 구현이 있습니다 .
제 동료들과 저는 항상 "2 박스 선택"이라고 불렀습니다. 혀를 잘 굴리는 것입니다.
참고 URL : https://stackoverflow.com/questions/2852995/whats-this-ui-pattern-called
'ProgramingTip' 카테고리의 다른 글
| C ++에서 0과 1 사이에 발생하게 만드는 임의의 이중을 어떻게 생성합니까? (0) | 2020.12.08 |
|---|---|
| 자바 펼쳐에서 '정의되지 않음'을 처리하는 방법 (0) | 2020.12.08 |
| 그래프 위트 Matplotlib의 배경색 불투명도를 설정하는 방법 (0) | 2020.12.08 |
| Jenkins / Hudson- 현재 빌드 번호에 액세스하고 있습니까? (0) | 2020.12.08 |
| numpy에서 부울 배열을 그대로 배열로 바꾸는 방법 (0) | 2020.12.08 |