All geek questions in one place

JQuery.load () and subpages

I am not just a newbie with Javascript. I am developing a simple website to access web programming. The website is simple and the structure is as follows:

  • Simple ul / li / css based navigation menu
  • Subpages are loaded into a "div" using jQuery when the user clicks the corresponding menu item.
  • Some of the subpages use different jQuery-based plugins, such as LightWindow, jTip, etc.

The jQuery function loading the subpage looks like this:

function loadContent(htmlfile){
    jQuery("#content").load(htmlfile);
};

Menu items trigger the loadContent method as follows:

<li><a href="javascript:void(0)" onclick="loadContent('overview.html');return false">overview</a></li>

This loads the subpage name "overview.html" inside the "div".

What is it.

, , jQuery, "div" . , .

, :

  • jQuery, "index.html" loadContent.

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

    ?

  • jQuery, ? "index.html" , ?

  • , script index.html, , . ?

: screenshot.html. , , jQuery load() "index.html"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <script type='text/javascript' src='js/prototype.js'></script>
        <script type='text/javascript' src='js/scriptaculous/scriptaculous.js'></script>
        <script type='text/javascript' src='js/lightview.js'></script>
        <link rel="stylesheet" type="text/css" href="css/lightview.css" />
    </head>

    <body>
        <h3 style="text-align:left;">Screenshots</h3>

        <div align="center">
            <a class="lightview" href="images/ss_win1.png" title="Title"><img src="images/ss_win1_thumb.png" alt="" class="whiteborder"/></a>
            <a class="lightview" href="images/ss_win2.png" title="Title"><img src="images/ss_win2_thumb.png" alt="" class="whiteborder"/></a>
            <a class="lightview" href="images/ss_win3.png" title="Title"><img src="images/ss_win3_thumb.png" alt="" class="whiteborder"/></a>
        </div>
    </body>
</html>
+3
4

, , DOM, , :

function loadContent(htmlfile){
    jQuery("#content").load(htmlfile), function(response) {

        // this gets executed after the response has been inserted into the DOM
        jQuery(response).find("#someElement").fooPlugin();
    });
};

live delegate, , , . :

, , .

:

$("a").live("click", function() {
    alert("this will alert even after this anchor has been replaced via ajax");
});
+1

, myPlugin. index.html :

jQuery(function() {
    jQuery('#selector').myPlugin();
});

, .load() , #selector, . : #selector , .myPlugin(), #selector .

.myPlugin() .load(), :

function loadContent(htmlfile) {
    jQuery('#content').load(htmlfile, function(response) {
        jQuery(response).find('#selector').myPlugin();
    });
}

:

  • , jQuery .

  • index.html, .

  • .

+2

html-, , ,

$('#content').load('plugin.html #plugin-body');

()

,

pluginInitialize (initParams);

. ( ).

+1

jquery .

jQuery , .

, ul ,

$('ul#menu li a').click(function() {
   var url = $(this).attr('href');
   $('#content').load(url);
});

, , itouch:)

0

Source: https://habr.com/ru/post/1747765/

More articles:


All Articles