jQuery下的几个你可能没用过的功能(2)

代码下载: 二.使用jQuery的append功能来无刷新切换播放的视频文件(flash或Silverlight播放器)。

之前有个minisite需要用到这个东西。我就试着研究了下,还真行的通。

大家可以看一下。我这个不算做广告吧,大家基本都是男的基本上不会看这个的。呵呵。只是这个方法我觉得你说不定以后可以用到的。

由于这些播放器都是一个embed控件,所以我们可以通过替换embed的src属性来播放不同的视频。例如:

image

使用jQuery的append()方法我们来个偷梁换柱,就可以把embed的src给换掉,并重新把div1的html给换掉,在页面上就像是使用ajax技术。

复制代码 代码如下:


$("#div1 embed").empty();
var placeHolder = $("<div />");
var tempParent = $("<div />");
var embed = $("#div1 embed");
embed.replaceWith(placeHolder);
tempParent.append(embed);
embed.attr("src", &auto=1);
placeHolder.replaceWith(tempParent.html());



三.用jQuery来为HTML实现header和footer功能。
在php,asp.net中都有header和footer这种控件,php中用include,而在asp.net中我们用master或者是ascx都行。

在html中呢?我相信一直没有。但是客户要求我们做的页面必须是html,说是怕用户太多。。。。。

用footer和header的好处就是当需要修改这些部分的内容时,我们只需要修改一个页面,所有的页面就都会变化。

后来找到个办法是使用jquery的load()方法。

首先我们需要在html中添加两个Div一个在<body>的最上面,一个在最下面,最好是一个Id='header',一个id='footer'。

然后在服务器端我们只需要创建一个header.html和一个footer.html。

在页面加载时我们会用jquery的load方法来loadheader.html和footer.html。

image


代码:

复制代码 代码如下:


$("#header").load("controls/header.html", function (response, status, xhr) {
if (status == "error") {
var msg = "服务器数据传输错误,请刷新页面";
// $("#error").html(msg + xhr.status + " " + xhr.statusText);
alert(msg);
}
});
// load footer from server
$("#footer").load("controls/footer.html", function (response, status, xhr) {
if (status == "error") {
var msg = "服务器数据传输错误,请刷新页面";
// $("#error").html(msg + xhr.status + " " + xhr.statusText);
alert(msg);
}
});


后面有可能的话我会接着总结点jQuery的技巧和大家分享。。。。。。。。还有那个下拉框的代码我稍后给大家提供下载地址。
Cheers
Nic  
代码下载:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxgyp.html