nutrition-label-jquery-plugin
Version:
To be able to create a FDA-style nutrition label with any nutrition data source
279 lines (237 loc) • 6.86 kB
HTML
<html>
<head>
<title>Legacy Version Demo Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<link rel='stylesheet' type='text/css' media='all' href='../../nutritionLabel-min.css'>
<link rel='stylesheet' type='text/css' media='all' href='../css/demo-mobile.css'>
<!-- google webfont for nutrition label -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Archivo+Black" />
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<div data-role="content" data-theme="a">
<h1>Nutrition Label (Legacy Version)</h1>
<h5>from Nutritionix</h5>
<ul data-role="listview" data-inset="true">
<li><a href="../demo.html" data-transition="slide">Back to Demo Page</a></li>
<li><a href="#ex1" data-transition="slide">Example 1</a></li>
<li><a href="#ex2" data-transition="slide">Example 2</a></li>
<li><a href="#ex3" data-transition="slide">Example 3</a></li>
<li><a href="#ex4" data-transition="slide">Example 4</a></li>
</ul>
</div>
</div>
<!-- example 1 -->
<div data-role="page" id="ex1" data-theme="a">
<div data-role="header" data-theme="a">
<a href="#" data-rel="back">Back</a>
<h1>Example 1</h1>
</div>
<div id="label1"></div>
<div data-role="content" data-theme="a">
<div data-role="collapsible-set" data-theme="a">
<div data-role="collapsible">
<h2>View Code</h2>
<ul data-role="listview">
<li>
<pre id="pre1" class="truncate">
$('#label1').nutritionLabel({
allowCustomWidth : true,
allowNoBorder : 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>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- example 2 -->
<div data-role="page" id="ex2" data-theme="a">
<div data-role="header" data-theme="a">
<a href="#" data-rel="back">Back</a>
<h1>Example 2</h1>
</div>
<div id="label2"></div>
<div data-role="content" data-theme="a">
<div data-role="collapsible-set" data-theme="a">
<div data-role="collapsible">
<h2>View Code</h2>
<ul data-role="listview">
<li>
<pre id="pre2" class="truncate">
$('#label2').nutritionLabel({
allowCustomWidth : true,
allowNoBorder : true,
valueServingPerContainer : 1.33,
valueServingWeightGrams : 2.56,
showServingsPerContainer : true,
valueServingUnitQuantity : 0,
valueServingSizeUnit : 'DONUTS',
naPolyFat : true,
naFibers : true,
showMonoFat : false,
showTransFat : false,
showVitaminA : false,
showVitaminC : false,
showCalcium : false,
showIron : false,
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)'
});
</pre>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- example 3 -->
<div data-role="page" id="ex3" data-theme="a">
<div data-role="header" data-theme="a">
<a href="#" data-rel="back">Back</a>
<h1>Example 3</h1>
</div>
<div id="label3"></div>
<div data-role="content" data-theme="a">
<div data-role="collapsible-set" data-theme="a">
<div data-role="collapsible">
<h2>View Code</h2>
<ul data-role="listview">
<li>
<pre id="pre3" class="truncate">
$('#label3').nutritionLabel({
allowCustomWidth : true,
allowNoBorder : true,
valueServingPerContainer : 1.33,
valueServingWeightGrams : 2.56,
showServingsPerContainer : true,
showServingUnitQuantity : false,
valueServingUnitQuantity : 6,
valueServingSizeUnit : 'DONUTS',
naPolyFat : true,
naFibers : true,
showMonoFat : false,
showTransFat : false,
showVitaminA : false,
showVitaminC : false,
showCalcium : false,
showIron : false,
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)'
});
</pre>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- example 4 -->
<div data-role="page" id="ex4" data-theme="a">
<div data-role="header" data-theme="a">
<a href="#" data-rel="back">Back</a>
<h1>Example 4</h1>
</div>
<div id="label4"></div>
<div data-role="content" data-theme="a">
<div data-role="collapsible-set" data-theme="a">
<div data-role="collapsible">
<h2>View Code</h2>
<ul data-role="listview">
<li>
<pre id="pre4" class="truncate">
$('#label4').nutritionLabel({
allowCustomWidth : true,
allowNoBorder : true,
valueServingPerContainer : 1.33,
valueServingWeightGrams : 2.56,
showServingsPerContainer : true,
showItemName : false,
valueServingUnitQuantity : 0,
valueServingSizeUnit : 'DONUTS',
naPolyFat : true,
naFibers : true,
showMonoFat : false,
showTransFat : false,
showVitaminA : false,
showVitaminC : false,
showCalcium : false,
showIron : false,
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)'
});
</pre>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.pagecontainer.changeUrl = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
<script type="text/javascript" src="../../nutritionLabel-min.js"></script>
<script type="text/javascript">
$(function(){
eval( eval( $('#pre1').html() ) );
eval( eval( $('#pre2').html() ) );
eval( eval( $('#pre3').html() ) );
eval( eval( $('#pre4').html() ) );
});
</script>
</body>
</html>