在做cordova项目的时候,感觉应用的响应速度跟原生应用比相差甚远,一个主要问题就是如加载层、进度条等弹出对话框的效率不行。毕竟项目中的这些弹框都是用dom拼成的,dom的渲染效率和原生控件比起来慢也是正常的。为了能够让应用尽可能的接近原生应用的效果,我业余时间做了一套对话框插件,使用后应用的使用体验立马有了很大的提升。兼容ios和安卓平台。插件包括加载层、进度条、文件选择。项目已经放到了github,有兴趣的小伙伴可以下载试一试。

插件只支持cordova5.0及以上版本,初始化如下:

cordova plugin add https://github.com/laden666666/cordovaDialogsPlus

这是一个cordova的插件项目,是对cordova的官方插件cordova-plugin-dialogs的扩展,在ios和安卓平台上,提供了进度条、加载层、文件选择对话框、消息提示等功能。安卓平台的代码参考了cordova-plugin-dialogs的部分源码。

api及例子:

1.打开显示加载层,可以设置加载层的标题和内容

window.navigator.dialogsPlus.showLoading(title, loadingMassage);

隐藏加载层

window.navigator.dialogsPlus.hideLoading();

2.显示进度条对话框,可以设置进度条的标题和内容,同时这个插件支持一个取消按钮。

window.navigator.dialogsPlus.progressStart(title, loadingMassage, errorCallback, canCancel, cancelButtonName, cancelCallback);

这个函数返回的是一个json对象,使用这个对象可以对此函数打开的进度条操作,例如设置进度或者隐藏进度条。

var progress = window.navigator.dialogsPlus.progressStart("title","loading....");
progress.setValue(100);
progress.hide(successCallback, errorCallback);

3.选择文件,安卓上你可以使用系统对话框选择文件,选择后将获得所选文件的绝对路径。但是在ios上,你只能通过此插件依赖的cordova-plugin-camera插件,去选择相册里的图片,这主要是因为ios的文件沙箱机制,我无法向安卓那样获取其他应用目录里的图片。

window.navigator.dialogsPlus.chooseFile(title, successCallback, errorCallback);

4.通过类似安卓toast消息的形式显示通知。持续事件的单位是毫秒。

window.navigator.dialogsPlus.showNotice(notice,duration);

cordova加载层、进度条、文件选择插件的更多相关文章

  1. android 网络异步加载数据进度条

    ProgressDialog progressDialog = null; public static final int MESSAGETYPE = 0; private void execute( ...

  2. js - 预加载+监听图片资源加载制作进度条

    这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图 本 ...

  3. cocos2dx 3.x(加载cocostudio进度条)

    // // MyLoagingScene.hpp // My // // Created by work on 16/10/13. // // #ifndef MyLoagingScene_hpp # ...

  4. WPF BackGroundWord 异步加载更新进度条示例

    <Window x:Class="AsynchronousLoading.MainWindow" xmlns="http://schemas.microsoft.c ...

  5. js 多张图片加载 环形进度条

    css 部分使用 svg 绘制环形 svg{width:100px; height: 100px; margin:15% auto 25%; box-sizing:border-box; displa ...

  6. WebView长按保存图片;WebView不跳转到系统的浏览器;WebView加载显示进度条;WebView返回事件处理;

    直接看代码即可,代码里面注释写的很清楚,这个类拉下来就能用: 写法和命名比较粗暴,但也简单易懂: public class MainActivity extends AppCompatActivity ...

  7. 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件

    [源码下载] 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件 作者 ...

  8. 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件

    CustomResource ResourceDictionary 加载外部的 ResourceDictionary 文件 示例1.演示“CustomResource”相关知识点Resource/Cu ...

  9. Afinal加载网络图片及下载文件使用方法

    Afinal快速开发框架使用起来非常方便,下面将讲解如何利用Afinal加载网络图片及下载文件: 先看效果图: 注意:使用Afinal前需添加Afinal的jar,可以在这里下载:http://dow ...

随机推荐

  1. STL之关联容器

    关联容器包含map.set.multimap.multiset. 关联容器的特点是明显的,相对于顺序容器,有如下特点: 1.其内部是采用非线性的二叉树结构,具体的说是红黑树的结构原理实现的. 2.se ...

  2. 谢欣伦 - 原创软件 - 游戏专题 - 我的桌面My Desktop

    今天在网上看到一个用桌面背景当做拼图内容的游戏很新颖,反正今天下雨我也闲着,索性用了半天时间做了一个类似的游戏<MyDesktop>.做完后立即分享给了两个朋友,他俩都被吓坏了.现在分享给 ...

  3. Struts2中method={1}

    <action name="Person_*" class="com.action.PersonAction" method="{1}" ...

  4. 【JSOI2007】【Bzoj1029】建筑抢修

    贪心... 按照T2来进行排序,用堆来进行维护.循环一遍,如果循环时间加上已用时间不超过截止时间,那就ANS++.否则,将它与堆顶判断,如果小于堆顶就把堆顶踢出,把它加入. #include<c ...

  5. [实践] Android5.1.1源码 - 让某个APP以解释执行模式运行

    [实践] Android5.1.1源码 - 让某个APP以解释执行模式运行   作者:寻禹@阿里聚安全 前言 本文的实践修改了Android5.1.1的源码. 本文只简单的讲了一下原理.在“实践”一节 ...

  6. Jmeter 使用Jmeter与Badboy进行压力测试

    1. 介绍 Badboy是一个录制请求的工具,这里用它来生成文件给JMeter用. JMeter是一个用java写的开源的性能测试工具,用于模拟在服务器.网络或者其他对象上附加高负载以测试他们提供服务 ...

  7. Node.js教程系列~目录

    Node.js这个东西在近几年火起来了,而且会一直火下去,无论在infoq还是在cnblogs,csdn上,都可以到处看到它的样子,它主推的应该就是异步式I/O 吧,是的,设计的很完美,很吸引人,虽然 ...

  8. Mysql 备份

    MySQL数据库备份命令   备份MySQL数据库的命令 mysqldump -hhostname -uusername -ppassword databasename > backupfile ...

  9. Oracle 多行转多列,列值转为列名

    前段时间做调查问卷,客户创建自定义问卷内容,包括题目和选项内容; 之后需要导出问卷明细,,,,麻烦来咯 于是到网上到处搜索,没有直接结果;于是又找各种相似的,,终于功夫不负有心人 然后最终自己写出来了 ...

  10. KnockoutJS 3.X API 第六章 组件(3) 组件绑定

    组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...