jQuery UI可以在一个页面上定位一个元素而不是其他元素吗？

Question

我正在使用带有应用主题的jQuery UI到datatables.net元素。不幸的是，这个元素位于'tabs'容器中，而jquery UI（在datatables.net ui外观/感觉需要的时候）正在弄乱其他所有内容。

我发现他们是否可以彼此独立是不成功的？

过去运气好吗？

代码示例：

用户单击打开模态窗口的链接。在该窗口中，调用index.php文件：

index.php - head

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $( "#tabs" ).tabs({
                    spinner: '',
                    select: function(event, ui) {
                        var tabID = "#ui-tabs-" + (ui.index + 1);
                        $(tabID).html("<b>Fetching Data.... Please wait....</b>");
                    },
                    ajaxOptions: {
                        error: function( xhr, status, index, anchor ) {
                            $( anchor.hash ).html(
                                "Error: Could not retrieve information. Please contact Technical Support at XXXX." );
                        }
                    }
                });
            });
        </script>

index.php - body

<div id="tabs">
            <ul>
                <li><a href="#pre_loaded">General Information</a></li>
                <li><a href="link1.php">Page 1</a></li>
                <li><a href="link2.php">Page 2</a></li>
            </ul>

            <div id="pre_loaded">

                Please navigate using the tabs above for more information

            </div>                                    

        </div>

如果用户点击tab2，则调用以检索page2.php。第2.php页包含datatables.net元素（因此，包含结果js）

使page2.php

    <!-- // General meta information -->
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/flick/jquery-ui.css" media="all" />
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

        var nCloneTh = document.createElement( 'th' );
        var nCloneTd = document.createElement( 'td' );
        nCloneTd.innerHTML = '<img src="../../examples_support/details_open.png">';
        nCloneTd.className = "center";

        $('#sortable thead tr').each( function () {
            this.insertBefore( nCloneTh, this.childNodes[0] );
        } );

        $('#sortable tbody tr').each( function () {
            this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
        } );

        $('#sortable tbody td img').live('click', function () {
            var nTr = this.parentNode.parentNode;
            if ( this.src.match('details_close') )
            {
                this.src = "../../examples_support/details_open.png";
                oTable.fnClose( nTr );
            }
            else
            {
                this.src = "../../examples_support/details_close.png";
                oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
            }
        } );

    oTable = $('#sortable').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "aaSorting": [[ 3, "asc" ]],
            "sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
        });

} );
</script>

Answer 1

您可以使用CSS范围

http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

也许这就是你想要的。