使用 jQuery progressbar 实时显示用户资料完善度
2011-12-15 14:33
381 查看
[b]这[/b]是一篇迟到的文章, 例子是上周末就完成了, 是一个使用 jQuery Progressbar 显示用户资料完整度的例子, 不是很复杂.
由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:
http://code.google.com/p/zsharedcode/wiki/JQueryElementProgressBarDoc
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码
本文将说明 Progressbar 控件的功能以及使用过程中的注意事项和技巧, 目录如下:
* 准备
* 进度
* 附录: 显示资料完善度
[b]准备[/b]
请确保已经在 Download 下载资源 中下载 JQueryElement 最新的版本.
请使用指令引用如下的命名空间:
除了命名空间, 还需要引用 jQueryUI 的脚本:
[b]进度[/b]
通过 Value 属性可以初始化 Progressbar 的进度, Value 应该在 0 到 100 之间.
也可以在客户端使用 javascript 来设置或获取 progressbar 的进度, 详细可以参考 http://docs.jquery.com/UI/Progressbar:
在上面的示例中, 设置 Progressbar 的 IsVariable 属性为 true, 生成一个同名的 javascript 变量 pb. 然后通过 pb 来获取和设置 progressbar 的进度.
[b]附录: 显示资料完善度[/b]
在这一节中, 将使用 Progressbar 来显示用户资料的完善度:
这里实现了一个进度条, 其对应的 javascript 脚本将生成到 ID 为 package 的 ScriptPackage 控件中.
在页面载入后, 将调用由 AjaxManager 生成的 init 函数:
init 函数的作用是从 userinfo1.ashx 获取用户信息, 其中包含资料完善度, 并将这些信息显示在页面上. 有关更多 AjaxManager 的信息, 请参考 使用 AjaxManager 生成调用服务器端方法的 javascript 函数.
在上面的代码中, -:data 将根据不同的 .NET 版本替换为 data 或者 data.d, 详细请参考 使用 ASP.NET 一般处理程序或 WebService 返回 JSON.
最后, 需要一个保存的按钮:
当点击按钮时, 将页面上的用户信息传递给 userinfo1.ashx, userinfo1.ashx 将返回资料完善度.
在 AjaxManager 和 Button 的 ClickAsync 中, 都使用了 Parameter 来增加参数, 更多内容可以参考 通过 Parameter 对象添加 Ajax 请求时的参数.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/nkhyRcOuu6M/, 建议全屏观看.
由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:
http://code.google.com/p/zsharedcode/wiki/JQueryElementProgressBarDoc
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码
本文将说明 Progressbar 控件的功能以及使用过程中的注意事项和技巧, 目录如下:
* 准备
* 进度
* 附录: 显示资料完善度
[b]准备[/b]
请确保已经在 Download 下载资源 中下载 JQueryElement 最新的版本.
请使用指令引用如下的命名空间:
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui" TagPrefix="je" %> <%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui" TagPrefix="je" %>
除了命名空间, 还需要引用 jQueryUI 的脚本:
<link type="text/css" rel="stylesheet" href="[样式路径]/jquery-ui-<version>.custom.css" /> <script type="text/javascript" src="[脚本路径]/jquery-<version>.min.js"></script> <script type="text/javascript" src="[脚本路径]/jquery-ui-<version>.custom.min.js"></script>
[b]进度[/b]
通过 Value 属性可以初始化 Progressbar 的进度, Value 应该在 0 到 100 之间.
也可以在客户端使用 javascript 来设置或获取 progressbar 的进度, 详细可以参考 http://docs.jquery.com/UI/Progressbar:
<je:Progressbar ID="pb" runat="server" ScriptPackageID="package" CssClass="info-bar" IsVariable="true"> </je:Progressbar> <script type="text/javascript"> $(function () { var p = progressbar('option', 'value'); p += 20; pb.progressbar('option', 'value', p); }); </script>
在上面的示例中, 设置 Progressbar 的 IsVariable 属性为 true, 生成一个同名的 javascript 变量 pb. 然后通过 pb 来获取和设置 progressbar 的进度.
[b]附录: 显示资料完善度[/b]
在这一节中, 将使用 Progressbar 来显示用户资料的完善度:
<je:Progressbar ID="pb" runat="server" ScriptPackageID="package" Value="20"> </je:Progressbar> ... <je:ScriptPackage ID="package" runat="server" />
这里实现了一个进度条, 其对应的 javascript 脚本将生成到 ID 为 package 的 ScriptPackage 控件中.
在页面载入后, 将调用由 AjaxManager 生成的 init 函数:
<je:AjaxManager ID="ajax" runat="server"> <je:AjaxSetting ClientFunction="init" Url="userinfo1.ashx" Success=" function(data){ $('#prec').text(-:data.prec + '%'); pb.progressbar('option', 'value', -:data.prec); $('#realname').val(-:data.realname); $('#nickname').val(-:data.nickname); $('#email').val(-:data.email); $('#sex').val(-:data.sex); $('#birthday').val(-:data.birthday); } "> <je:Parameter Name="c" Type="Expression" Value="'get'" /> </je:AjaxSetting> </je:AjaxManager> ... <script type="text/javascript"> $(function () { init(); }); </script>
init 函数的作用是从 userinfo1.ashx 获取用户信息, 其中包含资料完善度, 并将这些信息显示在页面上. 有关更多 AjaxManager 的信息, 请参考 使用 AjaxManager 生成调用服务器端方法的 javascript 函数.
在上面的代码中, -:data 将根据不同的 .NET 版本替换为 data 或者 data.d, 详细请参考 使用 ASP.NET 一般处理程序或 WebService 返回 JSON.
最后, 需要一个保存的按钮:
<je:Button ID="cmdSave" runat="server" ScriptPackageID="package" Label="即使警告也可以保存"> <ClickAsync Url="userinfo1.ashx" Success=" function(data){ $('#prec').text(-:data.prec + '%'); pb.progressbar('option', 'value', -:data.prec); alert('设置完毕'); } "> <je:Parameter Name="c" Type="Expression" Value="'save'" /> <je:Parameter Name="realname" Type="Selector" Value="'#realname'" /> <je:Parameter Name="nickname" Type="Selector" Value="'#nickname'" /> <je:Parameter Name="email" Type="Selector" Value="'#email'" /> <je:Parameter Name="sex" Type="Selector" Value="'#sex'" /> <je:Parameter Name="birthday" Type="Selector" Value="'#birthday'" /> </ClickAsync> </je:Button>
当点击按钮时, 将页面上的用户信息传递给 userinfo1.ashx, userinfo1.ashx 将返回资料完善度.
在 AjaxManager 和 Button 的 ClickAsync 中, 都使用了 Parameter 来增加参数, 更多内容可以参考 通过 Parameter 对象添加 Ajax 请求时的参数.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/nkhyRcOuu6M/, 建议全屏观看.
相关文章推荐
- 使用jquery的autocomplete的方法,进行用户自定义的显示列表方法给用户
- asp使用jquery延迟加载用户控件加速网页显示速度
- asp使用jquery延迟加载用户控件加速网页显示速度
- 使用vue与jquery实时监听用户输入状态的操作代码
- 使用jQuery Uploadify借助Dorado平台实现批量上传文件动态显示实时上传文件状态
- 牛腩购物13: 整合用户资料修改 用户修改密码 asp.net登陆控件的使用(登录前 登陆后) 显示登录名 显示注销按钮
- 使用jquery的blockui插件显示弹出层
- 使用百度API实现实时公交站点查询及列表显示
- 3.1 MonoForAndroid用户人机界面-更改与显示文字标签-TextView标签的使用
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- IOS开发——使用shareSDK授权新浪微博、腾讯微博、微信并获取用户资料
- 使用HTML5、CSS3和jQuery增强网站用户体验
- 【转载】如何在工具条动态的显示用户操作,并实时显示在工具条上呢
- emWin使用资料收集(二) ----- 使用emWin和BmpCvt工具显示位图
- ubuntu下arm-linux-gcc已安装,root用户使用却显示command not find
- ubuntu新建用户不能使用ll等指令,显示出来的信息没有颜色区分的解决方案
- 使用HTML5、CSS3和jQuery增强网站用户体验
- 使用HTML5、CSS3和jQuery增强网站用户体验
- 利用Ajax生成ProgressBar:实现同类大批量数据批量生成Html,并实时显示进度条,可查看处理日志
- 当图片URL为404时,使用Glide加载图片,修改用户头像无法显示最新图片bug