基于jquery的finkyUI插件与Ajax实现页面数据加载功能


Posted in Javascript onDecember 03, 2010
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/json.js"></script> 
<script type="text/javascript" src="js/jquery.funkyUI.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#Click").click(function(){ 
$.getJSON("ajaxuser.jspx",{},function(json){ 
//alert(json); 
$("#clickTab").children().each(function(){ 
$(this).remove(); 
}); 
$(json).each(function(){ 
var id=this.uid; 
var name=this.uname; 
var pwd=this.upwd; 
//alert(name); 
var htmlStr='<tr><td bgcolor="white">'+id+'</td>'+'<td bgcolor="white">'+name+'</td>'+'<td bgcolor="white">'+pwd+'</td></tr>'; 
$("#clickTab").append(htmlStr); 
}); 
}); 
}); $("#clickTab").ajaxStart(function(){ 
$.funkyUI({ 
showDialog:false 
}); 
}); 
$("#clickTab").ajaxStop(function(){ 
$.unfunkyUI(); 
}); 
}); 
</script>

基于jquery的finkyUI插件与Ajax实现页面数据加载功能

finkyUI是很好用的一个jquery插件
写出这玩意的哥们很强
谢谢他了,不然自己做这效果不知要做到什么时候了......
----------------------------功能---------------------------
无限级弹出窗口
* Esc退出block弹出窗口
* 可拖动窗口
* 模态窗口
* 模态alert警告对话框
* 模态confirm对话框
* 页面局部模态
* 绑定按钮响应函数
* 弹出窗口加载iframe
* 自定义背景样式
组件提供了六个函数:

$.funkyUI // 弹出模态窗口 
$.unfunkyUI // 关闭模态窗口 
$.alert //警告提示对话框 
$.confirm //确认和取消对话框 
$.fn.block //块模态 
$.fn.unblock//解除块模态

调用示例:
$.blockUI({ 
url:"1.html",//弹出窗口显示的内容,使用iframe 
OKEvent:okEvent,//okEvent是自定义的确定按钮响应函数, 
css:{width:"700",height:"500"} 
}); 
$.alert("这是警告窗口"); 
$.confirm("这是个Boolean窗口"); 
$('#blocked').block();//id为blocked的元素设置为只读 
$('#blocked').unblock();//解除
Javascript 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
Javascript动画效果(4)
Oct 11 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 #Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 #Javascript
浅析jQuery的链式调用之each函数
Dec 03 #Javascript
jQuery的链式调用浅析
Dec 03 #Javascript
加速IE的Javascript document输出的方法
Dec 02 #Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 #Javascript
javascript学习之闭包分析
Dec 02 #Javascript
You might like
CodeIgniter安全相关设置汇总
2014/07/03 PHP
PHP答题类应用接口实例
2015/02/09 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
简单JS代码压缩器
2006/10/12 Javascript
不错的asp中显示新闻的功能
2006/10/13 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
社区庆八一活动方案
2014/02/02 职场文书
写求职信有什么意义
2014/02/17 职场文书
2014年内勤工作总结
2014/11/24 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
JS数组去重详情
2021/11/07 Javascript