nutrition-label-jquery-plugin
Version:
To be able to create a FDA-style nutrition label with any nutrition data source
495 lines (422 loc) • 11.7 kB
HTML
<html lang="en">
<head>
<title>UK Version Demo Page</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' media='all' href='../../nutritionLabel-min.css'>
<link rel='stylesheet' type='text/css' media='all' href='./../css/demo.css'>
<!-- google webfont for nutrition label -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Archivo+Black" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="../demo.html"><i class="icon-chevron-right"></i> Back to Demo Page</a></li>
<li><a href="#test1"><i class="icon-chevron-right"></i> Example 1</a></li>
<li><a href="#test2"><i class="icon-chevron-right"></i> Example 2</a></li>
<li><a href="#test3"><i class="icon-chevron-right"></i> Example 3</a></li>
<li><a href="#test4"><i class="icon-chevron-right"></i> Example 4</a></li>
<li><a href="#test5"><i class="icon-chevron-right"></i> Example 5</a></li>
<li><a href="#test6"><i class="icon-chevron-right"></i> Example 6</a></li>
<li><a href="#test7"><i class="icon-chevron-right"></i> Example 7</a></li>
<li><a href="#test8"><i class="icon-chevron-right"></i> Example 8</a></li>
<li><a href="#test9"><i class="icon-chevron-right"></i> Example 9</a></li>
<li><a href="#test10"><i class="icon-chevron-right"></i> Example 10</a></li>
<li><a href="#test11"><i class="icon-chevron-right"></i> Example 11</a></li>
<li><a href="#test12"><i class="icon-chevron-right"></i> Example 12</a></li>
<li><a href="#test13"><i class="icon-chevron-right"></i> Example 13</a></li>
<li><a href="#test14"><i class="icon-chevron-right"></i> Example 14</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="row">
<div class="col-md-4">
<div id="test1"></div>
</div>
<div class="col-md-8">
<h3>Example #1</h3>
<p></p>
<pre id="pre1">
$('#test1').nutritionLabel({
valueServingSizeUnit : 'Sandwich',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test2"></div>
</div>
<div class="col-md-8">
<h3>Example #2</h3>
<p></p>
<pre id="pre2">
$('#test2').nutritionLabel({
valueServingSizeUnit : 'Slice of 8',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test3"></div>
</div>
<div class="col-md-8">
<h3>Example #3</h3>
<p></p>
<pre id="pre3">
$('#test3').nutritionLabel({
valueServingSizeUnit : 'Tablespoon',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test4"></div>
</div>
<div class="col-md-8">
<h3>Example #4</h3>
<p></p>
<pre id="pre4">
$('#test4').nutritionLabel({
valueServingSizeUnit : 'Fluid ounce',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test5"></div>
</div>
<div class="col-md-8">
<h3>Example #5</h3>
<p></p>
<pre id="pre5">
$('#test5').nutritionLabel({
valueServingSizeUnit : 'Slice of 12',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test6"></div>
</div>
<div class="col-md-8">
<h3>Example #6</h3>
<p></p>
<pre id="pre6">
$('#test6').nutritionLabel({
valueServingSizeUnit : 'Fluid Ounces',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test7"></div>
</div>
<div class="col-md-8">
<h3>Example #7</h3>
<p></p>
<pre id="pre7">
$('#test7').nutritionLabel({
valueServingSizeUnit : 'Ounce-weight',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test8"></div>
</div>
<div class="col-md-8">
<h3>Example #8</h3>
<p></p>
<pre id="pre8">
$('#test8').nutritionLabel({
valueServingSizeUnit : 'Half Sandwich',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test9"></div>
</div>
<div class="col-md-8">
<h3>Example #9</h3>
<p></p>
<pre id="pre9">
$('#test9').nutritionLabel({
valueServingSizeUnit : 'Slice (1/8 Pizza)',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test10"></div>
</div>
<div class="col-md-8">
<h3>Example #10</h3>
<p></p>
<pre id="pre10">
$('#test10').nutritionLabel({
valueServingSizeUnit : 'Slice (1/12 Pizza)',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test11"></div>
</div>
<div class="col-md-8">
<h3>Example #11</h3>
<p></p>
<pre id="pre11">
$('#test11').nutritionLabel({
valueServingSizeUnit : 'Breakfast Sandwich',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test12"></div>
</div>
<div class="col-md-8">
<h3>Example #12</h3>
<p></p>
<pre id="pre12">
$('#test12').nutritionLabel({
valueServingSizeUnit : 'Extra Large Portion',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test13"></div>
</div>
<div class="col-md-8">
<h3>Example #13</h3>
<p></p>
<pre id="pre13">
$('#test13').nutritionLabel({
valueServingSizeUnit : 'Salad with Dressing',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
<div class="row">
<div class="col-md-4">
<div id="test14"></div>
</div>
<div class="col-md-8">
<h3>Example #14</h3>
<p></p>
<pre id="pre14">
$('#test14').nutritionLabel({
valueServingSizeUnit : 'serving without sides',
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
valueServingWeightGrams : 77,
valueServingUnitQuantity : 6098.23,
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
showCalories : false,
showSatFat : false,
showProteins : false,
showSodium : false
});
</pre>
</div>
</div><br/><br/><br/>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="../../nutritionLabel-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
eval( eval( $('#pre1').html() ) );
eval( eval( $('#pre2').html() ) );
eval( eval( $('#pre3').html() ) );
eval( eval( $('#pre4').html() ) );
eval( eval( $('#pre5').html() ) );
eval( eval( $('#pre6').html() ) );
eval( eval( $('#pre7').html() ) );
eval( eval( $('#pre8').html() ) );
eval( eval( $('#pre9').html() ) );
eval( eval( $('#pre10').html() ) );
eval( eval( $('#pre11').html() ) );
eval( eval( $('#pre12').html() ) );
eval( eval( $('#pre13').html() ) );
eval( eval( $('#pre14').html() ) );
});
</script>
</body>
</html>