nutrition-label-jquery-plugin
Version:
To be able to create a FDA-style nutrition label with any nutrition data source
282 lines (237 loc) • 7.45 kB
HTML
<html>
<head>
<title>UK 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 (UK 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({
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
valueServingWeightGrams : 77,
dailyValueTotalFat : 70, //this should be 70 for the uk version
dailyValueCarb : 260, //this should be 260 for the uk version
dailyValueSugar : 90, //this should be 90 for the uk version
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
allowCustomWidth : true,
allowNoBorder : true,
showServingUnitQuantity : false,
itemName : 'Bleu Cheese Dressing',
ingredientList : 'Bleu Cheese Dressing',
valueCalories : 450,
valueTotalFat : 48,
valueSatFat : 6,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3
});
</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({
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
dailyValueTotalFat : 70, //this should be 70 for the uk version
dailyValueCarb : 260, //this should be 260 for the uk version
dailyValueSugar : 90, //this should be 90 for the uk version
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
allowCustomWidth : true,
allowNoBorder : true,
valueServingWeightGrams : 32.56,
valueServingUnitQuantity : 0,
valueServingSizeUnit : 'DONUTS',
valueCalories : 400,
valueTotalFat : 24,
valueSatFat : 15,
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({
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
dailyValueTotalFat : 70, //this should be 70 for the uk version
dailyValueCarb : 260, //this should be 260 for the uk version
dailyValueSugar : 90, //this should be 90 for the uk version
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
allowCustomWidth : true,
allowNoBorder : true,
valueServingWeightGrams : 32.56,
showServingUnitQuantity : false,
valueServingUnitQuantity : 6,
valueServingSizeUnit : 'DONUTS',
valueCalories : 400,
valueTotalFat : 24,
valueSatFat : 15,
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({
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
dailyValueTotalFat : 70, //this should be 70 for the uk version
dailyValueCarb : 260, //this should be 260 for the uk version
dailyValueSugar : 90, //this should be 90 for the uk version
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
allowCustomWidth : true,
allowNoBorder : true,
valueServingWeightGrams : 32.56,
showItemName : false,
valueServingUnitQuantity : 0,
valueServingSizeUnit : 'DONUTS',
valueCalories : 400,
valueTotalFat : 24,
valueSatFat : 15,
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>