DWZ中如何整合第三方jQuery插件 jQuery插件一般是$(document).ready()中初始化
$(document).ready(function(){
// 文档就绪,初始化jQuery插件
});
// 或者或缩写形式
$(function(){
// 文档就绪,初始化jQuery插件
});
因为DWZ RIA是富客户端思路，第一次打开时加载界面到浏览器端，之后和服务器的交互是存数据交互，不占用界面相关的网络流量。
也就是说，只需要在一个完整的页面（通常是起始页，如index.aspx/index.php/index.jsp等），只有这个页面包含完整的html结构(<head><body>)，<head>中引入全部css、js 。其它的页面只需要页面碎片，就是<body></body>中的部分。
因为ajax加载基本原理是：ajax加载一段html代码片段放到当前页面的某个容器中（通常是一个div）。当然也可以是xml结构、json结构，只是在插入到当前页面之前也要转化成html代码片段。如果你ajax加载一个完整的页面(就是包括<head><body>标签的)，插入的当前document就有问题了，因为一个document不可能有多个<head><body>标签。
理解了富客户端思路你也就明白了为什么DWZ框架中整合第三方jQuery插件不能在<head>中通过$(document).ready()初始化。
DWZ初始化ajax加载的页面中的第三方jQuery组件：
· 一般插件初始化dwz.ui.js 中的initUI 里面处理，initUI()方法DWZ框架封装的$.fn.loadUrl()自动调用。如果是jQuery原生load方法需要手动调用$.fn.initUI()插件。主意initUI()中初始化是要注意作用域，里面有一个$p代表当前ajax加载的容器，只要初始化当前容器新加载的内容就可以了。
· 如果一些特殊的ajax交互，自己写回调函数处理
以整合kit日历控为例
1、在加载dwz框架的js页面中导入kit.js的css样式文件和js脚本文件，假设kit文件放在与页面所在文件同级的文件夹kit中。如下
<script src="../kit/js/kit.js"></script>
<!--[if IE]> <script src="../kit/js/ieFix.js"></script> <![endif]-->
<script src="../kit/js/array.js"></script> <script src="../kit/js/date.js">
</script> <script src="../kit/js/dom.js"></script>
<script src="../kit/js/selector.js"></script>
<link rel="stylesheet" href="http://www.cnblogs.com/css.css" /> <!--widget-->
<script src="../kit/js/widget/DatePicker/datepicker.js"></script>
<link rel="stylesheet" href="../kit/css/widget/DatePicker/datepicker.css" />
2、打开dwz.ui.js在最后面加入以下kit的初始化代码
var input; $kit.$(function () { //默认日历
var picker = new $kit.ui.DatePicker();
picker.init();
$(′textarea.BxDate′).each(function () {//表示使用textarea控件接收日控件所选择的值
var control = "#" + this.id;
input = this; //日期连续选择
$kit.ev({
el: control,
ev: ′focus′,
fn: function (e) {
var boxingDate;
boxingDate = e.target[$kit.ui.DatePicker.defaultConfig.kitWidgetName];
if (boxingDate) {
boxingDate.show();
} else {
boxingDate = new $kit.ui.DatePicker({
dateFormat: ′yyyy-mm-dd′
}).init();
boxingDate.adhere($kit.el(control));
boxingDate.show();
}
}
});
$kit.ev({
el: document,
ev: ′click′,
fn: function (e) {
if (input != null) {
boxingDate = input[$kit.ui.DatePicker.defaultConfig.kitWidgetName];
if (boxingDate && !$kit.contains(boxingDate.picker, e.target) && input != e.target) {
boxingDate.hide();
}
}
}
});
})
});
在页面如下调用
<textarea class="BxDate" name="PublishDate" id="PublishDate" cols="20" rows="8" style="width: 520px"></textarea>
class必须为BxDate,即上面初始休kit时所定义的.
效果如下
