以下代碼在:http://dojo.telerik.com/上運行
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/button/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="rectangleButton" class="rectangle">
Retangle
<br/>
<div style="width:100%;height:220px;border:1px dotted white;text-align:center">
<span class="k-i-drag-and-drop" style="font-size:30px;top:100px;"></span>
<span class="k-i-drag-and-drop" style="font-size:30px;top:100px;"></span>
<span class="k-i-drag-and-drop" style="font-size:30px;top:100px;"></span>
</div>
</div>
<button id="rectangleButton2" class="rectangle rectangle2">Retangle</button>
<button id="rectangleButton3" class="rectangle rectangle3">Retangle</button>
<div id="rectangle4" class="rectangle rectangle4"></div>
<button id="primaryTextButton" class=" circle">Circle</button>
<button id="primaryTextButton2" class=" circle circle2">Circle</button>
<script>
$(document).ready(function () {
$("#primaryTextButton").kendoButton({
click: onClick
//spriteCssClass: "k-icon k-i-plus"
});
$("#rectangleButton").kendoButton({
click: onClick2
//spriteCssClass: "k-icon k-i-plus"
});
$("#rectangleButton2").kendoButton({
click: onClick3
//spriteCssClass: "k-icon k-i-plus"
});
$("#rectangleButton3").kendoButton({
click: onClick3
//spriteCssClass: "k-icon k-i-plus"
});
$("#primaryTextButton2").kendoButton({
click: onClick
//spriteCssClass: "k-icon k-i-plus"
});
});
function onClick(e) {
alert("click");
}
function onClick2(e) {
alert("retangle");
}
function onClick3(e) {
alert("retangle2");
}
</script>
<style scoped>
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
text-align: center;
position: absolute; top: 100px; left: 165px;
background-color:blue;
color:white;
}
.circle2 {
position: absolute; top: 100px; left: 365px;
}
.rectangle {
border-radius: 10%;
width: 200px;
height: 300px;
text-align: center;
vertical-align : top;
position: absolute; top: 0px;
background-color:orange;
padding-left:0px;
padding-right:0px;
}
.rectangle2 {
position: absolute; top: 0px;left:215px;
}
.rectangle3 {
position: absolute; top: 0px;left:422px;
}
.rectangle4 {
position: absolute; top: 0px;left:627px;
}
.k-button-icontext .k-icon,
.k-button-icontext .k-image {
margin: 0;
}
.k-i-plus, .k-button-icon:hover span.k-icon.k-i-plus {
background-position: -48px -64px;
opacity: 1;
}
</style>
</body>
</html>
分享到:
相关推荐
MFC 不规则按钮 重绘, 按钮的形状, 根据图片的形状来绘制, 并且重叠的部分, 透明显示
设置不少于8个的按钮的移动而且移动过程中不重叠。不相交
[最新] MFC 不规则按钮的实现, 按钮的形状, 根据图片的形状来绘制, 并且重叠的部分, 透明显示_解决了因为GetPix函数, 导致的性能慢的问题
使用本地重叠地图进行导航.zip
vb和delphi中控件的Z顺序很容易调整,vc默认就没法调节,点了按钮,就跑上面了。原来是有点技巧的,vc也能实现。 用vc这么久才发现,可悲。怪微软,应该默认就可以调整,害的我们搞这么久 为公司开发的静态控件,...
1. 图片控件和按钮重叠放置 2.通过滑过或离开图片控件范围控制按钮的显隐 3. 按钮可响应事件
104使用本地重叠地图进行导航_new.pdf
vb和delphi中控件的Z顺序很容易调整,vc默认就没法调节,点了按钮,就跑上面了。原来是有点技巧的,vc也能实现。 用vc这么久才发现,可悲。怪微软,应该默认就可以调整,害的我们搞这么久
使用本地重叠地图导航.zip
【GIS实战应用案例】利用ArcGIS提取重叠面部分教程
使用本地重叠地图导航(1).zip
11使用本地重叠地图导航_new.pdf
196使用本地重叠地图导航_new.pdf
利用matlab使用重叠保留法和重叠相加法计算卷积
重叠相加和重叠保留算法的MATLAB实现
2.代码有注释,修改输入...3.本代码实现的重叠相加法与Matlab自带的卷积函数进行了对比,保证正确性。 4.本代码只适用于将x(n)刚好分为整数段的情况,因此要设计好每一段长度。 5.带有重叠相加法和本代码的介绍文章。
实现图像的不重叠分块,以及分块相似度的计算
简单计算矩形的重叠率,通过提供俩矩形对角线的俩个点的坐标来计算。适合重叠区域也为矩形的,其中重叠率的计算与通常计算不同。
针对井下特殊的工作环境,对不同边长、不同形状和不同匝数的重叠回线装置与关断时间、接收信号质量之间的关系进行了定性研究,通过实验得出了如下结论:关断时间受重叠回线装置的形状和接收线圈的匝数影响较小,而对重叠...
主要讲解长度列与短序列卷积算法(或相关算法),重叠保留法和重叠相加法,通过公式推导其计算原理