以下代碼在：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>
分享到：
相关推荐
在网页设计中，导航按钮是页面布局的关键元素，它们引导用户轻松浏览网站的不同部分。本文将探讨如何使用Adobe Photoshop CS3来创建简单的网站导航按钮，通过以下四个主要步骤实现这一目标。 首先，我们需要启动...
`transition`定义了转换效果的持续时间和速度曲线，而`transform`用于改变元素的位置、大小和形状。 - 字体文件（位于`fonts`文件夹）可能包含了自定义字体，用于提升菜单的视觉效果。 3. **jQuery脚本**： - `js...
按钮设计可能包括不同主题、颜色、形状和动画效果，以增强用户体验。 2. **皮肤模板.im**：皮肤模板通常指的是电子书的整体外观和感觉，包括背景、字体样式、色彩方案等。用户可以根据自己的品牌或主题选择合适的...
5. **布局调整**：可能需要通过调整`position`和`z-index`属性来确保展开的半圆不会重叠或遮挡其他元素。 6. **浏览器兼容性**：虽然大部分现代浏览器都支持这些CSS3特性，但为了保证兼容性，可能需要引入前缀，如`...
Flutter通用模板是一款为移动应用开发者设计的高效开发工具，它提供了预设的首页布局和交互模式，便于快速构建具有底部导航栏和顶部可切换导航功能的应用。这个模板深入集成了Flutter框架的核心特性，使得开发者可以...
目录作为导航工具，应清晰明了，包括标题、导航条和退出按钮。保持风格统一，避免混乱的字体、形状和颜色。目录页面应提供快速访问各个部分的途径，同时设有退出功能，以便随时返回主菜单。 3. **对文字的处理应...
1. 功能图标：这类图标通常用于表示菜单项、按钮或功能，如“保存”（通常表现为硬盘形状）、“撤销”（箭头回转）和“复制”（两个重叠的文档）。它们应当简单明了，一眼就能看出其含义。 2. 导航图标：在网页或...
同时，还需要添加控制按钮和指示器，通常使用`<a>`标签作为导航按钮，`<li>`标签作为指示点。 CSS在轮播图的实现中扮演了关键角色，它可以实现动态效果，如平滑的过渡、自动切换和响应式布局。以下是一些核心的CSS...
`.left`和`.right`则是左右切换按钮的样式，设置了位置、大小、颜色和光标形状。 JavaScript部分是轮播图的核心逻辑。首先，通过`querySelectorAll`获取到所有的点状导航元素和图片元素。然后，设置初始状态，例如...
15.3.3 重叠动画 366 15.3.4 同步的动画 367 15.3.5 控制播放 367 15.3.6 监视动画进度 371 15.4 动画缓动 373 15.4.1 使用缓动函数 373 15.4.2 在动画开始时应用缓动与在动画 结束时应用缓动 374 15.4.3 缓动函数类...
在Android开发中，实现“上面圆角，下面直角”的界面设计是一种常见的需求，这主要应用于顶部导航栏或者对话框等元素，以增加界面的视觉吸引力和用户体验。本篇文章将详细探讨如何在Android中实现这样的效果，以及...
在编程中，常见的图标有保存（通常是一个磁盘形状）、复制（两个重叠的纸张）、粘贴（一个剪贴板）、撤销（一个向左箭头）、重做（一个向右箭头）、编辑（一只笔）等。这些图标有助于用户理解和操作软件，使交互过程...
2. **目录结构**：目录是课件的导航系统，应包含主题、导航条和退出按钮。设计时需保持简洁和统一风格，避免过多的颜色和形状，以便用户快速理解并找到所需内容。 3. **文字处理**：根据文字量调整字号和布局。少量...
1. 动作图标：这类图标代表了用户可以执行的操作，如保存（通常显示为一个磁盘形状）、复制（两个重叠的文档）、粘贴（一个刷子和一个剪切板）、撤销（通常是一个向左的箭头）和重做（一个向右的箭头）等。...
这种技术不仅可以用于加载动画，还可以应用于各种网页交互效果，如按钮悬停、导航切换等，为网页设计带来丰富的视觉体验。通过不断实践和创新，我们可以创造出更多富有创意的CSS3动画效果，提升网站的吸引力和用户...
这些经典图标可能包括了常见的操作按钮图标，如“保存”（通常表现为磁盘形状）、“复制”（通常为两个重叠的纸张）、“剪切”（剪刀图形）、“粘贴”（通常为一张纸和一个胶水刷）以及“撤销”和“重做”（箭头动作...
我们可以设置按钮的文字、颜色、形状，并在用户点击时执行相应的功能，如验证输入、导航到下一个页面等。 4. **图标展示**：在Flutter中，我们可以使用Icon Widget展示矢量图标。B站页面中的图标，如登录/注册切换...
在IT领域，尤其是在网页设计和用户体验（UX）设计中，"滑动门"是一种常见的交互效果，它通常用于导航菜单或者信息展示。这种特效能够使用户通过简单的手势或鼠标操作来揭示隐藏的内容，提高交互性和信息的可访问性。...
同时，WPF的渲染引擎能够处理多层次、不规则形状及半透明效果的重叠内容，这在传统的Windows窗体编程中是难以实现的。 在WPF中，窗口（Window）是最基本的容器，它继承自ContentControl类，支持包含单个子元素并可...
此外，Fireworks还提供了丰富的内置模板和库资源，用户可以快速创建网页元素，如按钮、导航条等，大大提高了工作效率。 Fireworks 8与PS的相似之处在于它们都支持图层管理和滤镜效果，这使得用户可以在同一个文件中...