nutrition-label-jquery-plugin
Version:
To be able to create a FDA-style nutrition label with any nutrition data source
409 lines (361 loc) • 11 kB
HTML
<html lang="en">
<head>
<title>2018 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>
</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({
showServingUnitQuantity : false,
showAmountPerServing : false,
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,
naVitaminD : true,
naPotassium_2018 : true,
naCalcium : true,
naIron : true,
naCaffeine : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750,
showLegacyVersion : 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>
<pre id="pre2">
$('#test2').nutritionLabel({
showServingUnitQuantity : false,
showAmountPerServing : false,
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,
naVitaminD : true,
naPotassium_2018 : true,
naCalcium : true,
naIron : true,
naCaffeine : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750,
showLegacyVersion : 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>
<pre id="pre3">
$('#test3').nutritionLabel({
showServingUnitQuantity : false,
showAmountPerServing : false,
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,
naVitaminD : true,
naPotassium_2018 : true,
naCalcium : true,
naIron : true,
naCaffeine : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750,
showLegacyVersion : 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>
<pre id="pre4">
$('#test4').nutritionLabel({
showServingUnitQuantity : false,
showAmountPerServing : false,
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,
naVitaminD : true,
naPotassium_2018 : true,
naCalcium : true,
naIron : true,
naCaffeine : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750,
showLegacyVersion : 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>
<pre id="pre5">
$('#test5').nutritionLabel({
showServingUnitQuantity : false,
showAmountPerServing : false,
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,
naVitaminD : true,
naPotassium_2018 : true,
naCalcium : true,
naIron : true,
naCaffeine : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750,
showLegacyVersion : 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>
<pre id="pre6">
$('#test6').nutritionLabel({
showServingUnitQuantity : false,
showAmountPerServing : false,
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',
hideNotApplicableValues : true,
naFatCalories : true,
naTransFat : true,
naPolyFat : true,
naMonoFat : true,
naCholesterol : true,
naTotalCarb : true,
naFibers : true,
naSugars : true,
naProteins : true,
naVitaminD : true,
naPotassium_2018 : true,
naCalcium : true,
naIron : true,
naCaffeine : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750,
showLegacyVersion : false
});
</pre>
</div>
</div><br /><br />
<!--------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------->
<div class="row">
<div class="col-md-4">
<div id="test7"></div>
</div>
<div class="col-md-8">
<h3>Case #7</h3>
<p>
showServingUnitQuantityTextbox == true<br/>
showServingUnitQuantity == true<br/>
valueServingSizeUnit != '' (AND NOT null)<br/>
valueServingUnitQuantity >= 0 (AND NOT N/A)<br/>
showItemNameAtTheTop == false<br/>
valueServingWeightGrams > 0 (making this part visible)
</p>
<pre id="pre7">
$('#test7').nutritionLabel({
valueServingPerContainer : 1.33,
valueServingWeightGrams : 2.56,
showServingsPerContainer : true,
valueServingUnitQuantity : 6,
valueServingSizeUnit : 'DONUTS',
naPolyFat : true,
naFibers : true,
showMonoFat : false,
showTransFat : false,
showVitaminD : false,
showVitaminC : false,
showCalcium : false,
showIron : false,
showCaffeine : false,
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4,
valueCaffeine : 15.63,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)',
showLegacyVersion : false,
itemName : 'Morbi placerat molestie rutrum. Duis nunc nisl, pharetra vestibulum pharetra vitae, venenatis vel ante'
});
</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>Case #8</h3>
<p>
showServingUnitQuantityTextbox == true<br/>
showServingUnitQuantity == true<br/>
valueServingSizeUnit != '' (AND NOT null)<br/>
valueServingUnitQuantity >= 0 (AND NOT N/A)<br/>
valueServingWeightGrams > 0 (making this part hidden)
</p>
<pre id="pre8">
$('#test8').nutritionLabel({
valueServingPerContainer : 1.33,
valueServingWeightGrams : 0,
showServingsPerContainer : true,
valueServingUnitQuantity : 6,
valueServingSizeUnit : 'DONUTS',
naPolyFat : true,
naFibers : true,
showMonoFat : false,
showTransFat : false,
showVitaminD : false,
showVitaminC : false,
showCalcium : false,
showIron : false,
showCaffeine : false,
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4,
valueCaffeine : 15.63,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)',
showLegacyVersion : false,
itemName : 'Morbi placerat molestie rutrum. Duis nunc nisl, pharetra vestibulum pharetra vitae, venenatis vel ante'
});
</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() ) );
});
</script>
</body>
</html>