Most basic use of the plugin
$('#test1').nutritionLabel({
width : 380,
showLegacyVersion : false,
showUKVersion : true,
showItemNameForUK : true,
showDailySugars : true,
textCalories : 'Energy',
textTotalCarb : 'Carbohydrate',
textFibers : 'Fibre',
textSodium : 'Salt',
valueServingWeightGrams : 77
});
Giving specific nutrition label values and hiding some of the parts of the nutrition label
$('#test2').nutritionLabel({
width : 380,
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',
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
});
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)
Also, an example where the serving size unit is present and the value serving size is greater than zero and not 'not applicable'
Another thing to note is that the serving unit quantity is not the default value (1.0)
$('#test3').nutritionLabel({
width : 380,
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',
showItemName : false,
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.',
showCalories : false,
showSatFat : false,
showSodium : false,
valueServingUnitQuantity : 2.3,
valueServingSize : 6,
valueServingSizeUnit : 'DONUTS',
valueCalories : 400,
valueTotalFat : 24,
valueSatFat : 15,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4
});
Similar to example #2 but with only a few visible values
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
$('#test4').nutritionLabel({
width : 380,
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',
showServingUnitQuantity : false,
showAmountPerServing : false,
ingredientList : 'Balsamic Vinaigrette, BBQ Hickory, Steak Tips',
itemName : 'Fire Grilled Sirloin Tips',
showCalories : false,
showSatFat : false,
showSodium : false,
valueCalories : 410,
valueTotalFat : 15,
valueSatFat : 4.5,
valueSodium : 1220,
valueTotalCarb : 20,
valueFibers : 0,
valueSugars : 18,
valueProteins : 48
});
Similar to Example #2 but the Percent Daily Values are Hidden
$('#test5').nutritionLabel({
width : 380,
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',
hidePercentDailyValues : true,
showServingUnitQuantity : false,
itemName : 'Bleu Cheese Dressing',
ingredientList : 'Bleu Cheese Dressing',
valueCalories : 450,
valueTotalFat : 48,
valueSatFat : 6,
valueCholesterol : 30,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3
});
Similar to Example #2 but only specific Percent Daily Values are Hidden
$('#test6').nutritionLabel({
width : 380,
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',
showDailyTotalFat : false,
showDailySodium : false,
showDailyFibers : false,
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
});