的Qooxdoo：帶

在使用的Qooxdoo一個qx.Desktop菜單的佈局，我做了一個菜單條，看起來像這樣： menu strip in qooxdoo 的Qooxdoo：帶

如何修改qx.ui.window.Window佈局也是這樣嗎？（我做出來的CSS）

menu strip in JavaScript

電流源的Qooxdoo：

qx.Class.define("my_project.gameui.MainGameMenu", 
{ 
    extend : qx.ui.window.Window, 

    construct : function() 
    { 
     this.base(arguments, "MainGameMenu"); 
     // hide the window buttons 
     this.setShowClose(false); 
     this.setShowMaximize(false); 
     this.setShowMinimize(false); 
     // adjust size 
     this.setWidth(400); 
     this.setHeight(80); 

     this.getChildControl("captionbar").setVisibility("excluded"); 

     var layout = new qx.ui.layout.Grid(0,0); 
     this.setLayout(layout); 
     var toolbar = new qx.ui.toolbar.ToolBar(); 
     this.add(toolbar, {row: 0, column: 0}); 

     var btn_status = new qx.ui.toolbar.Button("STATUS"); 
     var btn_backpack = new qx.ui.toolbar.Button("BACKPACK"); 
     var btn_crew  = new qx.ui.toolbar.Button("CREW"); 
     var btn_social = new qx.ui.toolbar.Button("SOCIAL"); 
     var btn_mission = new qx.ui.toolbar.Button("MISSION"); 
     var btn_system = new qx.ui.toolbar.Button("SYSTEM"); 
     btn_status.setWidth(80); 
     btn_status.setHeight(80); 
     toolbar.add(btn_status); 
     toolbar.add(btn_backpack); 
     toolbar.add(btn_crew); 
     toolbar.add(btn_social); 
     toolbar.add(btn_mission); 
     toolbar.add(btn_system); 
    } 
});

看來我是沒有完成仍遠。我需要刪除此菜單條的默認佈局並添加我自己的樣式。我該怎麼做？

來源

2013-04-04 Raptor

這應該像你的屏幕截圖，並給您提供更多的adaptions一個很好的起點：

編輯您的Appearance.js這樣的：

qx.Theme.define("my_project.theme.Appearance", 
{ 
    extend : qx.theme.modern.Appearance, 

    appearances : 
    { 
    "mywindow": 
    { 
     style : function(states) 
     { 
     return { 
      paddingRight: 15, 
      paddingLeft: 15, 
      decorator: "horizontalrule" 
     }; 
     } 
    }, 

    "mybutton": 
    { 
     style : function(states) 
     { 
     return { 
      padding: 10, 
      marginBottom: 1, 
      textColor: "blue", 
      decorator: "redbox" 
     }; 
     } 
    } 
    } 
});

然後編輯您的Decoration.js這樣的：

qx.Theme.define("my_project.theme.Decoration", 
{ 
    extend : qx.theme.modern.Decoration, 

    decorations : 
    { 
    "horizontalrule": 
    { 
     decorator : [ 
      qx.ui.decoration.MSingleBorder 
     ], 

     style: 
     { 
      widthBottom: 1, 
      colorBottom: "black" 
     } 
    }, 

    "redbox": 
    { 
     decorator : [ 
      qx.ui.decoration.MSingleBorder 
     ], 

     style: 
     { 
      width: 1, 
      color: "red" 
     } 
    } 
    } 
});

最後，您必須設置小部件的外觀：

qx.Class.define("my_project.gameui.MainGameMenu", 
{ 
    extend : qx.ui.window.Window, 

    construct : function() 
    { 
     this.base(arguments, "MainGameMenu"); 

     ... 
     // reset appearance 
     // (could also be done by defining an additional appearance like before) 
     toolbar.setAppearance(""); 
     ... 
     btn_status.setAppearance("mybutton"); 
     btn_backpack.setAppearance("mybutton"); 
     btn_crew.setAppearance("mybutton"); 
     btn_social.setAppearance("mybutton"); 
     btn_mission.setAppearance("mybutton"); 
     btn_system.setAppearance("mybutton"); 
     ... 
     this.setAppearance("mywindow"); 
     ...

一些注意事項：

mywindow，mybutton，horizontalrule，redbox當然是任意的字符串
代替"black"你也可以寫"#000"甚至從當前使用的主題Color.js串[1]
這只是一個起點，因爲我們現在已經覆蓋了工具欄按鈕的所有狀態（盤旋，按下，禁用...）。將style函數的原始框架代碼複製到您的Appearance.js中，並將其與您自己的return語句合併，並根據需要進行調整。

潛水更深在代碼/手動：

主題化一般：

更具體：

來源

2013-04-04 17:49:49

回答

相關問題