145 строки
6.0 KiB
HTML
145 строки
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Essential JS 1: Tooltip - KnockOut</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript" ></script>
|
|
<![endif]-->
|
|
<!--[if IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"> </script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/knockout.min.js"></script>
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
<script src="../scripts/ej.widget.ko.min.js"></script>
|
|
<script>
|
|
window.sample = { name: "" };
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div class="frame">
|
|
<div class="knockbind table-responsive" >
|
|
<table id="details" class="table" data-bind="ejTooltip: {target :target,isBalloon : isBalloon, width: width,height : height, beforeOpen: beforeOpen, position : position }">
|
|
<tr>
|
|
<th>EmployeeID</th>
|
|
<th>Name</th>
|
|
<th>Designation</th>
|
|
</tr>
|
|
<tr>
|
|
<td>SF6089</td>
|
|
<td><a href="#" class="e-info" title="Peter">Peter</a></td>
|
|
<td>Software Engineer</td>
|
|
</tr>
|
|
<tr>
|
|
<td>SF6073</td>
|
|
<td> <a href="#" class="e-info" title="Joe">Joe </a> </td>
|
|
<td>Tester</td>
|
|
</tr>
|
|
<tr>
|
|
<td>SF6073</td>
|
|
<td> <a href="#" class="e-info" title="Lois"> Lois </a> </td>
|
|
<td>Content Writer</td>
|
|
</tr>
|
|
<tr>
|
|
<td>SF7896</td>
|
|
<td> <a href="#" class="e-info" title="Cleveland"> Cleveland </a> </td>
|
|
<td>Graphics Designer</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var target;
|
|
var position = { target : { horizontal : "right", vertical :"bottom"}, stem :{ horizontal :"left", vertical :"top"},};
|
|
$(function () {
|
|
contentUrl7 = window.location.hash.indexOf(window.sample.name) ? "content/images/grid/Employees/7.png" : "../content/images/grid/Employees/7.png";
|
|
contentUrl6 = window.location.hash.indexOf(window.sample.name) ? "content/images/grid/Employees/6.png" : "../content/images/grid/Employees/6.png";
|
|
contentUrl3 = window.location.hash.indexOf(window.sample.name) ? "content/images/grid/Employees/3.png" : "../content/images/grid/Employees/3.png";
|
|
contentUrl8 = window.location.hash.indexOf(window.sample.name) ? "content/images/grid/Employees/8.png" : "../content/images/grid/Employees/8.png";
|
|
window.viewModel = {
|
|
target:ko.observable(".e-info"),
|
|
isBalloon: ko.observable(false),
|
|
width: ko.observable("235px"),
|
|
height:ko.observable( "90px"),
|
|
position: ko.observable(position),
|
|
beforeOpen: ko.observable("onOpen"),
|
|
}
|
|
ko.applyBindings(viewModel);
|
|
target = $('#details').data("ejTooltip");
|
|
|
|
});
|
|
function onOpen(args) {
|
|
var emp = [
|
|
{ name: "Peter", phone: "9712233456", birth: "12/08/1948", hired:"05/01/1992", photo: contentUrl7 },
|
|
{ name: "Joe", phone: "9712567456", birth: "02/19/1952", hired:"08/14/1992", photo: contentUrl6 },
|
|
{ name: "Lois", phone: "9259233456", birth: "08/30/1963", hired:"04/01/1992", photo: contentUrl3 },
|
|
{ name: "Cleveland", phone: "9983233456", birth: "03/04/1955", hired:"10/17/1993", photo: contentUrl8 }, ];
|
|
for (i = 0; i < 4; i++) {
|
|
if (emp[i].name == $(args.event.target).attr("data-content"))
|
|
var template = '<div class="main"> <img src=' + emp[i].photo + ' class="logo"/><div class="des"><b>' + emp[i].name + '</b><br> Birth Date : ' + emp[i].birth + '<br> Hired Date : ' + emp[i].hired + '<br></div></div>';
|
|
}
|
|
target.setModel({ content: template });
|
|
target.show(args.event.target);
|
|
args.cancel = true;
|
|
}
|
|
</script>
|
|
<style type="text/css" class="cssStyles">
|
|
.knockbind > div {
|
|
padding:5px;
|
|
}
|
|
|
|
|
|
.frame {
|
|
width: 550px;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
}
|
|
|
|
.frame table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
border: 1px solid grey;
|
|
}
|
|
|
|
.frame th, td {
|
|
text-align: left;
|
|
padding: 8px;
|
|
}
|
|
.logo{
|
|
float: left;
|
|
width: 80px;
|
|
height: 68px;
|
|
margin-left: -4px;
|
|
}
|
|
|
|
.frame tr:nth-child(even) {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.frame th {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
.des{
|
|
width: 138px;
|
|
float: right;
|
|
line-height: 24px;
|
|
}
|
|
.material .des{
|
|
width: 120px;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|