dojo - Vertical Text in dijit TabContainer Tabs -


dijit/layout/tabcontainer may have tab buttons/texts displayed on top, right, bottom , left. i'd tabs on right (using tabposition: "right-h"), if tabs on right, texts still displayed horizontally. "right-h" sounds if there plans "right-v", have texts displayed vertically, too, seems not implemented yet.

how can achieve vertical display of tab texts in 1 of tabcontainers in use in page (others shall have tabs on top horizontally rendered texts).

thanks!

one way can imagine split title of tabs accros multiple lines.

like this:

require([      "dojo/dom-attr", "dojo/query",      "dijit/layout/tabcontainer", "dijit/layout/contentpane",      "dojo/domready!"  ], function(attr, query, tabcontainer, contentpane){        query(".tc1cp").foreach(function(n){          new contentpane({              // pass title: attribute, this, we're stealing node              title: attr.get(n, "title").split('').join('<br />')          }, n);      });      var tc = new tabcontainer({          style: attr.get("tc1-prog", "style"),          tabposition: 'left-h'      }, "tc1-prog");      tc.startup();  });
.tablabel {      line-height: 1;      text-align: center;  }
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">    <div class="tundra">    <div id="tc1-prog" style="width: 400px; height: 500px;">      <div class="tc1cp" title="my first tab">        lorem ipsum , around...      </div>      <div class="tc1cp" title="my second tab">        lorem ipsum , around - second...      </div>      <div class="tc1cp" title="my last tab">        lorem ipsum , around - last...      </div>    </div>  </div>

or changing writing-mode:

require([      "dojo/dom-attr", "dojo/query",      "dijit/layout/tabcontainer", "dijit/layout/contentpane",      "dojo/domready!"  ], function(attr, query, tabcontainer, contentpane){        query(".tc1cp").foreach(function(n){          new contentpane({              // pass title: attribute, this, we're stealing node              title: attr.get(n, "title")          }, n);      });      var tc = new tabcontainer({          style: attr.get("tc1-prog", "style"),          tabposition: 'left-h'      }, "tc1-prog");      tc.startup();  });
.tablabel {      writing-mode: tb-rl; /*note: correct value vertical-lr ie10 not support it*/      -ms-transform: rotate(180deg);      -webkit-transform: rotate(180deg);      transform: rotate(180deg);  }
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">    <div class="tundra">    <div id="tc1-prog" style="width: 400px; height: 500px;">      <div class="tc1cp" title="my first tab">        lorem ipsum , around...      </div>      <div class="tc1cp" title="my second tab">        lorem ipsum , around - second...      </div>      <div class="tc1cp" title="my last tab">        lorem ipsum , around - last...      </div>    </div>  </div>


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -