万普插件库

jQuery插件大全与特效教程

php手把手教你做网站(三十八)jquery 转轮盘抽奖,开盲盒

抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。

1、转轮盘

本来是想直接绘图实现轮盘,但是没有找到怎么填充文字,只好把轮盘弄成了背景图,通常用于游戏抽道具,商城积分抽奖,公司年末员工抽奖

  1. 点击抽奖触发jquery的click事件;

jQuery EasyUI使用教程:在数据网格中扩展行显示详细信息

数据网格可以更改它的视图来显示不同的效果。使用详细视图,数据网格可以在数据行的左边显示展开按钮(“+”或“-”)。用户可以展开行来显示附加的详细信息。

Step 1:创建数据网格

Item IDProduct IDList PriceUnit CostStatus

jQuery EasyUI使用教程:创建复杂的树网格

树网格可以展示有限空间上附带的多列和复杂数据电子表格。本教程将演示如何将表格数据排列在分割的网格和多行表头中,以便组织共同的数据。

创建树形网格

Region

jQuery EasyUI使用教程:合并数据网格的单元格

数据网格经常需要合并多个单元格,本教程将教会您在数据网格中如何合并单元格。

合并数据网格的单元格,您只需要简单地调用'mergeCells'方法并传入合并信息参数,告诉数据网格如何合并单元格。在合并的单元格中,除了第一个单元格以外,其他的单元格在合并后会被隐藏。

创建数据网格

<table id="tt" title="Merge Cells" style="width:550px;height:250px"
url="data/datagrid_data.json"
singleSelect="true" iconCls="icon-save" rownumbers="true"
idField="itemid" pagination="true">
<thead frozen="true">
<tr>
<th field="productid" width="80" formatter="formatProduct">Product ID</th>
<th field="itemid" width="100">Item ID</th>
</tr>
</thead>
<thead>
<tr>
<th colspan="2">Price</th>
<th rowspan="2" field="attr1" width="150">Attribute</th>
<th rowspan="2" field="status" width="60" align="center">Stauts</th>
</tr>
<tr>
<th field="listprice" width="80" align="right">List Price</th>
<th field="unitcost" width="80" align="right">Unit Cost</th>
</tr>
</thead>
</table>

jQuery EasyUI使用教程:创建一个链接按钮

jQuery EasyUI最新版下载>

本教程主要为大家展示如何使用jQuery EasyUI创建一个链接按钮。通常情况下,使用“button/”元素来创建一个按钮;使用“a/”元素来创建链接按钮。所以事实上一个链接按钮是一个显示为按钮样式“a/”元素。

为了创建一个链接按钮,你所需要做的就是添加一个名为'easyui-linkbutton'的类属性到“a/”元素中:

jQuery EasyUI使用教程:根据条件更换数据网格行背景颜色

jQuery EasyUI最新试用版免费下载>

本教程将为大家介绍在某些条件下如何更改数据网格组件的行样式。当listprice值大于50时,我们将为该行设置不同的颜色。

数据网格的rowStyler函数允许您可以自定义行样式,下面的代码演示了如何更改行样式:

Item IDProduct IDList PriceUnit Cost

用户界面框架jQuery EasyUI示例大全之Accordion

jQuery EasyUI最新试用版免费下载>

jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的应用程序。

jQuery EasyUI使用教程:自定义数据网格分页

jQuery EasyUI最新试用版免费下载>

数据网格内置一个很好特性的分页功能,自定义也相当简单。在本教程中,我们将创建一个数据网格,并在分页工具栏上添加一些自定义按钮。

创建数据网格

jQuery EasyUI使用教程:在数据网格中添加复选框

本教程为您演示如何放置一个复选框到数据网格中。通过复选框用户将可以选择选中/取消选中网格行数据。

想要添加一个复选框列,用户只需要添加一个列的checkbox属性,并将其设置为true。代码如下所示:

<table id="tt" title="Checkbox Select" class="easyui-datagrid" style="width:550px;height:250px"
url="data/datagrid_data.json"
idField="itemid" pagination="true"
iconCls="icon-save">
<thead>
<tr>
<th field="ck" checkbox="true"></th>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="80">Product ID</th>
<th field="listprice" width="80" align="right">List Price</th>
<th field="unitcost" width="80" align="right">Unit Cost</th>
<th field="attr1" width="100">Attribute</th>
<th field="status" width="60" align="center">Status</th>
</tr>
</thead>
</table>

jQuery EasyUI使用教程:数据网格中的列运算

jQuery EasyUI最新试用版免费下载>

在本教程中,您将学习如何在可编辑的数据网格中包含一个运算列。计算列一般含有一个或多个其他列计算的值。

首先创建可编辑的数据网格。在这里我们创建了一些可编辑的列,'listprice'、'amount'和'unitcost'列被定义为numberbox编辑类型。运算列是'unitcost'字段,将是listprice乘以amount列的结果。

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言