topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-jquery-plugin-layers-box.htm / htm



  <html>
    <head>
      <title>jQuery Add Background Demo</title>
      <script type="text/javascript" src="lib-jquery-plugin-layers-includes-jquery-1.2.6.min.js"></script>  
      <script type="text/javascript" src="lib-jquery-plugin-layers-includes-jquery.background-layers.js"></script>
      <script type="text/javascript">
        $(function(){
          $('.outerBox').add_layer("#679cc6");
          $('.outerBox').add_layer("url('lib-jquery-plugin-layers-images-l.png') left repeat-y");
          $('.outerBox').add_layer("url('lib-jquery-plugin-layers-images-r.png') right repeat-y");
          $('.outerBox').add_layer("url('lib-jquery-plugin-layers-images-t.png') top repeat-x");
          $('.outerBox').add_layer("url('lib-jquery-plugin-layers-images-b.png') bottom repeat-x");      
          $('.outerBox').add_layer("url('lib-jquery-plugin-layers-images-tl.png') top left no-repeat");
          $('.outerBox').add_layer("url('lib-jquery-plugin-layers-images-tr.png') top right no-repeat");
          $('.outerBox').add_layer("url('lib-jquery-plugin-layers-images-br.png') bottom right no-repeat");
          $('.outerBox').add_layer("url('lib-jquery-plugin-layers-images-bl.png') bottom left no-repeat",
                                    {
                                      insideCss : {'padding':'10px'},
                                      insideClass: 'innerBox'
                                    });
         });       
      </script>
      <style type="text/css">
        .outerBox { float: left; }
        .innerBox { font-weight: bold; font-size: 20px; }
      </style>
    </head>
    <body>
      <div class="outerBox" style="height: 100px; width: 100px;">Test 1</div>
      <div class="outerBox" style="height: 200px; width: 400px;">Test 2</div>
      <div class="outerBox" style="height: 50px; width: 100px;">Test 3</div>
    </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.