FixedSplitter.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojox.mobile.FixedSplitter"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.mobile.FixedSplitter"] = true;
  8. dojo.provide("dojox.mobile.FixedSplitter");
  9. dojo.require("dijit._WidgetBase");
  10. // summary:
  11. // A layout container that splits the window horizontally or vertically.
  12. // description:
  13. // FixedSplitter is a very simple container widget that layouts its child
  14. // dom nodes side by side either horizontally or vertically.
  15. // An example usage of this widget would be to realize the split view on iPad.
  16. // There is no visual splitter between the children, and there is no
  17. // function to resize the child panes with drag-and-drop.
  18. // If you need a visual splitter, you can specify a border of a child
  19. // dom node with CSS.
  20. // A child of the widget can be a plain <div> or dojox.mobile.FixedSplitterPane.
  21. // example:
  22. // | <div dojoType="dojox.mobile.FixedSplitter" orientation="H">
  23. // | <div style="width:200px;border-right:1px solid black;">
  24. // | pane #1 (width=200px)
  25. // | </div>
  26. // | <div>
  27. // | pane #2
  28. // | </div>
  29. // | </div>
  30. dojo.declare(
  31. "dojox.mobile.FixedSplitter",
  32. dijit._WidgetBase,
  33. {
  34. orientation: "H", // "H" or "V"
  35. isContainer: true,
  36. buildRendering: function(){
  37. this.domNode = this.containerNode = this.srcNodeRef ? this.srcNodeRef : dojo.doc.createElement("DIV");
  38. dojo.addClass(this.domNode, "mblFixedSpliter");
  39. },
  40. startup: function(){
  41. var children = dojo.filter(this.domNode.childNodes, function(node){ return node.nodeType == 1; });
  42. dojo.forEach(children, function(node){
  43. dojo.addClass(node, "mblFixedSplitterPane"+this.orientation);
  44. }, this);
  45. dojo.forEach(this.getChildren(), function(child){if(child.startup){child.startup();}});
  46. this._started = true;
  47. var _this = this;
  48. setTimeout(function(){
  49. _this.resize();
  50. }, 0);
  51. var parent = dijit.getEnclosingWidget(this.domNode.parentNode);
  52. if(!parent){
  53. if(dojo.global.onorientationchange !== undefined){
  54. this.connect(dojo.global, "onorientationchange", "resize");
  55. }else{
  56. this.connect(dojo.global, "onresize", "resize");
  57. }
  58. }
  59. },
  60. resize: function(changeSize, resultSize){
  61. this.layout();
  62. },
  63. layout: function(){
  64. var sz = this.orientation == "H" ? "w" : "h";
  65. var children = dojo.filter(this.domNode.childNodes, function(node){ return node.nodeType == 1; });
  66. var offset = 0;
  67. for(var i = 0; i < children.length; i++){
  68. dojo.marginBox(children[i], this.orientation == "H" ? {l:offset} : {t:offset});
  69. if(i < children.length - 1){
  70. offset += dojo.marginBox(children[i])[sz];
  71. }
  72. }
  73. var l = dojo.marginBox(this.domNode)[sz] - offset;
  74. var props = {};
  75. props[sz] = l;
  76. dojo.marginBox(children[children.length - 1], props);
  77. dojo.forEach(this.getChildren(), function(child){
  78. if(child.resize){ child.resize(); }
  79. });
  80. }
  81. });
  82. dojo.declare(
  83. "dojox.mobile.FixedSplitterPane",
  84. dijit._WidgetBase,
  85. {
  86. buildRendering: function(){
  87. this.inherited(arguments);
  88. dojo.addClass(this.domNode, "mblFixedSplitterPane");
  89. }
  90. });
  91. }