164 строки
5.5 KiB
HTML
164 строки
5.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<title>Essential JS 1: Tooltip - Filter Behaviour</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/ej.web.all.min.js" type="text/javascript"></script>
|
||
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="content-container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="cols-sample-area">
|
||
|
|
<div id="form" class="frame">
|
||
|
|
<form id="details" role="form">
|
||
|
|
<fieldset>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="name">User Name:</label>
|
||
|
|
<input class="form-control" type="text" id="name" name="firstname" title="Please enter your name">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="email">Email Address:</label>
|
||
|
|
<input class="form-control" id="email" type="text" name="email" title="Enter a valid email address">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="pwd">Password:</label>
|
||
|
|
<input class="form-control" id="pwd" type="password" name="pwd" title="Be at least 8 characters length">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="Cpwd">Confirm Password:</label>
|
||
|
|
<input class="form-control" type="password" id="Cpwd" name="Cpwd" title="Re-enter your password">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input id="sample" type="submit" value="Submit">
|
||
|
|
<input id="clear" type="reset" value="Reset">
|
||
|
|
</fieldset>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="sampleProperties">
|
||
|
|
<div class="prop-grid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
Trigger
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<select id="trigger" class="e-ddl" data-bind="value: field">
|
||
|
|
<option value="focus" selected="selected"> Focus </option>
|
||
|
|
<option value="click"> Click </option>
|
||
|
|
<option value="hover"> Hover </option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var target = $("#details").ejTooltip({
|
||
|
|
|
||
|
|
trigger: "focus",
|
||
|
|
width : "175px",
|
||
|
|
height : "30px",
|
||
|
|
position :{stem: {
|
||
|
|
horizontal: "left",
|
||
|
|
vertical: "center"
|
||
|
|
},
|
||
|
|
target: {
|
||
|
|
horizontal : "right",
|
||
|
|
vertical : "center",
|
||
|
|
},},
|
||
|
|
target: ".form-control",
|
||
|
|
beforeOpen : "onOpen"
|
||
|
|
}).data("ejTooltip");
|
||
|
|
$("#sample").ejButton({
|
||
|
|
showRoundedCorner: true,
|
||
|
|
size: "medium"
|
||
|
|
});
|
||
|
|
$("#clear").ejButton({
|
||
|
|
showRoundedCorner: true,
|
||
|
|
size: "medium"
|
||
|
|
});
|
||
|
|
$("#sampleProperties").ejPropertiesPanel();
|
||
|
|
$("#trigger").ejDropDownList({ "change": "selectChange", width: "120px", selectedIndex: 0 });
|
||
|
|
function selectChange(args) {
|
||
|
|
|
||
|
|
target.option("trigger", args.value)
|
||
|
|
}
|
||
|
|
function onOpen(args){
|
||
|
|
var currentElement = args.event.currentTarget, content = $(currentElement).attr("data-content");
|
||
|
|
if(content == "Enter a valid email address")
|
||
|
|
target.setModel({cssClass : "info"});
|
||
|
|
//$(target.tooltip).removeClass("warning").addClass("info");
|
||
|
|
|
||
|
|
else
|
||
|
|
target.setModel({cssClass : "warning"});
|
||
|
|
//$(target.tooltip).removeClass("info").addClass("warning");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.info {
|
||
|
|
background-color : #f9ce9b;
|
||
|
|
color : #b29b7f;
|
||
|
|
}
|
||
|
|
.warning{
|
||
|
|
background-color: #e56161;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
.cols-sample-area {
|
||
|
|
height: 500px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.frame{
|
||
|
|
width : 500px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border : none;
|
||
|
|
}
|
||
|
|
.form-control{
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
}
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
fieldset {
|
||
|
|
border: 1px solid #D9DEDD;
|
||
|
|
padding: 15px;
|
||
|
|
width : 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
}
|
||
|
|
#sample{
|
||
|
|
margin-right: 50px;
|
||
|
|
}
|
||
|
|
#details .e-button{
|
||
|
|
|
||
|
|
margin: 10px;
|
||
|
|
}
|
||
|
|
.material .e-def, .office-365 .e-def {
|
||
|
|
padding: 6px 8px 2px 8px !important;
|
||
|
|
}
|
||
|
|
.darktheme .info .e-def{
|
||
|
|
color: black !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</body>
|
||
|
|
</html>
|