Gmail 스타일의 라벨 선택 도구는 어떻게 구현할 수 있습니까?

Question

메일 라벨링 용 Gmail 인터페이스를 구현하는 가장 쉬운 방법은 무엇입니까? 어떤 자바 스크립트 라이브러리에 위젯이 있나요?

http://img294.imageshack.us/img294/7097/36698396.png

동작 :

1. 즉시 메시지에 레이블을 드롭 다운에서 레이블을 클릭합니다.
2. 여러 레이블을 확인한 다음 "적용"을 선택하여 여러 레이블을 추가하십시오 ("적용"요구 사항이 맞는지 확실하지 않습니다 ...)
3. 상자에 입력하여 레이블 목록의 범위를 좁 힙니다. 1로 범위를 좁히면 Enter 키를 눌러 해당 레이블을 적용합니다.
4. 바로 가기 키 "L"로 위젯을 트리거하십시오.

Answer 1

호레이스는 - 당신이 뭔가 정말 복잡합니다, 당신은 고려한다 많은 사전 준비 작업을하더라도, 이 구성 요소가 작동하는 데는 다소 시간이 걸릴 것입니다.

어쨌든 미리 만들어진 구성 요소는 좋지만 저는 종종 혼자서 자유 스타일과 같은 방식으로 해킹하고 싶습니다. 그래서 여기에 내가 당신을 가게하기 위해 요리 한 것입니다 : My simple label demo (경고 - 나는 Firefox 3에서만 이것을 테스트했으며, 다른 어떤 것에서도 작동하지 않을 것이라고 확신합니다.).

꽤 예쁘지 않지만 코드는 꽤 간단하고 이해하기 쉬워야합니다.

Answer 2

나는 조리 솔루션은 거기 당신이 원하는 정확히을 수행하는이 의심하지만 괜찮은 자바 스크립트 라이브러리와 함께 자신을 넣어 뭔가 할 수 있어야한다. Ext JS 같은 것이 이상적입니다.

가 관심의 몇 API 페이지 :

• Ext.Panel
• Ext.form.TextArea
• Ext.menu.CheckItem
• Ext.KeyNav

Answer 3

비슷한 레이블 구현을 찾고 있었는데이 스레드를 발견했습니다.

나는 질문의 JS 부분에 추가 할 수 있지만, 라벨의 '귀여움'의 측면에서 유용한 다음 문서/코드를 찾을 수 있습니다 :

CSS Gmail-Like Labels

을 모든 베스트!