jQuery UI Widgets Forums Layouts Splitter Initialize 3T

This topic contains 7 replies, has 2 voices, and was last updated by  usrimas 5 years, 7 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Initialize 3T #61682

    usrimas
    Participant

    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 ! 🙂

    Initialize 3T #61685

    usrimas
    Participant

    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” ?

    Initialize 3T #61702

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Initialize 3T #61777

    usrimas
    Participant

    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 …

    Initialize 3T #61795

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Initialize 3T #61809

    usrimas
    Participant

    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 ?

    Initialize 3T #61857

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Initialize 3T #61892

    usrimas
    Participant

    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 ! 🙂

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.