彩票走势图

Wijmo5 Flexgrid基础教程:右键菜单

原创|使用教程|编辑:龚雪|2016-02-15 09:14:50.000|阅读 258 次

概述:本文介绍如何给Wijmo5 flexgrid添加右键菜单,代码使用纯JavaScript代码实现。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

<Wijmo Enterprise下载>

本文介绍如何给Wijmo5 flexgrid添加右键菜单,代码使用纯JavaScript代码实现。

首先添加flexgrid

添加的方法可以参考前面的教程:数据绑定

然后添加menu的相关文件(js和css文件)

添加代码如下:

<!--Wijmo Widgets CSS-->
<link href="script/jquery.wijmo-pro.all.3.20153.83.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="script/jquery.wijmo-open.all.3.20153.83.min.js" type="text/javascript"></script>
<script src="script/jquery.wijmo-pro.all.3.20153.83.min.js" type="text/javascript"></script>

通过DOM元素添加Menu

代码参考:

<ul id="wijmenu">
<li><a href="#">Breaking News</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Finance</a></li>
<li><a href="#">Food & Cooking</a></li>
<li><a href="#">Lifestyle</a>
<ul>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Sports</a></li>
</ul>

初始化Menu

初始化Wijmo menu,并且添加给flexgrid做右键菜单,代码参考:

$("#wijmenu").wijmenu({
orientation: 'vertical',
trigger: "#theGrid",
triggerEvent: "rtclick"
});

添加的右键菜单效果如图所示:

Wijmo5 Flexgrid基础教程:右键菜单

本文所用到的引用文件以及源代码请参考:

PS: 关于ComponentOne,这些产品你可以关注>>
本文转载自
葡萄城经典UI产品新年大促,惊喜折扣礼品送不停!优惠详情点击查看>>
新年新禧新气象,送礼送福送优惠!优惠详情点击查看>>

标签:JavaScript HTML5UI工具包

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP