Hi *.*,
2 I'm showing Some DHTML stuff.Showing details on move over previously i showing image on mouse-over, and also from database too.2day instead of image data. Simple and humble.
Demo
On HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$(".selector").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function() {
return $($(this).next().html());
},
showURL: false
});
});
</script>
<style type="text/css">
.tag
{
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="dlMinistry" runat="server" >
<ItemTemplate>
<div class="tag">
<a href="#" class="selector">
<%#Eval("tag")%></a>
<div id="tooltip" style="display: none;">
<div>
<%#Eval("description")%></div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</form>
</body>
</html>
On Server Side
protected void Page_Load(object sender, EventArgs e)
{
var list = (new[] {
new { tag = "Simplyasp.net", description = "Welcome To Simplyasp.net" },
new { tag = "Simplyasp.blogspot.com", description = "Welcome To Simplyasp.net" },
}).ToList();
dlMinistry.DataSource = list;
dlMinistry.DataBind();
}
I don't think need more documentation over this because it so simple, in-case u need tell me. I will guide u.
Stay Tune...
Have a nice day... 'N happy Coding :)
No comments:
Post a Comment