Форум программистов [Powered by Invision Power Board]

Код


<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-1.7.js" type="text/javascript"></script>
    <script src="jquery.tmpl.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script type="text/javascript">
        $(document).ready(function() {
            var data = [
               { name: "Astor", product: "astor", stocklevel: "10", price: "2.99"},
               { name: "Daffodil", product: "daffodil", stocklevel: "12", price: "1.99"},
               { name: "Rose", product: "rose", stocklevel: "2", price: "4.99"},
               { name: "Peony", product: "peony", stocklevel: "0", price: "1.50"},
               { name: "Primula", product: "primula", stocklevel: "1", price: "3.12"},
               { name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: "0.99"},
            ];
  
            var templResult = $('#flowerTmpl').tmpl(data);
            templResult.slice(0, 3).appendTo('#row1');
            templResult.slice(3).appendTo("#row2");
                
            $('input').focus(handleFormFocus).blur(handleFormFocus);
         
            function handleFormFocus(e) {
                var borderVal = e.type == "focus" ? "medium solid green" : "";
                $(this).css("border", borderVal);
            }     
  
            var total = $('#buttonDiv')
                .prepend("<div>Total Items: <span id=total>0</span></div>")
                .css({clear: "both", padding: "5px"});
            $('<div id=bbox />').appendTo("body").append(total).css("clear: left");
                
            $('input').change(function(e) {
                var total = 0;
                $('input').each(function(index, elem) {
                    total += Number($(elem).val());
                });            
                $('#total').text(total);
            });     
        });
  </script>
    <script id="flowerTmpl" type="text/x-jquery-tmpl">
        <div class="dcell">    
            <img src="${product}.png"/>
            <label for="${product}">${name}: </label>
            <input name="${product}" value="0" required />
        </div>
    </script>
</head>
<body>
    <h1>Jacqui's Flower Shop</h1>
    <form method="post" action="http://node.jacquisflowershop.com/order">
        <div id="oblock">        
            <div class="dtable">
                <div id="row1" class="drow">
                </div>
                <div id="row2"class="drow">
                </div>            
            </div>
        </div>
        <div id="buttonDiv"><button type="submit">Place Order</button></div>                    
    </form>
</body>
</html>

Код


var total = $('#buttonDiv')
                .prepend("<div>Total Items: <span id=total>0</span></div>")
                .css({clear: "both", padding: "5px"});
            $('<div id=bbox />').appendTo("body").append(total).css("clear: left");
                
            $('input').change(function(e) {
                var total = 0;
                $('input').each(function(index, elem) {
                    total += Number($(elem).val());
                });            
                $('#total').text(total);
            });