[Infusion-users] Tabs with jQuery + infusion

Stál Zoltán zoltanstal at gmail.com
Wed Jun 17 19:57:37 UTC 2009


Hi everyone!

I made a tab-system using jquery + infusion. It's great: the tabs are
sortable by dragging
and the hidden tabs can be viewed by scrolling with navigation arrows. The
last thing I
wanted to do is to fix the position of the first tab (named 'General') so
that it stays in
place even when the others to its right are scrolling. How is this possible?
Everything
I tried to embed interfered with the previous code (eg. the tab - pane was
split apart, etc.)

Please tell me how to exclude that one list element so that it won't scroll
!
Here are my code snippets:

    <!-- previous link -->
<a class="prev"></a>

    <div class="scrollable">

        <!-- tabs -->
        <ul class="tabs">


            <li class="fixed"><a href="#tab_0">General</a></li>
            <!-- THIS TAB SHOULD STAY IN PLACE -->

            <li class="movable"><a href="#tab_1">Page 1</a></li>
            <li class="movable"><a href="#tab_2">Page 2</a></li>
            <li class="movable"><a href="#tab_3">Page 3</a></li>
            <li class="movable"><a href="#tab_4">Page 4</a></li>
            <li class="movable"><a href="#tab_5">Page 5</a></li>
            <li class="movable"><a href="#tab_6">Page 6</a></li>
            <li class="movable"><a href="#tab_7">Page 7</a></li>
            <li class="movable"><a href="#tab_8">Page 8</a></li>
            <li class="movable"><a href="#tab_9">Page 9</a></li>
            <li class="movable"><a href="#tab_10">Page 10</a></li>
        </ul>

    </div>

    <!-- next link -->
    <a class="next"></a>
    <script language="javascript" type="text/javascript">

// activate tabs
     $(function() {
$("ul.tabs").tabs("div.panes > div");
});
 // enable scrolling
$(function() {
$("div.scrollable").scrollable({
items: 'ul.tabs',
clickable: false,
});
});
 </script>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/infusion-users/attachments/20090617/ec6d8db9/attachment.html>


More information about the Infusion-users mailing list