Gestion DSI Liste

by lun471k

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<article id="mainList">
    <ul>
        <li><a href="#liste-DSI-reguliere">DSI</a>

        </li>
        <li><a href="#liste-DSI-deadline">Deadline</a>

        </li>
        <li><a href="#liste-DSI-projet">Projets</a>

        </li>
        <li><a href="ajax/content2.html">Interne</a>

        </li>
    </ul>
    
    <div id="liste-DSI-reguliere">
        <table id="DSI-table-reguliere" class="liste-dsi">
            <thead>
                <tr>
                    <th>Demandes Régulières</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="DSI reguliere"> <span class="cote reguliere rouge">100</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="DSI reguliere"> <span class="cote reguliere orange">85</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="DSI reguliere"> <span class="cote reguliere bleu">25</span>

                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <div id="liste-DSI-deadline">
        <table class="liste-dsi">
            <thead>
                <tr>
                    <th>Demandes Deadline</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="DSI deadline"> <span class="cote reguliere rouge">100</span>
                            
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                       ...

CSS

.liste-dsi {
    width:100%;
    height:100px;
    border:1px solid #333;
}
table tbody tr, table tbody tr td {
    width:100%;
    height:35px;
}
.DSI {
    background-color:#CCC;
    padding:3px;
    border-radius:2px;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
}
.DSI:hover {
    cursor:pointer;
    background-color:#CFCFCF;
}
.DSI:active {
    background-color:#AAA;
}
/* DEADLINE */
 td>.DSI.deadline {
    border:1px outset rgba(255,0,0,0.3);
}

/* PROJET */
/* DEADLINE */
 td>.DSI.projet {
    border:1px outset rgba(255,0,200,0.3);
}
.cote {
    display:inline-block;
    margin: 0 auto;
    text-align:center;
    width:35px;
    height:25px;
    background-color:transparent;
    padding:6px 0px 0px 0px;
    font-family:arial;
    font-size:0.9em;
    color:#fff;
    border-radius:4px;
    margin-left:5px;
}
.bleu {
    background-color:#00BFFF;
}
.orange {
    background-color:#F50;
}
.rouge {
    background-color: #F00;
}

JavaScript

$('#mainList').tabs();