File: examples/subtemplate-advanced.html

Recommend this page to a friend!
  Classes of Diego La Monica   Xtemplate   examples/subtemplate-advanced.html   Download  
File: examples/subtemplate-advanced.html
Role: Example script
Content type: text/plain
Description: Example
Class: Xtemplate
Template engine that uses HTML page fragments
Author: By
Last change: V 1.4.1
- Updated examples
Date: 8 years ago
Size: 5,921 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Subtemplate Advanced</title> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="../xtemplate.js"></script> <script src="http://diegolamonica.info/demo/SourceViewer/sourceviewer.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <style> div#example { border-radius: 10px; border: 2px dashed #ddd; margin: 1em; padding: 1em; } </style> </head> <body> <script type="text/x-template" id="country-template"> actually I live in {$live} and I'm {$age} years old </script> <script type="text/x-template" id="name-template"> Hello, my name is {$name} {#country-template live=country,age=38} </script> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="./">XTemplate</a> </div> <p class="navbar-text">Using subtemplates #2 (advanced)</p> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Similar examples <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="subtemplate-basic.html">Using subtemplates #1 (basic)</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="row" id="example"> <div class="col-md-12" id="my-section"> This text will be replaced </div> </div> <div class="row"> <div class="well well-lg"> <h1>Did you enjoyed this example?</h1> <p> Producing this library and an example like this, bring me a lot of time away from me, so I need to know how much this library is of community interest to program its evolutions, updates and upgrades. </p> <p> Then I'm asking you to perform 3 simple things to demonstrate your interest: </p> <ol> <li><a target="_blank" href="https://github.com/diegolamonica/XTemplate">Star</a> (and watch) this library on GitHub</li> <li><a target="_blank" href="https://twitter.com/jast">Follow me</a> on Twitter</li> <li>Add a like to <a target="_blank" href="https://www.facebook.com/DiegoLaMonica.FanPage">my Facebook page</a></li> </ol> </div> </div> <!-- Source code viewer --> <ul class="nav nav-tabs"> <li class="active"><a href="#js-code" data-toggle="tab">Javascript</a></li> <li><a href="#xt-code" data-toggle="tab">Templates</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="js-code"><pre class="sh_javascript" id="js"></pre></div> <div class="tab-pane" id="xt-code"><pre class="sh_html" id="xt"></pre></div> </div> <!-- End source code --> </div> <script type="text/javascript" id="source-code"> function showExample() { var x = new Xtemplate(), row = { name: 'Diego', country: 'Italy' }, output = x.apply('#name-template', row); $('#my-section').html(output); } </script> <link rel="stylesheet" type="text/css" href="http://shjs.sourceforge.net/css/sh_nedit.min.css" /> <script type="text/javascript" src="http://shjs.sourceforge.net/sh_main.min.js"></script> <script type="text/javascript" src="http://shjs.sourceforge.net/lang/sh_html.min.js"></script> <script type="text/javascript" src="http://shjs.sourceforge.net/lang/sh_javascript.min.js"></script> <script> SourceViewer.createDisplayArea(null, 'xt', SourceViewer.getSource('#country-template',true) + "\n\n" + SourceViewer.getSource('#name-template',true) ); SourceViewer.createDisplayArea(null, 'js', '#source-code'); showExample(); sh_highlightDocument(); </script> <a href="https://github.com/diegolamonica/XTemplate"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a> </body> </html>