Announcement

Collapse
No announcement yet.

Changing layout of the tree menu with event

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Changing layout of the tree menu with event

    Changing layout of the tree menu with event

    ScriptCase has its own themes by default, so to help your design productivity. And that's great, but not so the user is limited in customizing your own theme. It is possible to alter through events, events that are loaded with application. In this example I will use the onLoad event.


    I am using as an example a standard tree menu created by the security module.


    See the result in the below image.
    treemenu_en.png
































    Did you like? Now see how simple it is!


    1. In the event onLoad use the following code to change the CSS of the generated application.


    Code:
    ?>
        <style>
            #css3menut{width:220px;}
            .jstree-container-ul jstree-no-dots jstree-wholerow-ul{width:215px;}
            .scMenuTTable{background-color:#fff !important;}
            .scMenuTItems{
                font-weight: bold;
                padding: 0px 10px 0px 10px;
                color:#fff !important;
            }
            .scMenuTSubItems {
                font-weight: normal !important;
                padding: 0px 10px 0px 10px;
                color:#333 !important;
            }
            .jstree-default .jstree-anchor{padding:11px;}
            .jstree-default .jstree-node {margin-left:0px !important;}
            .jstree-default .jstree-wholerow {
                height:30px !important;
                padding:23px;
            }
            .jstree-default>.jstree-no-dots .jstree-open>.jstree-ocl {margin-top:11.8px;}
            .jstree-default>.jstree-no-dots .jstree-closed>.jstree-ocl {margin-top:11.8px;}
            .jstree-wholerow-ul .jstree-wholerow{background-color:#598DB5 !important;border-right:1px solid #D8D8D8}
            .jstree-children .jstree-wholerow {
                background-color:#fff !important;
                border-width:1px !important;
                border-color:#D8D8D8 !important;
                border-style:solid !important;
            }
            .jstree-children .jstree-wholerow-hovered {background-color:#F1F1F1 !important;}
        </style>
    <?php
    2. In the General Settings menu use this:
    - Menu width: 230
    - Expand Items: Yes
    - Hide the dotted lines of the menu: Yes


    3. In sub-items use in the configuration items, inform the label as follows:


    Syntax: <span class="scMenuTSubItems">label</span>

    Ej.:
    <span class="scMenuTSubItems">Privileges Panel</span>
    <span class="scMenuTSubItems">Show Users</span>
    <span class="scMenuTSubItems">New User</span>
    <span class="scMenuTSubItems">Show Departments</span>
    <span class="scMenuTSubItems">New Department</span>
    <span class="scMenuTSubItems">Change Password</span>



    Note: The following images used in menu items and sub-items on the link below:
    https://drive.google.com/folderview?...0U&usp=sharing


    Administrative admin-menu.png
    Privileges Panel controlpanel-menu.png
    Users user-menu.png
    Show Users list-menu.png
    New User form-menu.png
    Departments group-menu.png
    Show Departments list-menu.png
    New Department form-menu.png
    Profile me-menu.png
    Change Password changepass-menu.png
    Last edited by John L. Santos; 05-30-2015, 06:47 PM.
    Best Regards,
    John L. Santos

    Bug Tracker Team
    NetMake - IT Solutions

  • #2
    Beautiful... +1
    /Giuseppe

    Professional Scriptcase Services
    Some Customers opinions

    Comment


    • #3
      So beautiful dude, congrats.

      Comment


      • #4
        Great! Thank you for sharing this.
        RankFirstHosting.Com | SEO Hosting with Multiple C-Class IPs

        Comment


        • #5
          Great tip, thanks. i tried with SC 8.1.055 but it doesnīt work very well the header disappear i donīt know why

          Comment


          • #6
            If your menu applications shows tabs then make sure to remove the quotation marks from the sub menu items.

            Ej.:
            <span class=scMenuTSubItems>Privileges Panel</span>
            ************************************************** ********
            We are Developing your Future Business Requirement right now with Scriptcase.
            www.sri.com.au & www.madikonda.com

            Comment


            • #7
              Great post John!!

              Comment


              • #8
                Originally posted by madikonda View Post
                If your menu applications shows tabs then make sure to remove the quotation marks from the sub menu items.

                Ej.:
                <span class=scMenuTSubItems>Privileges Panel</span>

                Why do you remove the quotation marks?

                Comment


                • #9
                  The Quotation marks show up in the Tab as text.
                  ************************************************** ********
                  We are Developing your Future Business Requirement right now with Scriptcase.
                  www.sri.com.au & www.madikonda.com

                  Comment


                  • #10
                    Ah. Did not notice that. Thank you.

                    Comment


                    • #11
                      I am working on mapping all SC classes to bootstrap 4 classes and then we could include this js file...

                      I would like to put on github...Anyone interested in contributing?

                      (Haven't seen SC 9 yet though...So is it a waste of time?)

                      Comment

                      Working...
                      X