211 строки
7.0 KiB
HTML
211 строки
7.0 KiB
HTML
<!doctype html>
|
|
|
|
<html>
|
|
<head>
|
|
<title>Essential JS 1: Tooltip - Events</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<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 gte IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
<script>
|
|
window.sample = { name: "" };
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
|
|
<div class="frame" id="custom">
|
|
<div class="image">
|
|
<img id="tooltipimg" alt="Python Succinctly" >
|
|
</div>
|
|
<div class="desc">Python Succinctly</div>
|
|
</div>
|
|
</div>
|
|
<div class="cols-prop-area event-tracer">
|
|
<div>
|
|
<div class="heading">
|
|
<span>Event Trace</span>
|
|
<div class="pull-right">
|
|
<select name="selectevtprops" id="selectControls">
|
|
<option value="create">Create</option>
|
|
<option value="beforeOpen">beforeOpen</option>
|
|
<option value="beforeClose">beforeHide</option>
|
|
<option value="open">open</option>
|
|
<option value="close">close</option>
|
|
<option value="tracking">tracking</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prop-grid content">
|
|
<div class="eventarea">
|
|
<div class="EventLog" id="EventLog">
|
|
</div>
|
|
</div>
|
|
<div class="evtbtn">
|
|
<input type="button" class="eventclear e-btn" value="Clear" onclick="onClear()" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var dialogObj;
|
|
var trackCount = 1;
|
|
var target, target1, target2;
|
|
$(function () {
|
|
// declaration
|
|
contentUrl = window.location.hash.indexOf(window.sample.name) ? "images/tooltip/template-06.png" : "../images/tooltip/template-06.png";
|
|
$('#tooltipimg').attr('src', contentUrl);
|
|
|
|
$("#selectControls").ejDropDownList(
|
|
{
|
|
popupShown: "adjustpopupposition",
|
|
showCheckbox: true,
|
|
checkAll: true,
|
|
change: "evtpropscheckedevent"
|
|
});
|
|
target = $("#custom").ejTooltip({
|
|
content : "Learn to use the Python language to create programs of all kinds to creating practical applications.",
|
|
width: "200px",
|
|
position :{stem: {
|
|
horizontal: "left",
|
|
vertical: "center"
|
|
},
|
|
target: {
|
|
horizontal : "right",
|
|
vertical : "center",
|
|
},},
|
|
create :"tipCreate",
|
|
tracking: "tipTrack",
|
|
beforeOpen: "tipShown",
|
|
associate: "mousefollow",
|
|
open: "onShow",
|
|
close: "onHide",
|
|
beforeClose: "tipHide"
|
|
}).data("ejTooltip");
|
|
|
|
|
|
});
|
|
|
|
// Event wire and unwire
|
|
function evtpropscheckedevent(args) {
|
|
if (args.isChecked) {
|
|
switch (args.selectedValue) {
|
|
case "create":
|
|
target.option(args.selectedValue, "tipCreate");
|
|
break;
|
|
case "beforeClose":
|
|
target.option(args.selectedValue, "tipHide");
|
|
break;
|
|
case "beforeOpen":
|
|
target.option(args.selectedValue, "tipShown");
|
|
break;
|
|
case "close":
|
|
target.option(args.selectedValue, "onHide");
|
|
break;
|
|
case "open":
|
|
target.option(args.selectedValue, "onShow");
|
|
break;
|
|
case "tracking":
|
|
target.option(args.selectedValue, "tipTrack");
|
|
break;
|
|
}
|
|
}
|
|
else {
|
|
target.option(args.selectedValue, null);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
function tipCreate(sender) {
|
|
jQuery.addEventLog("Tooltip control has been <span class='eventTitle'>created</span>.<br/>");
|
|
|
|
}
|
|
function tipTrack(sender) {
|
|
if(trackCount == 1)
|
|
jQuery.addEventLog("Tooltip has been <span class='eventTitle'>Tracking</span> <span class='circle' id='count'>"+ trackCount + "</span><br/>");
|
|
else{
|
|
var target = $("div.event-tracer > div > div.content > div.eventarea > div#EventLog > div.divEventTrace > span > span#count");
|
|
if(target != 0 ){
|
|
target= $("div.event-tracer > div > div.content > div.eventarea > div#EventLog > div.divEventTrace > span > span#count")[0];
|
|
$(target).html('<span class="circle" id="count">'+ trackCount + '</span>');
|
|
}
|
|
}
|
|
trackCount ++;
|
|
}
|
|
function tipHide(sender) {
|
|
jQuery.addEventLog("<span class='eventTitle'>beforeClose</span> event is fired for Tooltip.<br/>");
|
|
trackCount =1;
|
|
}
|
|
function tipShown(sender) {
|
|
jQuery.addEventLog("<span class='eventTitle'>beforeOpen</span> event is fired for Tooltip.<br/>");
|
|
trackCount =1;
|
|
}
|
|
function onHide(sender) {
|
|
jQuery.addEventLog("Tooltip popup is <span class='eventTitle'>closed</span>.<br/>");
|
|
trackCount =1;
|
|
}
|
|
function onShow(sender) {
|
|
jQuery.addEventLog("Tooltip popup is <span class='eventTitle'>opened</span>.<br/>");
|
|
trackCount =1;
|
|
}
|
|
function onClear() {
|
|
jQuery.clearEventLog();
|
|
trackCount =1;
|
|
}
|
|
|
|
</script>
|
|
<style class="cssStyles">
|
|
.frame{
|
|
box-sizing: border-box;
|
|
border: 1px solid #ccc !important;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
width : 160px;
|
|
}
|
|
.frame img{
|
|
width : 100%;
|
|
}
|
|
@media (max-width: 440px){
|
|
.frame{
|
|
width : 160px !important;
|
|
}
|
|
}
|
|
.circle {
|
|
|
|
color: white;
|
|
background: #1dabce;
|
|
border-radius: 10px;
|
|
padding: 2px;
|
|
}
|
|
.image{
|
|
background-color: #ccc;
|
|
}
|
|
img{
|
|
padding-top: 8px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
</body>
|
|
</html>
|