jQuery UI 能否针对单个页面上的一个元素而不是其他元素？

Question

我正在使用带有应用主题的 jQuery UI 到 datatables.net 元素。不幸的是，这个元素位于一个“选项卡”容器中，并且 jquery UI（虽然需要 datatables.net ui 外观/感觉）正在搞乱其他一切。

我一直没能找到它们是否可以相互独立？

过去有什么运气吗？

代码示例：

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

index.php - 头

<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 - 正文

<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/

也许这就是你想要的。