jsViewHKL/jsViewHKLtabs.html at master · choiboy92/jsViewHKL · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE HTML>
<html>
<head>
<style>
    div {
        padding:10px;
        width:600px;
        background:#fff;
    }

    .tabs li {
        list-style:none;
        display:inline;
    }

    .tabs a {
        padding:10px 20px;
        display:inline-block;
        background:#66cccc;
        color:#fff;
        text-decoration:none;
        font-family: Arial;
    }

    .tabs a.active {
        background:#fff;
        color:#000;
    }
</style>
<script>
$(document).ready(function()
{
    $('ul.tabs').each(function ()
    {
        var $active, $content, $links = $(this).find('a');
        $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
        $active.addClass('active');

        $content = $($active[0].hash);
        // Hide others
        $links.not($active).each(function ()
        {
            $(this.hash).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function(e)
        {
            // Make the old tab inactive.
            $active.removeClass('active');
            $content.hide();

            // Update the variables with the new link and content
            $active = $(this);
            $content = $(this.hash);

            // Make  tab active.
            $active.addClass('active');
            $content.show();
            e.preventDefault();
        });
    });
    $( function() {
        $( "#collapse" ).accordion();
    });
});
</script>
</head>
<body>
    <p>
        <!--Horizontal line across page-->
    </p>
    <!--This is where i make my tabs-->
    <ul class ="tabs">
    <li><a href="#tab1">General</a></li>
    <li><a href="#tab2">Summary</a></li>
    <li><a href="#tab3">HKL List</a></li>
    <li><a href="#tab4">HKL Zones</a></li>
    </ul>
    <div id="tab1" style="width:100%;">
        <!-- Things that go inside tab 1-->
        <p><hr></p>
        <h3>General data</h3>
        <p>
            Here a table will be placed</br>
        </p>
        <div id="collapse">
            <h5>Columns common to all datasets (will be collapsible)</h5>
            <p>
                Hopefully this is collapsable
            </p>
        </div>
        <p>
            Dataset #n (should also be collapsible)</br>
        </p>
    </div>
    <div id="tab2" style="width:100%;">
        <h3>History</h3>
        <!-- Things that go inside tab 2-->
        <p>
            This is where history records of the file will go
        </p>
        <h3>Summary</h3>
        <p>
            Here another table containing summary data will be placed
        </p>
    </div>
    <div id="tab3" style="width:100%;">
        <h3>HKL List</h3>
        <!-- Things that go inside tab 3-->
        <p>
            This is the text for HKL List
        </p>
    </div>
    <div id="tab4" style="width:100%;">
        <h3>HKL Zones</h3>
        <p>
            Here the 3D implementations of the protein structure will be placed
        </p>
    </div>
</body>
</html>