Bootstrap Trees

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
#1
PHP Code:
<div class="tree well">
    <
ul>
        <
li>
            <
span><class="icon-folder-open"></iParent</span> <a href="">Goes somewhere</a>
            <
ul>
                <
li>
                    <
span><class="icon-minus-sign"></iChild</span> <a href="">Goes somewhere</a>
                    <
ul>
                        <
li>
                            <
span><class="icon-leaf"></iGrand Child</span> <a href="">Goes somewhere</a>
                        </
li>
                    </
ul>
                </
li>
                <
li>
                    <
span><class="icon-minus-sign"></iChild</span> <a href="">Goes somewhere</a>
                    <
ul>
                        <
li>
                            <
span><class="icon-leaf"></iGrand Child</span> <a href="">Goes somewhere</a>
                        </
li>
                        <
li>
                            <
span><class="icon-minus-sign"></iGrand Child</span> <a href="">Goes somewhere</a>
                            <
ul>
                                <
li>
                                    <
span><class="icon-minus-sign"></iGreat Grand Child</span> <a href="">Goes somewhere</a>
                                    <
ul>
                                        <
li>
                                            <
span><class="icon-leaf"></iGreat great Grand Child</span> <a href="">Goes somewhere</a>
                                        </
li>
                                        <
li>
                                            <
span><class="icon-leaf"></iGreat great Grand Child</span> <a href="">Goes somewhere</a>
                                        </
li>
                                     </
ul>
                                </
li>
                                <
li>
                                    <
span><class="icon-leaf"></iGreat Grand Child</span> <a href="">Goes somewhere</a>
                                </
li>
                                <
li>
                                    <
span><class="icon-leaf"></iGreat Grand Child</span> <a href="">Goes somewhere</a>
                                </
li>
                            </
ul>
                        </
li>
                        <
li>
                            <
span><class="icon-leaf"></iGrand Child</span> <a href="">Goes somewhere</a>
                        </
li>
                    </
ul>
                </
li>
            </
ul>
        </
li>
        <
li>
            <
span><class="icon-folder-open"></iParent2</span> <a href="">Goes somewhere</a>
            <
ul>
                <
li>
                    <
span><class="icon-leaf"></iChild</span> <a href="">Goes somewhere</a>
                </
li>
            </
ul>
        </
li>
    </
ul>
</
div>

<
div class="tree">
    <
ul>
        <
li>
            <
span><class="icon-calendar"></i2013Week 2</span>
            <
ul>
                <
li>
                    <
span class="badge badge-success"><class="icon-minus-sign"></iMondayJanuary 78.00 hours</span>
                    <
ul>
                        <
li>
                            <
a href=""><span><class="icon-time"></i8.00</span> &ndashChanged CSS to accomodate...</a>
                        </
li>
                    </
ul>
                </
li>
                <
li>
                    <
span class="badge badge-success"><class="icon-minus-sign"></iTuesdayJanuary 88.00 hours</span>
                    <
ul>
                        <
li>
                            <
span><class="icon-time"></i6.00</span> &ndash; <a href="">Altered code...</a>
                        </
li>
                        <
li>
                            <
span><class="icon-time"></i2.00</span> &ndash; <a href="">Simplified our approach to...</a>
                        </
li>
                    </
ul>
                </
li>
                <
li>
                    <
span class="badge badge-warning"><class="icon-minus-sign"></iWednesdayJanuary 96.00 hours</span>
                    <
ul>
                        <
li>
                            <
a href=""><span><class="icon-time"></i3.00</span> &ndashFixed bug caused by...</a>
                        </
li>
                        <
li>
                            <
a href=""><span><class="icon-time"></i3.00</span> &ndashComitting latest code to Git...</a>
                        </
li>
                    </
ul>
                </
li>
                <
li>
                    <
span class="badge badge-important"><class="icon-minus-sign"></iWednesdayJanuary 94.00 hours</span>
                    <
ul>
                        <
li>
                            <
a href=""><span><class="icon-time"></i2.00</span> &ndashCreate component that...</a>
                        </
li>
                    </
ul>
                </
li>
            </
ul>
        </
li>
        <
li>
            <
span><class="icon-calendar"></i2013Week 3</span>
            <
ul>
                <
li>
                    <
span class="badge badge-success"><class="icon-minus-sign"></iMondayJanuary 148.00 hours</span>
                    <
ul>
                        <
li>
                            <
span><class="icon-time"></i7.75</span> &ndash; <a href="">Writing documentation...</a>
                        </
li>
                        <
li>
                            <
span><class="icon-time"></i0.25</span> &ndash; <a href="">Reverting code back to...</a>
                        </
li>
                    </
ul>
                </
li>
            </
ul>
        </
li>
    </
ul>
</
div

Code:
$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});

Code:
.tree {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#fbfbfb;
    border:1px solid #999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:3px 8px;
    text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}

hasilnya You are not allowed to view links. Register or Login to view.

tentunya, trik ini bisa digabungkan dengan MyBB Gasp
Tuhan Yesus itu baik  Angel
Reply
#1
PHP Code:
<div class="tree well">
    <
ul>
        <
li>
            <
span><class="icon-folder-open"></iParent</span> <a href="">Goes somewhere</a>
            <
ul>
                <
li>
                    <
span><class="icon-minus-sign"></iChild</span> <a href="">Goes somewhere</a>
                    <
ul>
                        <
li>
                            <
span><class="icon-leaf"></iGrand Child</span> <a href="">Goes somewhere</a>
                        </
li>
                    </
ul>
                </
li>
                <
li>
                    <
span><class="icon-minus-sign"></iChild</span> <a href="">Goes somewhere</a>
                    <
ul>
                        <
li>
                            <
span><class="icon-leaf"></iGrand Child</span> <a href="">Goes somewhere</a>
                        </
li>
                        <
li>
                            <
span><class="icon-minus-sign"></iGrand Child</span> <a href="">Goes somewhere</a>
                            <
ul>
                                <
li>
                                    <
span><class="icon-minus-sign"></iGreat Grand Child</span> <a href="">Goes somewhere</a>
                                    <
ul>
                                        <
li>
                                            <
span><class="icon-leaf"></iGreat great Grand Child</span> <a href="">Goes somewhere</a>
                                        </
li>
                                        <
li>
                                            <
span><class="icon-leaf"></iGreat great Grand Child</span> <a href="">Goes somewhere</a>
                                        </
li>
                                     </
ul>
                                </
li>
                                <
li>
                                    <
span><class="icon-leaf"></iGreat Grand Child</span> <a href="">Goes somewhere</a>
                                </
li>
                                <
li>
                                    <
span><class="icon-leaf"></iGreat Grand Child</span> <a href="">Goes somewhere</a>
                                </
li>
                            </
ul>
                        </
li>
                        <
li>
                            <
span><class="icon-leaf"></iGrand Child</span> <a href="">Goes somewhere</a>
                        </
li>
                    </
ul>
                </
li>
            </
ul>
        </
li>
        <
li>
            <
span><class="icon-folder-open"></iParent2</span> <a href="">Goes somewhere</a>
            <
ul>
                <
li>
                    <
span><class="icon-leaf"></iChild</span> <a href="">Goes somewhere</a>
                </
li>
            </
ul>
        </
li>
    </
ul>
</
div>

<
div class="tree">
    <
ul>
        <
li>
            <
span><class="icon-calendar"></i2013Week 2</span>
            <
ul>
                <
li>
                    <
span class="badge badge-success"><class="icon-minus-sign"></iMondayJanuary 78.00 hours</span>
                    <
ul>
                        <
li>
                            <
a href=""><span><class="icon-time"></i8.00</span> &ndashChanged CSS to accomodate...</a>
                        </
li>
                    </
ul>
                </
li>
                <
li>
                    <
span class="badge badge-success"><class="icon-minus-sign"></iTuesdayJanuary 88.00 hours</span>
                    <
ul>
                        <
li>
                            <
span><class="icon-time"></i6.00</span> &ndash; <a href="">Altered code...</a>
                        </
li>
                        <
li>
                            <
span><class="icon-time"></i2.00</span> &ndash; <a href="">Simplified our approach to...</a>
                        </
li>
                    </
ul>
                </
li>
                <
li>
                    <
span class="badge badge-warning"><class="icon-minus-sign"></iWednesdayJanuary 96.00 hours</span>
                    <
ul>
                        <
li>
                            <
a href=""><span><class="icon-time"></i3.00</span> &ndashFixed bug caused by...</a>
                        </
li>
                        <
li>
                            <
a href=""><span><class="icon-time"></i3.00</span> &ndashComitting latest code to Git...</a>
                        </
li>
                    </
ul>
                </
li>
                <
li>
                    <
span class="badge badge-important"><class="icon-minus-sign"></iWednesdayJanuary 94.00 hours</span>
                    <
ul>
                        <
li>
                            <
a href=""><span><class="icon-time"></i2.00</span> &ndashCreate component that...</a>
                        </
li>
                    </
ul>
                </
li>
            </
ul>
        </
li>
        <
li>
            <
span><class="icon-calendar"></i2013Week 3</span>
            <
ul>
                <
li>
                    <
span class="badge badge-success"><class="icon-minus-sign"></iMondayJanuary 148.00 hours</span>
                    <
ul>
                        <
li>
                            <
span><class="icon-time"></i7.75</span> &ndash; <a href="">Writing documentation...</a>
                        </
li>
                        <
li>
                            <
span><class="icon-time"></i0.25</span> &ndash; <a href="">Reverting code back to...</a>
                        </
li>
                    </
ul>
                </
li>
            </
ul>
        </
li>
    </
ul>
</
div

Code:
$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});

Code:
.tree {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#fbfbfb;
    border:1px solid #999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:3px 8px;
    text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}

hasilnya You are not allowed to view links. Register or Login to view.

tentunya, trik ini bisa digabungkan dengan MyBB Gasp
Tuhan Yesus itu baik  Angel
Reply


Messages In This Thread
Bootstrap Trees - by terzier - 05-16-2014, 03:40 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)