JavaScript DHTML/YUI Library/Loader

Материал из Web эксперт
Версия от 10:28, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Using Ajax for deferred loading of items

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Using Ajax for deferred loading of items</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/carousel/assets/skins/sam/carousel.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/carousel/carousel-min.js"></script>


<style type="text/css">

   /* Style the spotlight container */
   #spotlight {
       border: 1px solid #ccc;
       height: 240px;
       margin: 10px auto;
       padding: 1px;
       text-align: center;
       width: 240px;
   }
   #carousel {
       margin: 0;
   }
   #container {
       margin: 0 auto;
   }
   .yui-skin-sam .yui-carousel-nav ul,
   .yui-skin-sam .yui-carousel-nav select {
       display: none;
   }
   
   .yui-carousel-element li {
       height: 75px;
       width: 75px;
   }

</style>

</head> <body class=" yui-skin-sam">

Using Ajax for deferred loading of items

This example showcases the dynamic loading capabilities of the <a href="http://developer.yahoo.ru/yui/carousel/">YUI Carousel Control</a>. The YUI Carousel Control exposes an event called loadItems. This event is fired whenever the Carousel needs items to be loaded into it for display. Subscribing to this event makes it easy to dynamically load the next set of images.


<script>

   var curpos, items = [];
   function getImageTag(img) {
       return "<img src=\"" + img + "\" height=\"75\" width=\"75\">";
   }
   function getImages() {
       var carousel = this;
               
       YAHOO.util.Connect.asyncRequest("GET", "yui_2.7.0b-assets/carousel-assets/php/getimages.php?pos="+curpos,
               {
                   success: function (o) {
                       var i = curpos,
                           j = 0,
                           r = eval("(" + o.responseText + ")");
                           
                       curpos += r.length;
                       while (i < curpos) {
                           if (r[j]) {
                               carousel.addItem(getImageTag(r[j]));
                           } else {
                               break;
                           }
                           i++;
                           j++;
                       }
                       carousel.set("selectedItem", carousel.get("firstVisible"));
                   },
                   failure: function (o) {
                       alert("Ajax request failed!");
                   }
       });
   }
               
   // Get the image link from within its (parent) container.
   function getLargeImage(parent) {
       var el = parent.firstChild;
               
       while (el) { // walk through till as long as there"s an element
           if (el.nodeName.toUpperCase() == "IMG") { // found an image
               // flickr uses "_s" suffix for small, and "_m" for big
               // images respectively
               return el.src.replace(/_s\.jpg$/, "_m.jpg");
           }
           el = el.nextSibling;
       }
               
       return "";
   }
   YAHOO.util.Event.onDOMReady(function (ev) {
       var carousel, spotlight = YAHOO.util.Dom.get("spotlight");
      
       carousel = new YAHOO.widget.Carousel("container", {
               numItems: 17
       });
 
       YAHOO.util.Connect.asyncRequest("GET", "yui_2.7.0b-assets/carousel-assets/php/getimages.php", {
               success: function (o) {
                   var i, r = eval("(" + o.responseText + ")");
                   
                   curpos = r.length;
                   for (i = 0; i < curpos; i++) {
                       items.push(r[i]);
                   }
                   // check if the Carousel widget is available
                   if (typeof carousel != "undefined") {
                       for (i = 0; i < curpos; i++) {
                           // if so, shove the elements into it
                           carousel.addItem(getImageTag(items[i]));
                       }
                       carousel.set("selectedItem", 0);
                       items = [];
                   }
               },
               failure: function (o) {
                   alert("Ajax request failed!");
               }
       });
               
       carousel.on("loadItems", function (o) {
           // more items available?
           getImages.call(this);
       });
               
       carousel.on("itemSelected", function (index) {
           // item has the reference to the Carousel"s item
           var item = carousel.getElementForItem(index);
           if (item) {
               spotlight.innerHTML = "<img src=\""+getLargeImage(item)+"\">";
           }
       });
           
       carousel.render();
       carousel.show();
   });

</script>

</body> </html>


 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


YUI Loader Utility: Loading the YUI Calendar Control with the YUI Loader Utility

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

 <title>YUI Loader Utility Example: Loading YUI TreeView and Calendar with the YUI Loader Utility</title>

</head> <body class="yui-skin-sam">

YUI Loader Utility Example: Loading the YUI Calendar Control with the YUI Loader Utility

In this example, we bring a YUI component onto the page using the <a href="http://developer.yahoo.ru/yui/loader/">YUI Loader Utility</a>. This example implements YUI Loader via a YAHOO.util.YUILoader instance. We load the YUI Loader script file, then specify in configuration which component we want loaded on the page — and what we want to do once it is loaded.

<script src="yui_2.7.0b-lib/yuiloader/yuiloader.js"></script> <script>

   var loader = new YAHOO.util.YUILoader({
       require: ["calendar"], // what components?
       base: "yui_2.7.0b-lib/",//where do they live?
   //filter: "DEBUG",   //use debug versions (or apply some
             //some other filter?
   //loadOptional: true, //load all optional dependencies?
   //onSuccess is the function that YUI Loader
   //should call when all components are successfully loaded.
       onSuccess: function() {
     //Once the YUI Calendar Control and dependencies are on
     //the page, we"ll verify that our target container is 
     //available in the DOM and then instantiate a default
     //calendar into it:
     YAHOO.util.Event.onAvailable("calendar_container", function() {
       var myCal = new YAHOO.widget.Calendar("mycal_id", "calendar_container");
       myCal.render();
     })
        },
       // should a failure occur, the onFailure function will be executed
       onFailure: function(o) {
           alert("error: " + YAHOO.lang.dump(o));
       }
    });
   // Calculate the dependency and insert the required scripts and css resources
   // into the document
   loader.insert();

</script> </body> </html>


 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>