Zend Dojo 양식의 태그

Question

이 stackoverflow 양식과 동일한 태그를 얻고 싶습니다. 내 양식은 젠드 도장 양식이며 양식의 태그 개념을 만드는 데 문제가 있습니다. 태그는 사용자가 값을 입력 할 때 입력 상자에 자동 완성되어야하며 시스템이 다른 값으로 가져 가야하는 단어 사이에 공백이 있으면 언제든지이 상황에서 나를 도울 수 있습니까?

Answer 1

내가 제안 :

• 을 자신의 위젯을 만드는 방법을 학습 : http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html
• 이 JQuery와 예제에서 영감을 촬영 : http://jcesar.artelogico.com/jquery-tagselector/
• dijit.InlineEditBox에 대해 알아보기 : http://dojotoolkit.org/reference-guide/dijit/InlineEditBox.html
• 에 대해 학습을 형식 선택 : http://livedocs.dojotoolkit.org/dijit/form/FilteringSelect

그 후, 당신은 자신의 위젯을 할 수 있습니다. 당신은이 같은 템플릿으로 시작할 수 있습니다 (위젯 템플릿을 정의하는 방법에 대한 링크 1 참조)

<div> 
    <div class="${baseClass}" data-dojo-attach-point="containerNode"></div> 
</div> 

그리고 당신의 위젯을이 (사용 도장 1.7)처럼 보일 수있는 자바 스크립트 코드 :

define("ps/Tag", 
["dojo/_base/declare", 
"dijit/_WidgetBase", 
"dijit/_WidgetsInTemplateMixin", 
"dijit/_TemplatedMixin", 
"dojo/text!ps/templates/Tag.html", 
"dijit/InlineEditBox", 
"dijit/form/FilteringSelect" 
], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template, InlineEditBox, FilteringSelect) { 

declare("ps.Tag", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], { 

    baseClass : "tag", 

    templateString : template, 

    store : null, 

    searchAttr : null, 

    value : null, 

    postCreate : function() { 
     var widget = this; 
     eb = new InlineEditBox({ 
      editor: "dijit.form.FilteringSelect", 
      editorParams : { 
       store : widget.store, 
       searchAttr: widget.searchAttr, 
       value : widget.value 
      }, 
      autoSave: true 
     }, this.containerNode); 
    } 
}); 
return ps.Tag; 

});

나는 CSS를 너에게 맡길 것이다 (링크 2의 예제에서 찾을 수 있고 방화 녀와 함께 조정할 수있다).

그런 다음 HTML에서이 같은 위젯을 사용할 수 있습니다

var stateStore = new Memory({ 
        data: [ 
         {name:"Alabama", id:"AL"}, 
         {name:"Alaska", id:"AK"}, 
         {name:"American Samoa", id:"AS"}, 
         {name:"Arizona", id:"AZ"}, 
         {name:"Arkansas", id:"AR"}, 
         {name:"Armed Forces Europe", id:"AE"}, 
         {name:"Armed Forces Pacific", id:"AP"}, 
         {name:"Armed Forces the Americas", id:"AA"}, 
         {name:"California", id:"CA"}, 
         {name:"Colorado", id:"CO"}, 
         {name:"Connecticut", id:"CT"}, 
         {name:"Delaware", id:"DE"} 
        ] 
       }); 
       var tag = new Tag({store : stateStore, searchAttr : "name", value : "CA"}); 
       dojo.place(tag.domNode, "yourTagContainerDivId", "last"); 

나는 그것이 도움이되기를 바랍니다.