nutrition-label-jquery-plugin
Version:
To be able to create a FDA-style nutrition label with any nutrition data source
341 lines (294 loc) • 8.19 kB
HTML
<html lang="en">
<head>
<title>Legacy 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>
</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>
<pre id="pre1">
$('#test1').nutritionLabel({
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
valueServingWeightGrams : 77,
showIngredients : false,
itemName : 'Bar None Sliders Bison',
hideNotApplicableValues : true,
naFatCalories : true,
naTransFat : true,
naPolyFat : true,
naMonoFat : true,
naCholesterol : true,
naTotalCarb : true,
naFibers : true,
naSugars : true,
naProteins : true,
naVitaminA : true,
naVitaminC : true,
naCalcium : true,
naIron : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750
});
</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>
<pre id="pre2">
$('#test2').nutritionLabel({
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
valueServingWeightGrams : 77,
showIngredients : false,
itemName : 'Bar None Sliders Bison xy xy xy xy xy xy',
hideNotApplicableValues : true,
naFatCalories : true,
naTransFat : true,
naPolyFat : true,
naMonoFat : true,
naCholesterol : true,
naTotalCarb : true,
naFibers : true,
naSugars : true,
naProteins : true,
naVitaminA : true,
naVitaminC : true,
naCalcium : true,
naIron : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750
});
</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>
<pre id="pre3">
$('#test3').nutritionLabel({
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
valueServingWeightGrams : 77,
showIngredients : false,
itemName : 'Bar None Sliders Bison xy xy xy xy xy xy xy xy xy xy xy xy',
hideNotApplicableValues : true,
naFatCalories : true,
naTransFat : true,
naPolyFat : true,
naMonoFat : true,
naCholesterol : true,
naTotalCarb : true,
naFibers : true,
naSugars : true,
naProteins : true,
naVitaminA : true,
naVitaminC : true,
naCalcium : true,
naIron : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750
});
</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>
<pre id="pre4">
$('#test4').nutritionLabel({
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
valueServingWeightGrams : 77,
showIngredients : false,
itemName : 'Bar None Sliders Bison xy xy xy xy xy xy xy xy xy xy xy xy xy xy',
hideNotApplicableValues : true,
naFatCalories : true,
naTransFat : true,
naPolyFat : true,
naMonoFat : true,
naCholesterol : true,
naTotalCarb : true,
naFibers : true,
naSugars : true,
naProteins : true,
naVitaminA : true,
naVitaminC : true,
naCalcium : true,
naIron : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750
});
</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>
<pre id="pre5">
$('#test5').nutritionLabel({
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
valueServingWeightGrams : 77,
showIngredients : false,
itemName : 'Bar None Sliders Bison xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy',
hideNotApplicableValues : true,
naFatCalories : true,
naTransFat : true,
naPolyFat : true,
naMonoFat : true,
naCholesterol : true,
naTotalCarb : true,
naFibers : true,
naSugars : true,
naProteins : true,
naVitaminA : true,
naVitaminC : true,
naCalcium : true,
naIron : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750
});
</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>
<pre id="pre6">
$('#test6').nutritionLabel({
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
valueServingWeightGrams : 77,
showIngredients : false,
itemName : 'Bar None Sliders Bison xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy xy',
hideNotApplicableValues : true,
naFatCalories : true,
naTransFat : true,
naPolyFat : true,
naMonoFat : true,
naCholesterol : true,
naTotalCarb : true,
naFibers : true,
naSugars : true,
naProteins : true,
naVitaminA : true,
naVitaminC : true,
naCalcium : true,
naIron : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750
});
</pre>
</div>
</div><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() ) );
});
</script>
</body>
</html>