jQuery UI Widgets › Forums › Layouts › Splitter › Initialize 3T
Tagged: 100%, 3T splitter, expander, height, jqxExpander, jqxsplitter, jqxtree, layout, splitter, three, Tree
This topic contains 7 replies, has 2 voices, and was last updated by usrimas 10 years, 3 months ago.
-
AuthorInitialize 3T Posts
-
Hi,
Sorry, but can’t understand how to do 3T splitter 🙁 …
I need such construction :
top
—-|—————————-
l | right
e |
f |
t |Many thanks in advance ! 🙂
At last I got that …
Html :
<div id="mSpl"> <div> main parameters </div> <div> <div id="lftSpl"> <div> main menu </div> <div> content </div> </div> </div> </div>
javascript :
$( '#mSpl' ).jqxSplitter( { width: wdt - 3, height: hgh - 36, orientation: 'horizontal', panels: [ { size: 90 } ] } ); $( '#lftSpl' ).jqxSplitter( { width: wdt - 3, height: hgh - 36, orientation: 'vertical' , panels: [ { size: '15%', collapsible: false } ] } );
Another question, related with splitter : how to get COLORED header, like in a sample http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/index.htm?(arctic)#demos/jqxsplitter/defaultfunctionality.htm , where is “Feeds” ?
Hello usrimas,
The “Feeds” header is actually the header of a jqxExpander. Please review the code of the Default Functionality demo to see how to integrate expander in your splitter.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar for your advice .
I did with expander . I’m doing tab0 as a main tab , not closable . Here are spliters – top,with some parameters, left with tree and right for content . It create all , but then I click on tree item , expander header hide . What it can be bad ?
Source :
<body class='default'> <div id='mTab'> <ul style='margin-left: 20px;'> <li>Pagrindinis</li> </ul> <div style="overflow: hidden;" id="pagrind"> <div id="mSpl"> <div style="padding-top: 10px; padding-left: 30px;"> <table> <tr> <td id="usr_lbl">Vartotojas: </td> <td><input style="width: 150px;" type="text" id="usr" readonly="readonly"/></td> <td style="padding-left: 25px;" id="klb_lbl">Kalba: </td> <td><div id="klb"></div></td> <td style="padding-left: 25px;" id="dmb_lbl">Duomenų bazė: </td> <td><div id="dmb"></div></td> <td style="padding-left: 50px;" colspan="2" align="right" > <input type="submit" id="baigt_darba" value="Baigti darbą" /> </td> </tr> </table> </div> <div> <div id="lSpl"> <div style="border: none;" id="mExp"> <div class="jqx-hideborder">Pagrindinis meniu</div> <div class="jqx-hideborder" id='mTree'></div> </div> <div id='mCnt'> </div> </div> </div> </div> </div> </div> </body> <script type="text/javascript"> var mTab, mSpl, mTree, mCnt; $baigti_darba = true; var theme = ""; var klbs = [ { value: "lt", label: "Lietuvių" }, { value: "en", label: "English" } ]; var dmbs = [ { value: "ut", label: "Utena" }, { value: "zr", label: "Zarasai" } ]; var $mSide = new Array(); var $mMazg = new Array(); var $mPunk = new Array(); $( document ).ready( function() { $( '#usr' ).jqxInput( { width: '150px', height: '25px', disabled: true } ); $( '#usr' ).val( $app_uvr ); $( '#klb' ).jqxComboBox( { source: klbs, width: '100px', height: '25px' } ); $( '#klb' ).jqxComboBox( 'selectIndex', ( $app_lng == 'lt' ? 0 : 1 ) ); $( '#klb' ).bind( 'select', function( event ) { var args = event.args; var item = $( '#klb' ).jqxComboBox( 'getItem', args.index ); $app_lng = item.value; $app_lu = ( $app_lng == "lt" ? 0 : 1 ); kalbos_pakeit(); }); $( '#dmb' ).jqxComboBox( { source: dmbs, width: '100px', height: '25px' } ); $( '#dmb' ).jqxComboBox( 'selectIndex', ( $app_db == 'ut' ? 0 : 1 ) ); $( '#dmb' ).bind( 'select', function( event ) { var args = event.args; var item = $( '#dmb' ).jqxComboBox( 'getItem', args.index ); $app_db = item.value; }); $( '#baigt_darba' ).jqxButton( { width: '120', height: '25' } ); $( "#baigt_darba" ).jqxButton( 'val', ( $app_lng == 'lt' ? 'Baigti darbą' : 'End work' ) ); $( '#baigt_darba' ).bind( 'click', function( event ) { if ( confirm( ( $app_lng == 'lt' ? 'Tikrai norite baigti darbą ?' : 'Do you really want to end work ?' ) ) ) { $baigti_darba = true; close_app(); } }); var hgh = parseInt( $( window ).height() * 98 / 100 ); var wdt = parseInt( $( window ).width() * 99 / 100 ); $( '#mTab' ).jqxTabs( { width: wdt + "px", height: hgh + "px", position: 'top' } ); $( '#mSpl' ).jqxSplitter( { width: '100%', height: hgh, orientation: 'horizontal', panels: [ { size: 50, collapsible: true } ] } ); $( '#lSpl' ).jqxSplitter( { width: '100%', height: hgh, orientation: 'vertical' , panels: [ { size: '15%', collapsible: true } ] } ); mTab_resz(); var mens = ajax_get( "pagr_mn.php" ); $mSide = mens[ 'nodes' ]; $mPunk = mens[ 'meniu' ]; $mMazg = menu_tree( $mSide ); $( '#mExp' ).jqxExpander( { toggleMode: 'none', showArrow: false, width: "100%", height: "100%", initContent: function() { $( '#mTree' ).jqxTree( { height: '100%', width: '100%', source: $mMazg } ); } }); kalbos_pakeit(); $( window ).resize( function(){ mTab_resz(); } ); window.onbeforeunload = function () { if ( !$baigti_darba ) return "Noredami baigti darba - issiregistruokite per 'Baigti darbą' ..."; } }); function menu_tree( pagr_mn ) { var ret = new Array(); for ( var u in pagr_mn ) { var lbl = ( $app_lng == 'lt' ? pagr_mn[ u ].pav_lt : pagr_mn[ u ].pav_en ); ret[ u ] = { label: lbl }; } return ret; } </script> </html>
Thanks in advance …
Hi usrimas,
You should not initialize the tree from the jqxExpander content div, but from a div inside it, i.e.:
<div style="border: none;" id="mExp"> <div class="jqx-hideborder"> Pagrindinis meniu</div> <div class="jqx-hideborder"> <div id='mTree'> </div> </div> </div>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Tried you suggestion – the same … 🙁
I found that problem is in tree height :
$( '#mExp' ).jqxExpander( { toggleMode: 'none', showArrow: false, width: "100%", height: "100%", initContent: function() { $( '#mTree' ).jqxTree( { width: '100%', source: $mMazg } ); // , height: '100%' $( '#mTree' ).jqxTree( 'selectItem', $( '#mTree' ).find( 'li:first' )[ 0 ] ); } });
As you can see , I commented height property . Now expander header don’t dissapear . But now I’m seeing a line below tree …
How to set tree height according to expander height ?Hi usrimas,
Please try setting the expander’s height to hgh, too, and make sure you are using the HTML structure I provided for your expander.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you Dimitar .
I did copy/paste your suggested html . The same result – clicking on tree item expander header dissapear . Also tried for tree to minimize height: hgh -120 works .
But I did htmlx code look like that :
<div style="border: none;" id="mExp"> <div class="jqx-hideborder">Pagrindinis meniu</div> <div id='mTree'></div> </div>
And expander with tree directed without ‘height’ properties . Now it works very fine and no lines at bottom of tree .
Thanks for you ! 🙂
-
AuthorPosts
You must be logged in to reply to this topic.