找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2016-8-16 11:52  /   查看:3745  /  回复:0
本帖最后由 断天涯大虾 于 2016-8-18 10:08 编辑

里约奥运赛事如火如荼,激战正酣!中国队奋力拼搏,表现抢眼,不断刷新奖牌榜!

赛场下,小编也被奥运激情点燃,看赛事直播,在微博和朋友圈点赞助威,更用纯前端开发工具 Wijmo 写了个奖牌榜,前后用了不到一个小时,成就感满满,分享给大家。

先来一起看看界面吧。清晰明了,简约大方,实时自动更新奖牌数,并根据金牌数自动调整排名。支持分页查看,并可搜索你想了解的国家奖牌数。(请点击看大图)

还可一键切换为“图表”样式,在图表元素上方移动鼠标时,还会显示数据点的详细信息。(请点击看大图)


在创建奖牌榜时,小编用到了两款前端工具:
AngularJS
优秀的前端 JS 框架,已经被用于 Google 的多款产品当中,其最为核心的功能是 MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等;
Wijmo
新一代 JavaScript UI 控件集,由全球最大的控件提供商葡萄城公司研发并提供技术支持,它秉承触控优先的设计理念,具有触控设备支持广泛、设计简洁、极易定制等特点,并全面支持 Angular 2。微软 Dynamics 使用葡萄城的Wijmo 5提供移动端用户界面选择。

创建方法上,先使用 Angular 服务来获取里约奥运会的最新战况,数据被获取并通过一个 JSON 对象返回,然后加载到 Wijmo 的 CollectionView 上。

数据展示上,使用了 Wijmo Popover,Wijmo FlexChart 和 Wijmo FlexGrid 控件,十分多样。

Wijmo FlexGrid 可将表格绑定到一个数据源,并允许选择数据项的数量、Selection Mode 和 Culture 以及是否用数据映射和格式化的菜单。即使有大量的数据项,也可通过自动虚拟化行和列来实现这个级别的性能;

Wijmo FlexChart 可将图表绑定到一个数据源,您可选择图表类型,系列叠加和旋转。如果在图表元素上方移动鼠标,还会显示数据点的详细信息 Tooltip。
快如闪电触控优先的 Wijmo,提供更灵活的操作体验,您也来试试吧!

查看 Demo,请点击此处
了解更多或下载试用,请访问 Wijmo 官方网站

   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部