File: examples/conditions.html

Recommend this page to a friend!
  Classes of Diego La Monica   Xtemplate   examples/conditions.html   Download  
File: examples/conditions.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: 6,567 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Callback usage example</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"> and I am from {$country} </script> <script type="text/x-template" id="unknown-template"> and I haven't told you where I'm from. :) </script> <script type="text/x-template" id="name-template"> <div class="row"> <div class="col-md-12"> Hello, my name is {$name} {?country} {#country-template} {!country} {?^country} {#unknown-template} {!^country} </div> </div> </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">Example of conditions #3</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="hello-name-country-1.html">Example of conditions #1</a></li> <li><a href="hello-name-country-2.html">Example of conditions #2</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(), rows = [ {name: 'Diego', country: 'Italy'}, {name: 'John'}, {name: 'Aaron', country: 'New York City'}, {name: 'Anita'} ], output = x.apply('#name-template', rows); $('#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('#unknown-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>