UNPKG

nutrition-label-jquery-plugin

Version:

To be able to create a FDA-style nutrition label with any nutrition data source

625 lines (535 loc) 18.7 kB
<!DOCTYPE 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>Case #1-A-1-a-1</a></li> <li><a href="#test2"><i class="icon-chevron-right"></i>Case #1-B-1-a-1</a></li> <li><a href="#test3"><i class="icon-chevron-right"></i>Case #1-C-1-a-1</a></li> <li><a href="#test4"><i class="icon-chevron-right"></i>Case #1-D-1-a-1</a></li> <li><a href="#test5"><i class="icon-chevron-right"></i>Case #1-A-2-a-1</a></li> <li><a href="#test6"><i class="icon-chevron-right"></i>Case #1-B-2-a-1</a></li> <li><a href="#test7"><i class="icon-chevron-right"></i>Case #1-C-2-a-1</a></li> <li><a href="#test8"><i class="icon-chevron-right"></i>Case #1-D-2-a-1</a></li> <li><a href="#test9"><i class="icon-chevron-right"></i>Case #1-A-1-a-1 (Hidden Serving Weight)</a></li> <li><a href="#test10"><i class="icon-chevron-right"></i>Case #1-A-2-a-1 (Hidden Serving Weight)</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>Case #1-A-1-a-1</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="pre1"> $('#test1').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, 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 }); </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>Case #1-B-1-a-1</h3> <p> showServingUnitQuantityTextbox == true<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity <= 0 (AND NOT N/A)<br/> showItemName == true<br/> showItemNameAtTheTop == false<br/> valueServingWeightGrams > 0 (making this part visible) </p> <pre id="pre2"> $('#test2').nutritionLabel({ valueServingPerContainer : 1.33, valueServingWeightGrams : 2.56, showServingsPerContainer : true, valueServingUnitQuantity : 0, 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, ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)', 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>Case #1-C-1-a-1</h3> <p> showServingUnitQuantityTextbox == true<br/> showServingUnitQuantity == false<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity >= 0 (AND NOT N/A)<br/> valueServingWeightGrams > 0 (making this part visible) </p> <pre id="pre3"> $('#test3').nutritionLabel({ valueServingPerContainer : 1.33, valueServingWeightGrams : 2.56, showServingsPerContainer : true, showServingUnitQuantity : false, valueServingUnitQuantity : 6, valueServingSizeUnit : 'DONUTS', naPolyFat : true, naFibers : true, showMonoFat : false, showTransFat : false, showVitaminD : 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, valueCaffeine : 15.63, ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)', 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>Case #1-D-1-a-1</h3> <p> showServingUnitQuantityTextbox == true<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity <= 0 (AND NOT N/A)<br/> showItemName == false<br/> valueServingWeightGrams > 0 (making this part visible) </p> <pre id="pre4"> $('#test4').nutritionLabel({ valueServingPerContainer : 1.33, valueServingWeightGrams : 2.56, showServingsPerContainer : true, showItemName : false, valueServingUnitQuantity : 0, 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, ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)', 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>Case #1-A-2-a-1</h3> <p> showServingUnitQuantityTextbox == false<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity >= 0 (AND NOT N/A)<br/> valueServingWeightGrams > 0 (making this part visible) </p> <pre id="pre5"> $('#test5').nutritionLabel({ valueServingPerContainer : 1.33, valueServingWeightGrams : 2.56, showServingsPerContainer : true, showServingUnitQuantityTextbox : false, valueServingUnitQuantity : 6, valueServingSizeUnit : 'DONUTS', naPolyFat : true, naFibers : true, showMonoFat : false, showTransFat : false, showVitaminD : 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, valueCaffeine : 15.63, ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)', 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>Case #1-B-2-a-1</h3> <p> showServingUnitQuantityTextbox == false<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity <= 0 (AND NOT N/A)<br/> showItemName == true<br/> valueServingWeightGrams > 0 (making this part visible) </p> <pre id="pre6"> $('#test6').nutritionLabel({ valueServingPerContainer : 1.33, valueServingWeightGrams : 2.56, showServingsPerContainer : true, showServingUnitQuantityTextbox : false, valueServingUnitQuantity : 0, 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, ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)', showLegacyVersion : false }); </pre> </div> </div><br /><br /><br /> <!---------------------------------------------------------------------------------------------------------------------> <div class="row"> <div class="col-md-4"> <div id="test7"></div> </div> <div class="col-md-8"> <h3>Case #1-C-2-a-1</h3> <p> showServingUnitQuantityTextbox == false<br/> showServingUnitQuantity == false<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity >= 0 (AND NOT N/A)<br/> valueServingWeightGrams > 0 (making this part visible) </p> <pre id="pre7"> $('#test7').nutritionLabel({ valueServingPerContainer : 1.33, valueServingWeightGrams : 2.56, showServingsPerContainer : true, showServingUnitQuantity : false, showServingUnitQuantityTextbox : false, valueServingUnitQuantity : 6, valueServingSizeUnit : 'DONUTS', naPolyFat : true, naFibers : true, showMonoFat : false, showTransFat : false, showVitaminD : 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, valueCaffeine : 15.63, ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)', showLegacyVersion : false }); </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 #1-D-2-a-1</h3> <p> showServingUnitQuantityTextbox == false<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity <= 0 (AND NOT N/A)<br/> showItemName == false<br/> valueServingWeightGrams > 0 (making this part visible) </p> <pre id="pre8"> $('#test8').nutritionLabel({ valueServingPerContainer : 1.33, valueServingWeightGrams : 2.56, showServingsPerContainer : true, showItemName : false, showServingUnitQuantityTextbox : false, valueServingUnitQuantity : 0, 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, ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)', showLegacyVersion : false }); </pre> </div> </div><br /><br /><br /> <!---------------------------------------------------------------------------------------------------------------------> <!---------------------------------------------------------------------------------------------------------------------> <!---------------------------------------------------------------------------------------------------------------------> <!---------------------------------------------------------------------------------------------------------------------> <!---------------------------------------------------------------------------------------------------------------------> <div class="row"> <div class="col-md-4"> <div id="test9"></div> </div> <div class="col-md-8"> <h3>Case #1-A-1-a-1 (Hidden Serving Weight)</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="pre9"> $('#test9').nutritionLabel({ valueServingPerContainer : 1.33, valueServingWeightGrams : 2.56, showServingsPerContainer : true, showServingWeightGrams : false, valueServingUnitQuantity : 6, valueServingSizeUnit : 'DONUTS', naPolyFat : true, naFibers : true, showMonoFat : false, showTransFat : false, showVitaminD : 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, valueCaffeine : 15.63, ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)', showLegacyVersion : false }); </pre> </div> </div><br /><br /><br /> <!---------------------------------------------------------------------------------------------------------------------> <div class="row"> <div class="col-md-4"> <div id="test10"></div> </div> <div class="col-md-8"> <h3>Case #1-A-2-a-1 (Hidden Serving Weight)</h3> <p> showServingUnitQuantityTextbox == false<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity >= 0 (AND NOT N/A)<br/> valueServingWeightGrams > 0 (making this part visible) </p> <pre id="pre10"> $('#test10').nutritionLabel({ valueServingPerContainer : 1.33, valueServingWeightGrams : 2.56, showServingsPerContainer : true, showServingWeightGrams : false, showServingUnitQuantityTextbox : false, valueServingUnitQuantity : 6, valueServingSizeUnit : 'DONUTS', naPolyFat : true, naFibers : true, showMonoFat : false, showTransFat : false, showVitaminD : 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, valueCaffeine : 15.63, ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour)', showLegacyVersion : false }); </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() ) ); eval( eval( $('#pre9').html() ) ); eval( eval( $('#pre10').html() ) ); }); </script> </body> </html>