道场 - 如何将文本添加到工具栏

我有以下的工具栏，我想在工具栏的开头加上“按钮”： http://jsfiddle.net/yyzxW/道场 - 如何将文本添加到工具栏

<div id="toolbar1" data-dojo-type="dijit/Toolbar" style="background-color:inherit;background-image:none;border-bottom:0px;"> 
<span data-dojo-type="dijit/ToolbarSeparator">Buttons:</span> 
<div data-dojo-type="dijit/form/Button" id="toolbar1.pan" data-dojo-props="iconClass:'PanIcon', showLabel:false">פאן</div> 
      <div data-dojo-type="dijit/form/Button" id="toolbar1.copy" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy', showLabel:false">Copy</div> 
      <div data-dojo-type="dijit/form/Button" id="toolbar1.paste" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste', showLabel:false">Paste</div> 
      <!-- The following adds a line between toolbar sections--> 
      <span data-dojo-type="dijit/ToolbarSeparator"></span> 
      <div data-dojo-type="dijit/form/ToggleButton" id="toolbar1.bold" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconBold', showLabel:false">Bold</div> 
     </div>

而且，我怎样才能做到这一点的方案，如果我创建我的工具栏是这样的：

var toolbar = new Toolbar({ 
      id: "toolbar1", 
      style: "background-color:inherit;background-image:none;border-bottom:0px;" 
     }); 

     var btnPan = new ToggleButton({ 
      label: "Pan", 
      id: controls.PAN, 
      onClick: function() { deactivateControls(); }, 
      showLabel: true, 
      iconClass: "ToolbarIcon Pan" 
     }); 

     var btnZoomIn = new ToggleButton({ 
      label: "Zoom In", 
      id: controls.ZOOM_IN, 
      onClick: function() { activateControl(this.id); }, 
      showLabel: true, 
      iconClass: "ToolbarIcon ZoomIn" 
     }); 

     var btnZoomOut = new ToggleButton({ 
      label: "Zoom Out", 
      id: controls.ZOOM_OUT, 
      onClick: function() { activateControl(this.id); }, 
      showLabel: true, 
      iconClass: "ToolbarIcon ZoomOut" 
     }); 

     toolbar.addChild(btnPan); 
     toolbar.addChild(btnZoomIn); 
     toolbar.addChild(btnZoomOut);

来源

2013-10-05 Alophind

看到我的的jsfiddle http://jsfiddle.net/yyzxW/3/

修改版本把这个风格在DIV

<div style='float:left;margin-top:3px;'>Buttons: </div>

对于程序代码，您可以使用dojo.create或把选择器创建toolBar.containerNode一个div像

put(toolBar.containerNode, "div.yourClass", "Your text");

来源

2013-10-05 15:10:35

div文本不与按钮对齐，它不在中心。 – Alophind

@Alophind可以在style =''中添加任何css样式，将3px更改为5px。 –

谢谢，我已经添加了按钮，因为它看起来更简单:-) – Alophind

你可以只创建一个禁用的按钮。

<div data-dojo-type="dijit/form/Button" 
    data-dojo-props="'class': 'labelOnlyButton', disabled: true">Buttons:</div>

使用.labelOnlyButton创建CSS使它看起来要如何。

来源

2013-10-05 15:10:40

我已经这样创建的：var btnTitle =新的切换按钮（{ 标签： “按钮：” showLabel：真实，禁用：真正的，类： “labelOnlyButton” }）; 而我可以改变背景色，例如，“color”属性不会改变，它仍然是禁用的。 – Alophind

什么是css规则？你的css规则需要比改变颜色的规则更具体。见我的小提琴http://jsfiddle.net/cswing/RDxjv/ –

它现在，为了改变颜色我不得不做这条规则： .claro .dijitButtonDisabled，.claro .dijitToggleButtonDisabled .dijitButtonNode { 颜色：黑色; } – Alophind

道场 - 如何将文本添加到工具栏

回答

相关问题