When we add Jquery Clue tip , we simply copy the JQuery files but forget to assign few properties and change the loading ‘Image path’ in the CSS file.
The images folder will contain all the Images for the ClueTip including the loading Image.‘Jquery.cluetip.css’ will contain all the css properties for the ClieTip.
Map the ClueTip plugin in your web-page.
<head runat="server">
<title>Untitled Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.hoverIntent.js" type="text/javascript"></script>
<script src="../js/jquery.bgiframe.min.js" type="text/javascript"></script>
//Load the cluetip script file.
<script src="../js/jquery.cluetip.js" type="text/javascript"></script>
<link rel="stylesheet" href="../js/jquery.cluetip.css" type="text/css" />
<script type="text/javascript">
$(function() {
//defination of a class and properties which displays cluetip.
$('.infoTip').cluetip({
sticky: true,
showTitle:true,
arrows: true,
cursor:'pointer',
//Remove the shadow
dropShadow:false,
//This will enable the loading image..
waitImage:true,
});
});
</script>
</head>
<body>
<asp:GridView ID="gridViewJobSample" runat="server" SkinID="GridviewSkinNoPaging">
<Columns>
<asp:BoundField HeaderText="ID" DataField="ID" />
<asp:TemplateField>
<ItemTemplate>
//Show the clueTip in the datagrid.
<a class="infoTip" rel="../Public/show.aspx">
<img border="0" src="../Images/plus.png" height="10px" width="10px" />
<asp:Label ID="LabelCompanyName" runat="server">Hello.</asp:Label>
</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</body>
And in the ‘jquery.cluetip.css’ , Loading image path should be properly mapped.
#cluetip-waitimage {
width: 43px;
height: 11px;
position: absolute;
background-image: url('images/wait.gif');
How it works :
When the user places his cursor in the green plus icon in the datagrid then loading image is displayed before the cluetip.
Once the sorurce of clueTip is fully loaded then it is displayed on the web-page.
*Please leave a comment before you leave.
No comments:
Post a Comment