nutrition-label-jquery-plugin
Version:
To be able to create a FDA-style nutrition label with any nutrition data source
256 lines (229 loc) • 8.15 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='../../css/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>
<p>Most basic use of the plugin</p>
<pre id="pre1">$('#test1').nutritionLabel();</pre>
</div>
</div><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>Giving specific nutrition label values and hiding some of the parts of the nutrition label</p>
<pre id="pre2">
$('#test2').nutritionLabel({
showServingUnitQuantity : false,
itemName : 'Bleu Cheese Dressing',
ingredientList : 'Bleu Cheese Dressing',
showPolyFat : false,
showMonoFat : false,
valueCalories : 450,
valueFatCalories : 430,
valueTotalFat : 48,
valueSatFat : 6,
valueTransFat : 0,
valueCholesterol : 30,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3,
valueVitaminA : 0,
valueVitaminC : 0,
valueCalcium : 0,
valueIron : 0
});
</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>Similar to example #2 but with different plugin options. One thing to note is the use of serving size, serving size unit and showing the serving container to overwrite the default value (compare it to other examples to see the difference)</p>
<p>Also, an example where the serving size unit is present and the value serving size is greater than zero and not 'not applicable'</p>
<p>Another thing to note is that the serving unit quantity is not the default value (1.0)</p>
<pre id="pre3">
$('#test3').nutritionLabel({
showItemName : false,
showServingsPerContainer : true,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour, Niacin, Iron, Thiamin Mononitrate, Riboflavin, Folic Acid), Sugar, Vegetable Oil (contains one or more of the following oils: Cottonseed Oil, Palm Oil, Soybean Oil), Water, Hydrogenated Vegetable Oil (Palm Kernel Oil, Palm Oil), High Fructose Corn Syrup, Cocoa Powder (Processed With Alkali), contains 2% or less of the following: Eggs, Nonfat Milk, Glycerin, Soy Flour, Corn Syrup Solids, Leavening (Sodium Acid Pyrophosphate, Baking Soda, Sodium Aluminum Phosphate), Preservatives (Potassium Sorbate, Sodium Propionate, Calcium Propionate), Salt, Distilled Monoglycerides, Dextrose, Food Starch-Modified (Corn and/or Wheat), Soy, Lecithin, Natural and Artificial Flavor, Mono- and Diglycerides, Spices, Tapioca Starch, Wheat Starch, Cellulose Gum, Guar Gum, Karaya Gum, colored with Extracts of Annatto and Turmeric, Artificial Color.',
showPolyFat : false,
showMonoFat : false,
showTransFat : false,
showFibers : false,
showVitaminA : false,
showVitaminC : false,
showCalcium : false,
showIron : false,
valueServingUnitQuantity : 2.3,
valueServingSize : 6,
valueServingSizeUnit : 'DONUTS',
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4
});
</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>Similar to example #2 but with only a few visible values</p>
<p>Another thing to take note here is that the serving size unit is null or an empty string so the textbox appears before the item name</p>
<pre id="pre4">
$('#test4').nutritionLabel({
showServingUnitQuantity : false,
showAmountPerServing : false,
showCalorieDiet : true,
ingredientList : 'Balsamic Vinaigrette, BBQ Hickory, Steak Tips',
itemName : 'Fire Grilled Sirloin Tips',
showPolyFat : false,
showMonoFat : false,
showTransFat : false,
showVitaminA : false,
showVitaminC : false,
showCalcium : false,
showIron : false,
showFatCalories : false,
valueCalories : 410,
valueTotalFat : 15,
valueSatFat : 4.5,
valueCholesterol : 105,
valueSodium : 1220,
valueTotalCarb : 20,
valueFibers : 0,
valueSugars : 18,
valueProteins : 48
});
</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>Similar to Example #2 but the Percent Daily Values are Hidden</p>
<pre id="pre5">
$('#test5').nutritionLabel({
hidePercentDailyValues : true,
showServingUnitQuantity : false,
itemName : 'Bleu Cheese Dressing',
ingredientList : 'Bleu Cheese Dressing',
showPolyFat : false,
showMonoFat : false,
valueCalories : 450,
valueFatCalories : 430,
valueTotalFat : 48,
valueSatFat : 6,
valueTransFat : 0,
valueCholesterol : 30,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3,
valueVitaminA : 0,
valueVitaminC : 0,
valueCalcium : 0,
valueIron : 0
});
</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>Similar to Example #2 but only specific Percent Daily Values are Hidden</p>
<pre id="pre6">
$('#test6').nutritionLabel({
showDailyTotalFat : false,
showDailySodium : false,
showDailyFibers : false,
showServingUnitQuantity : false,
itemName : 'Bleu Cheese Dressing',
ingredientList : 'Bleu Cheese Dressing',
showPolyFat : false,
showMonoFat : false,
valueCalories : 450,
valueFatCalories : 430,
valueTotalFat : 48,
valueSatFat : 6,
valueTransFat : 0,
valueCholesterol : 30,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3,
valueVitaminA : 0,
valueVitaminC : 0,
valueCalcium : 0,
valueIron : 0
});
</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="../../js/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>