Alternating Color in Jquery Template

First of all create a div containing table for jquery template header and body.



 <div >
                <div style="width: 580px;">
                    <table id="tblListofItems">
                        <thead>
                            <tr>
                                <th align="left">
                                    Item Detail<span style="float: right;"></span>
                                </th>
                                <th align="left">
                                    Item Price<span style="float: right;"></span>
                                </th>
                                <th align="left">
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody id="listofItems">
                        </tbody>
                    </table>
                </div>


Second create jquery template for each row.


  <script id="ItemTemplate" type="text/x-jquery-tmpl">  
        <tr class="${oddOrEven()}">
            <td>
                  <B> ${Name} </B>
                   <br />
                   ${Description}
                  <br />
                   Type: ${Type}
                  <br />
                  <br />
            </td>          
            <td style="text-align:center;">
                ${Rate}
            </td>              
        </tr>
    </script>


Thrid create web service to bind all jquery template.


   $(document).ready(function () {    
                GetAllItems(Id);            
        });

   function oddOrEven() {
            return ($.inArray(this.data, items) % 2) ? "jqueryGridEvenRow" : "jqueryGridOddRow";
        }



.jqueryGridOddRow
{
    border-bottom: 1px solid #C2C2C2;
    border-top: 1px solid #C2C2C2;
    background-color: #ffffff;
    color: #000000;
    text-align: left;
    font-family: Verdana;
    font-size: 12px; /*background-color: #F0F0F6;*/
}
.jqueryGridEvenRow
{
    border-bottom: 1px solid #C2C2C2;
    border-top: 1px solid #C2C2C2;
    background-color: #E9F8F8;
    color: #022e41;
    text-align: left;
    font-family: Verdana;
    font-size: 12px;
    margin-left: 3px;
}





   function GetItemByIdSucceeded(result) {      
         var  items = result.d;
            $("#listofItems").empty();
            $('#ItemTemplate').tmpl(items).appendTo('#listofItems');
            $("#listofItems tbody tr").addClass("delete");
            $("#listofItems").trigger("update");
            $("#listofItems").trigger("appendCache");
            $("#listofItems tbody tr.delete").remove();
            $("#listofItems").trigger("update");
            return;
        }

        function GetItemByIdFailed(result) {      

        }

        function GetAllItems() {        
            $.ajax({
                url: "../WebServices/ItemService.asmx/GetAllItem",
                data: JSON.stringify({ }), // parameter map
                type: "POST", // data has to be POSTED              
                contentType: "application/json",
                dataType: "json",
                success: GetItemByIdSucceeded,
                error: GetItemByIdFailed
            });
        }









Note:-Please comment and reply me.

Read More

CSS Quick Reference

Read More

Jquery

What is jQuery?

• A framework for Client Side JavaScript.
• Frameworks provide useful alternatives for common programming tasks, creating functionality which may not be available or cumbersome to use within a language.
• An open source project, maintained by a group of developers, with a very active support base and thorough, well written documentation.
• jQuery is built on top of JavaScript, a rich and expressive language in its own right.

jQuery Syntax:-

$.func(…); 

or 

$(selector).func1(…).func2(…).funcN(…);

$             jQuery Object, can be used instead of  jQuery

selector   Selector syntax, many different selectors allowed

func        Chainable, most functions return a jQuery object

(…)        Function parameters

Note:-Please comment and reply me.

Read More

CSS line-height Property

Set the line height in percent:

p.small {line-height:90%}
p.big {line-height:200%}
example:-





This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.

This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.

This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.

Result:-





Note:-Please comment and reply me.

Read More