UNPKG

nutrition-label-jquery-plugin

Version:

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

344 lines (313 loc) 12.6 kB
<!DOCTYPE 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='../../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></li> <li><a href="#test2"><i class="icon-chevron-right"></i>Case #2</a></li> <li><a href="#test3"><i class="icon-chevron-right"></i>Case #3</a></li> <li><a href="#test4"><i class="icon-chevron-right"></i>Case #4</a></li> <li><a href="#test5"><i class="icon-chevron-right"></i>Case #5</a></li> <li><a href="#test6"><i class="icon-chevron-right"></i>Case #6</a></li> <li><a href="#test7"><i class="icon-chevron-right"></i>Case #7</a></li> <li><a href="#test8"><i class="icon-chevron-right"></i>Case #8</a></li> <li><a href="#test9"><i class="icon-chevron-right"></i>Case #9</a></li> <li><a href="#test10"><i class="icon-chevron-right"></i>Case #10</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</h3> <p> showServingUnitQuantityTextbox == true<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity >= 0<br/> showItemName == true<br/> </p> <pre id="pre1"> $('#test1').nutritionLabel({ valueCalories : 400, valueServingUnitQuantity : 6, valueServingSizeUnit : 'DONUTS' }); </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 #2</h3> <p> showServingUnitQuantityTextbox == false<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity <= 0<br/> showItemName == true<br/> </p> <pre id="pre2"> $('#test2').nutritionLabel({ valueCalories : 400, valueServingUnitQuantity : 0, valueServingSizeUnit : 'DONUTS', showServingUnitQuantityTextbox : 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 #3</h3> <p> showServingUnitQuantityTextbox == true<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity <= 0<br/> showItemName == true<br/> </p> <pre id="pre3"> $('#test3').nutritionLabel({ valueCalories : 400, valueServingUnitQuantity : 0, valueServingSizeUnit : 'DONUTS' }); </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 #4</h3> <p> showServingUnitQuantityTextbox == false<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity >= 0<br/> showItemName == true<br/> </p> <pre id="pre4"> $('#test4').nutritionLabel({ valueCalories : 400, valueServingUnitQuantity : 6, valueServingSizeUnit : 'DONUTS', showServingUnitQuantityTextbox : 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 #5</h3> <p> showServingUnitQuantityTextbox == true<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit == '' (OR null)<br/> valueServingUnitQuantity >= 0<br/> showItemName == true<br/> </p> <pre id="pre5"> $('#test5').nutritionLabel({ valueCalories : 400, valueServingUnitQuantity : 6 }); </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 #6</h3> <p> showServingUnitQuantityTextbox == false<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit == '' (OR null)<br/> valueServingUnitQuantity >= 0<br/> showItemName == true<br/> </p> <pre id="pre6"> $('#test6').nutritionLabel({ valueCalories : 400, valueServingUnitQuantity : 6, showServingUnitQuantityTextbox : 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 #7</h3> <p> showServingUnitQuantityTextbox == true<br/> showServingUnitQuantity == false<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity >= 0<br/> showItemName == true<br/> </p> <pre id="pre7"> $('#test7').nutritionLabel({ valueCalories : 400, valueServingUnitQuantity : 6, valueServingSizeUnit : 'DONUTS', showServingUnitQuantity : 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 #8</h3> <p> showServingUnitQuantityTextbox == false<br/> showServingUnitQuantity == false<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity >= 0<br/> showItemName == true<br/> </p> <pre id="pre8"> $('#test8').nutritionLabel({ valueCalories : 400, valueServingUnitQuantity : 6, valueServingSizeUnit : 'DONUTS', showServingUnitQuantity : false, showServingUnitQuantityTextbox : 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 #9</h3> <p> showServingUnitQuantityTextbox == true<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity <= 0<br/> showItemName == false<br/> </p> <pre id="pre9"> $('#test9').nutritionLabel({ valueCalories : 400, valueServingUnitQuantity : 0, valueServingSizeUnit : 'DONUTS', showItemName : 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 #10</h3> <p> showServingUnitQuantityTextbox == false<br/> showServingUnitQuantity == true<br/> valueServingSizeUnit != '' (AND NOT null)<br/> valueServingUnitQuantity <= 0<br/> showItemName == false<br/> </p> <pre id="pre10"> $('#test10').nutritionLabel({ valueCalories : 400, valueServingUnitQuantity : 0, valueServingSizeUnit : 'DONUTS', showItemName : false, showServingUnitQuantityTextbox : false }); </pre> </div> </div><br /><br /><br /> <!---------------------------------------------------------------------------------------------------------------------> <!---------------------------------------------------------------------------------------------------------------------> <!---------------------------------------------------------------------------------------------------------------------> <!---------------------------------------------------------------------------------------------------------------------> <!---------------------------------------------------------------------------------------------------------------------> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><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>