Can jQuery UI target one element and not others on a single page?

I am using the jQuery UI with applied Theme to a datatables.net element. Unfortunately, this element resides within a 'tabs' container and the jquery UI (while needed for the datatables.net ui look/feel) is messing up everything else.

I have been unsuccessful finding if they can be independent of one another?

Any luck in the past?

Code sample:

A user clicks a link which opens a modal开发者_如何转开发 window. Within that window, the file index.php is called:

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>

if a user clicks on tab2, the call is made to retrieve page2.php. Page 2.php contains the datatables.net element (and as such, the result js is included)

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>

You can scope the CSS

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

maybe that is want you are looking for.