jQuery下的几个你可能没用过的功能
一.创建一个自己的dropdownlist
说到dropdown list,在html中你会想到
代码如下:
<select>
<option>hello 1</option>
</select>
但是它的显示会不大好看，我们可以使用div+ul来自己做一个drop down list，而且有很苦的slidedown和slideup功能。
在IE8下的效果对比：
首先说说思路，很简单的思路，
a. 需要用一个Div来代替drop down list中选中记录显示的那个容器，通过offset来得到这个Div应该显示的位置,offtset.top和offset.left。
b. 通过一个UL以及它的孩子们li来模拟下拉框。这里需要注意几个问题，
i:一定要把UL放在一个新建好的Div里面，而且这个Div的位置距离top的数据上一步中的Div(我们叫它iDiv)的top+iDiv.height;
ii:每次在点击一个li元件后一定要清空它，不然你的drop down list会越来越长。。。
iii:当鼠标在别的地方点击时，一点要隐藏掉dropdown list。
下面我来一步一步结合代码来给说明如何实现这个功能：
1.创建iDiv来作为drop down list选中值的容器。
在创建iDiv之前我们需要先来得到要显示这个drop down list的位置：
代码如下:
// get the select list 's position using offset,width and height
var offset = $(".select_css").offset();
var width = $(".select_css").width();
var height = $(".select_css").height();
接下来是创建iDivb并使用css()方法来为iDiv添加格式。
代码如下:
var iDiv = $("<Div id='iDiv' class='iDiv'>").css({
'top': offset.top,
'left': offset.left,
'width': width,
'height': height,
'border': '1px solid #aaaaaa',
'fontSize': '12px',
'textIndent': '4px',
'cursor': 'default' }).text("hello")；
iDiv也给加了个class='iDiv'，本来不需要的，但是后来我发现jQuery的css()无法去搞定背景图片的no-repeat 属性，google了半天老外也没有例子，所以只有通过这个clas='iDiv'来设定：
代码如下:
.iDiv
{
background-image:url('images/select_right.gif');
background-position:right;
background-repeat:no-repeat;
}
效果如下; 
2.在iDiv发生点击事件时，来创建一个下拉框，并使用slidedown效果。
首先我们需要创建一个cDiv并把它添加到html的body,它的位置刚好是在iDiv的下面，所以需要cDiv的创建如下：
代码如下:
var cDiv = $("<div id='cDiv'>").css({
'position': 'absolute',
'width': width,
'top': offset.top + 22,
'left': offset.left,
'background': '#f7f7f7',
'border': '1px solid silver'
}).hide();
而且默认我们要它隐藏掉。
有了这个cDiv，我们只需要在iDiv发生Click事件时创建一个UL列表，并把它append倒cDiv。
代码如下:
var UL = $("<ul style='list-style:none;margin:0;padding:0;'></ul>").appendTo(cDiv);
for (var i = 1; i < 10; i++) {
$("<li style='testIndent:4px;height:20px;lineheight:20px; cursor:pointer;'>").appendTo(UL).text("hello" + i).mouseover(function () {
$(this).css(
{
'color': 'white',
'background': 'gray'
}
);
}).mouseout(function () {
$(this).css(
{
'color': 'black',
'background': 'white'
});
}).click(function () {
// disvisualble the cDiv and set the selected crrent li's text as iDiv's text
$("#cDiv").slideUp().hide();
$("#iDiv").html($(this).html());
});
}
// slide show the cDiv now
$("#cDiv").slideDown('slow');
可以看到在添加每条li记录时都为它添加了mouseover,mouseout和click事件。
在click事件发生时，我们不仅要把cDiv给slideUp还需要把它隐藏掉，并且在下次点击iDiv之前先清空cDiv。这两点非常重要。你可以试试不做这两点时会出现什么效果。
在click li时别忘了把当前li的html内容复制给iDiv，不然我们的控件就没实际作用啦。。。。。
3.使用Ajax从服务器获取下拉列表的值。
很多时候我们需要动态的从服务器获取下拉列表的值，这样就需要在点击iDiv时先通过jQuey的ajax方法(或者其他的ajax方法)从服务器load数据，在数据load完成时我们才开始创建UL列表。
我这里使用的是WCF Servece作为ajax请求的数据源。
为了增加用户友好型，在从服务器取数据时，我们让iDiv显示为一个load的图片。。。。。。。。。。。。
代码下载：http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar
二.使用jQuery的append功能来无刷新切换播放的视频文件(flash或Silverlight播放器)。
之前有个minisite需要用到这个东西。我就试着研究了下，还真行的通。
http://haokan.lafaso.com/pretty.html 大家可以看一下。我这个不算做广告吧，大家基本都是男的基本上不会看这个的。呵呵。只是这个方法我觉得你说不定以后可以用到的。
由于这些播放器都是一个embed控件，所以我们可以通过替换embed的src属性来播放不同的视频。例如：
使用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", http://player.ku6.com/refer/DMFZdNYzKDEosiPG/v.swf&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。
$("#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
代码下载：http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar
相关推荐
-
jQuery下的几个你可能没用过的功能
一.创建一个自己的dropdownlist 说到dropdown list,在html中你会想到 复制代码 代码如下: <select> <option>hello 1</option> </select> 但是它的显示会不大好看,我们可以使用div+ul来自己做一个drop down list,而且有很苦的slidedown和slideup功能. 在IE8下的效果对比:首先说说思路,很简单的思路, a. 需要用一个Div来代替drop down list中
-
基于jQuery下拉选择框插件支持单选多选功能代码
由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表 具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu
-
jQuery下的Ajax调试步骤
下面通过图文并茂的方式给大家介绍jQuery下的Ajax调试步骤 在Ajax的使用过程中,最舒服的是一步成功,最头痛的是不成功,但是不知道去哪里看错误,然后看到错误之后又是哪里出的问题,所以今天说一下Ajax的使用调试: 先给大家说下项目需求:工具/原料,jQuery.js,编辑器,Chrome浏览器,wamp搭建环境 具体实现方法和步骤请看下文: 第一步:在同一目录下创建ajax.html和ajax.php 第二步:编写ajax.html,注意修改文件编码为utf-8,代码如下: <!DOCT
-
关于锚点跳转及jQuery下相关操作与插件
一.锚点跳转简介 锚点嘛,业余点的解释就是可以让页面定位到某个位置的点.在高度较高的页面中经常见到,例如,百度百科页面,<火影忍者>这个词条,结果就会看到如下的锚点列表: 点击其中一个链接,就会跳转到页面的相应位置.这就是锚点的作用之一.锚点还可以用在跳转到其他页面的相应位置,例如我的博客,点击博客首页文章下面的评论链接,则会跳转到文章的评论处. 起关键作用的就是链接地址后面跟着的#comments,见下图标示: 我知道的实现锚点跳转有两种方式,一种是a标签+name属性,还有一种就是使用标签
-
jQuery下拉友情链接美化效果代码分享
本文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQuery实现的下拉美化特效,分享给大家供大家参考.具体如下: 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery下拉友情链接美化效果代码如下 <head> <meta
-
jQuery下拉菜单的实现代码
jQuery是一款流行已久的Javascript框架,确实很好用.今天我给大家介绍jquery下拉菜单的实现代码,具体代码如下所述: <!DOCTYPE html> <head lang="en"> <meta charset="UTF-8"> * { padding: 0; margin: 0; ul { list-style: none; .wrap { width: 730px; height: 50px; margin:
-
jquery下div 的resize事件示例代码
这是某位大神写的jquery下div 的resize事件. 复制代码 代码如下: //resize of div (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize", d = j + "-special-event", b = "delay", f = "
-
jQuery下拉美化搜索表单效果代码分享
本文实例讲述了jQuery下拉美化搜索表单效果.分享给大家供大家参考.具体如下: JQuery下拉美化搜索表单样式代码是一款美化下拉框的表单,样式已写好,需要的朋友改一下就可以用了. 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery下拉美化搜索表单效果代码如下 <head> <meta http-equiv="Content-Type"
-
精心挑选的15个jQuery下拉菜单制作教程
今天本文就为大家挑选了25个非常好的 jQuery 下拉菜单制作教程和示例. Slide Down Box Menu with jQuery and CSS3 ( 演示 | 下载 ) Fancy Drop Down Menus Using CSS and JQuery. ( 演示 | 下载 ) Sliding Jquery Menu ( 演示 | 下载 ) Create Simple Dropdown Menu Using jQuery ( 演示 | 下载 ) Designing the Dig
-
解决Jquery下拉框数据动态获取的问题
废话不多说,直接上源码: select.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+&q