Bootstrap Snippet Submission list box using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
                    <ul id="ItemsBoxList">
                        <li class="mailboxItemDefault" data-mailitem="4" data-newitem="yes">
                            <table class="mailboxItemTable">
                                <tr>
                                    <td><div class="mailboxItemReference">Наименование</div><div class="mailboxItemNew"><span id="mailboxItemNewIcon" class="badge">new</span></div></td>
                                    <td>20:10 10/05/2016</td>
                                </tr>
                                <tr>
                                    <td colspan="2">Описание этого элемента, оно может быть даже длинным, или очень длинным</td>
                                </tr>      
                                <tr>
                                    <td colspan="2">здесь дополнительная информация</td>
                                </tr> 
                            </table>            
                        </li>
                        <li class="mailboxItemDefault" data-mailitem="4" data-newitem="yes">
                            <table class="mailboxItemTable">
                                <tr>
                                    <td><div class="mailboxItemReference">Наименование</div><div class="mailboxItemNew"><span id="mailboxItemNewIcon" class="badge">new</span></div></td>
                                    <td>20:10 10/05/2016</td>
                                </tr>
                                <tr>
                                    <td colspan="2">Описание этого элемента, оно может быть даже длинным, или очень длинным</td>
                                </tr>      
                                <tr>
                                    <td colspan="2">здесь дополнительная информация</td>
                                </tr> 
                            </table>            
                        </li>
                        <li class="mailboxItemDefault" data-mailitem="4" data-newitem="yes">
                            <table class="mailboxItemTable">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.Listbox  {
    
    width: 100%;
    height: 100%;
    
}
.Listbox td {
    
    vertical-align: top;
    height: 100%:
}
.Listbox td:nth-child(1) {
    width: 30px;
    
}
.Listbox td:nth-child(2) {
    
    width: 260px;
    
}
.Listbox td:nth-child(3) {
    
    width: 360px;
    
}
.Listbox td:nth-child(4) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$( document ).ready(function() {
    initUI();
});
function initUI() {
    
    $("#menuList li").click(function(){
        
        var thisItem = this;
        var currentClass = $(this).attr("class");
        $(this).attr("class", "menuListItemSelected");
        
        loadMailbox($(this).data("target"));
        
        
        $("#menuList li").each(function(){
            if (this !== thisItem) {
                
                $(this).attr("class", "menuListItemDefault").animate({backgroundColor: "#17141f", color: "#b8b5c0"},{duration: 170, complete: function() {}} ); ;;
                
            }
   
        });
        
    });
    
    $("#menuList li").hover(function(){
        
        var currentClass = $(this).attr("class");
        
        if (currentClass == "menuListItemDefault") { 
            
            $(this).stop().animate({backgroundColor: "#201c2b", color: "#f3f3f3"},{duration: 170, complete: function() {}} ); 
        
        } else if (currentClass == "menuListItemSelected") {
            
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Submission list box"
Bootstrap 3.3.0 Snippet by comandor

Related: See More

Questions / Comments:

"Submission list box" Bootstrap 3.3.0 Snippet by comandor

Related: See More

Questions / Comments:

"Submission list box"
Bootstrap 3.3.0 Snippet by comandor