More Group Sites
Education Books
School Rankings
Jobless Net
Better Home
Enviro++
更好教育论坛


Help | Subscribe/Unsubscribe | Rules | Other Group Sites: Better Education | Better Education Forum
Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error

Share
Options
View
Go to last post Go to first unread
hong  
#1 Posted : Sunday, 24 July 2016 2:21:50 PM(UTC)
hong

Rank: Administration

Reputation:

Groups: AcademicCoachingSchool, admin, Administration, BookSeller, CatholicSchool, CoachingAdult, CoachingProfessional, CoachingSports, ExtraCurriculumCoaching, IndependentSchool, Moderator, MusicTeacher, PrivateSchool, PublicSchool, SelectiveSchool, tutor
Joined: 23/11/2008(UTC)
Posts: 519

Activate Bootstrap menu item in a common place master page

When a page reloads, its menu tree is normally collapse. If we want to keep it expended and the active menu item remembered, we can set the Bootstrap menu item <li> tag of the page active: class='active". If it's parent <ul> tag is also set to active, all the active li and parent ul elements cannot be collapsed. This applies to SmartAdmin menus too. When a menu is clicked, the menu item will be highlighted in bold automatically and parent menu keep expanded.

The following example code works for ASP.NET master-children pages. A Child page can have local scripts like "$(document).ready(function () {..." or even using local scripts with 2nd ContentPlaceHolder, for example, using jquery DataTable functionalities in ASP.NET. Place the scripts BEFORE <asp:ContentPlaceHolder> tag.

Code:
                <%--required, event though already exists in this master page, this for this ContentPlaceHolder Content1--%>
                <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <script>
                    if (!window.jQuery) {
                        document.write('<script src="js/libs/jquery-2.1.1.min.js"><\/script>');
                    }
                </script>

                <script type="text/javascript">
                    $(document).ready(function () {
                        //pageSetUp();

                        /*
                         * Just active the Bootstrap menu item
                         */
                        //If it's parent <ul> tag is also set to active, all the active li and parent ul elements cannot be collapsed.
                        //$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');
                        $('a[href="' + this.location.pathname + '"]').parents('li').addClass('active');
                    })
                </script>

                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>


Workaround by 3rd party: set active class to nav menu from twitter bootstrap on each page js
http://stackoverflow.com...u-from-twitter-bootstrap

Reference:
Bootstrap add active class to li
http://totalprogus.blogs...-active-class-to-li.html

Edited by user Sunday, 18 September 2016 2:32:58 PM(UTC)  | Reason: Not specified

Sponsor
Rss Feed  Atom Feed
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.