文章分类 - JavaScript
摘要：想拖动页面上的层，完全可以用jQuery ui的Draggable方法来实现，那如何将拖动后层的位置保存下来呢？本文将给出答案。本文讲解了如何采用PHP+MySQL+jQuery，实现随意拖动层并即时保存拖动位置。 之前我有文章：jQuery实现拖动布局并将排序结果保存到数据库，文中以项目为示例，讲解了实现拖动布局的方法。本文与之不同之处在于可以任意拖动页面位置，原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录，页面通过CSS解析每个层不同的位置。请看具体实现步骤。准备MySQL数据表首先需要准备一张表notes，用来记录层的内容，背景色和坐
阅读全文
摘要：Nivoslider是一款基于jQuery的，能实现多种切换效果的图片切换插件。Nivoslider提供了11种切换效果，支持多种参数配置和方法函数调用，使用简单，是一款非常理想的图片切换插件。 XHTML<divid="slider"class="nivoSlider"><imgsrc="images/s1.jpg"alt=""title="好漂亮的狗狗..."/><ahref="http://www.helloweba.com"><
阅读全文
摘要：ScrollTo是一款基于jQuery的滚动插件，当点击页面的链接时，可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多，页面长度有好几屏的场合，本文以DEMO为示例讲解该插件的应用。使用方法1、准备jQuery库和scrollTo.js插件。<scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/jquery.scrollTo.js"><
阅读全文
摘要：Mapkey是一款基于jQuery的能响应键盘所有按键操作插件，使用起来非常简单，而且可以支持触发按键对应的自定义函数。使用方法：$("a#left").mapKey("left");按住方向键←即相当于鼠标点击一个ID为left的a标签链接。$("a#left").mapKey("a");按住键盘的a键，即相当于鼠标点击一个ID为left的a标签链接。$.mapKey("left",function(){alert("你按了左方向键!");});按住方向键，响应自定义函数。
阅读全文
摘要：有时我们需要打印页面中的某一区域的内容，比如只打印页面中的表格部分，其他如页头和页脚都不需要打印。解决办法有多种，本文只探讨使用CSS和jQuery实现的方法。使用方法介绍：CSS控制页面打印区域使用CSS控制打印样式，需要设置样式media="print"，并且将页面中不需要打印的元素的样式display属性设置为none。如DEMO中，我将页头页脚及其他不需要打印的元素的样式设置如下：<styletype="text/css"media="print">#header,.top_title,#jqprint,#foot
阅读全文
摘要：有时我们需要在客户端处理页面地址传递的参数，jqURL插件可以实现获取页面参数及参数值，获取页面URL地址，新开一个指定大小的窗口。 使用方法介绍：假设当前url地址为："http://www.helloweba.com?a=1&b=2&c=3"方法1：新开一个页面窗口$.jqURL.loc("http://www.google.com",{w:200,h:200,wintype:"_blank"});将会新开一个200x200的google.com窗口。方法2：获取当前页面URL地址$.jqURL.url();返回结
阅读全文
摘要：Livequery是一款基于jQuery的插件，主要作用是对动态创建的DOM元素进行事件绑定。比如我在页面中动态创建了一个新的按钮，需要通过单击新的按钮来完成某些操作，这个时候就可以用到livequery。 先来看以个不适用livequery的例子。<inputtype="button"id="create"value="点击这里"/><scripttype="text/javascript">$(function(){$("#create").click(functio
阅读全文
摘要：在本文中我将为您介绍如何侦听用户键盘按键事件，通过使用键盘来切换导航菜单，也为用户提供了方便，从而使导航功能更加实用。 XHTML<divid="nav"><ul><li><ahref="#home">首页[A]</a></li><li><ahref="#about">关于[S]</a></li><li><ahref="#product">产品[D]</a>&l
阅读全文
摘要：当要在一个有限的导航菜单空间放一个大的子菜单时，我们一般采用下拉菜单的形式来弥补空间的不足。本文将带大家用最少的时间，使用jQuery和CSS结合制作一个动态的下拉菜单。 XHTML首先是要在页面的head部分引入jquery库，这是必须的。<scripttype="text/javascript"src="js/jquery.js"></script>接着我使用一个无序列表来构建菜单。<ulclass="menu"><li><ahref="#">首页&l
阅读全文
摘要：我曾写了一篇关于发表类似微博程序的文章：PHP+Mysql+jQuery实现发布微博程序--jQuery篇，而本文不同之处在于使用JSON读取评论列表，请看我一一讲述。 XHTML<divid="comments"><h3>读取评论</h3></div><divid="post"><h3>发表评论</h3><p>昵称：</p><p><inputtype="text"class="input"
阅读全文
摘要：在很多网站尤其在一些购物网站上，展示商品的列表页提供了许多商品，用户可以选择商品的展示方式如列表方式展示和橱窗方式展示等。在本例中，将给您讲述如何实现这种效果。XHTML<ahref="#"id="switch">切换布局</a><divid="demo"class="showlist"><divclass="list"><h3><ahref="#">文章标题</a></h3>&l
阅读全文
摘要：jQuery可以实现简单的动画效果，在本文中，当您用鼠标滑向图片时，图片开始滑动，并切换成图片的文本信息，当鼠标离开时，图片又还原成原样。XHTML<divclass="wrap"><imgsrc="images/s1.jpg"alt="photo"/><h3>图片标题</h3><p>图片说明文字</p><p><ahref="#">查看详情</a></p></div>...我创建了一个
阅读全文
摘要：主题皮肤切换功能在很多网站和系统中应用，用户可以根据此功能设置自己喜欢的主题颜色风格，增强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。实现该功能的原理就是通过点击定义的主题样式，改变页面当前引用的主题CSS文件，并且将当前的主题样式写入cookie中或者写入数据库中，以便下次该用户重新访问页面时，调用的就是上次设置好的主题样式。准备主题皮肤样式首先，我准备了三个样式表CSS文件，分别是三种风格的主题皮肤，将其引入页面，放置在页面的<head>之间。<linktitle="default"rel="stylesheet
阅读全文
摘要：对列表框的操作经常碰到过这样的应用：从左侧的列表框中选中要选的项添加到右侧列表框中，然后提交最终选择的项，对误操作而选中的项还可以执行移除操作。在很多系统中应用比如说求职网站的选择意向工作地区，QQ好友管理添加好友到组。本站在前面有文章介绍了jquery的一个插件multiselect2side的应用Multiselect：操作多选列表框，但是我在实际应用中遇到的问题，该插件就不好使了，比如从外部实时加载查询的数据，重复添加问题，以及验证最终是否选中项。 本文将用实例来讲解使用jQuery实现左右列表框的操作，主要有以下效果：通过左右按钮向右侧列表框添加项或移除项操作。通过双击两边列表框里的项
阅读全文
摘要：Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术。当你浏览某网站时，你硬盘上会生产一个非常小的文本文件，它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时，网站通过读取Cookies，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。从本质上讲，它可以看作是你的身份证。使用传统的Javascript来设置和获取Cookies信息很麻烦，要写上几个函数来处理，幸运的是jQuery帮我们做了很多事，借助jQuery插件，我们可以轻松的创建、获取和删除
阅读全文
摘要：二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。先看下效果大类： 小类：实现的效果就是当选择大类时，小类下拉框里的选项内容也随着改变。实现原理：根据大类的值，通过jQuery把值传给后台PHP处理，PHP通过查询MySQl数据库，得到相应的小类，并返回JSON数据给前端处理。XHTML首先我们要建立两个下拉选择框，第一个是大类，第二个是小类。大类的值可以是预先写好，也可以是从数据库读取。<label>大类：</label><selectname=
阅读全文
摘要：在本文中，我将介绍一个可以跟随页面滚动的层效果，当用户滚动鼠标滚轮或者拖动浏览器滚动条时，浮动层将跟随滚动。我通过实例讲解相关插件的应用以及使用时注意事项。该效果大多应用在企业网站的在线客服服务、电子商务网站的购物车以及商业网站的广告条展示等场合。在本例中，我用到了一个重要的插件：scroll-follow，该插件在当前主流浏览器IE6+， FF2+， Safari 3，and Opera 9均测试通过，具有可配置参数，使用简单的特点。 XHTML<divid="scroll"class="demo">...任意你想展示的内容</div
阅读全文
摘要：今天在工作中遇到这样一个问题：使用jquery ui的datepicker日历控件，获取选中的日期，并且要将日期转换成日期对象格式,如：Tue Nov 30 00:00:00 UTC+0800 2010，以便与其他代码对接。我的代码如下：$("#mydate").datepicker({showOn:"button",buttonImage:"images/calendar.gif",buttonImageOnly:true,buttonText:"日历",onSelect:function(dateText,in
阅读全文
摘要：jQuery可以制作出与Flash媲美的动画效果，这点绝对毋庸置疑，本文将通过实例演示一个基于鼠标滚轮驱动的图片切换效果。其中JS源码来自网络，我只做了略微的改动，现将实例与大家分享。 本例实现的效果：鼠标滚轮滚动时图片进行切换。支持键盘方向键实现图片切换效果。支持点击图片切换，支持点击当前图片链接。进度条滑块展示图片图片数量进度。XHTML<divclass="demo"><divid="imageflow"><divid="loading"><imgsrc="images/loa
阅读全文
摘要：现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:总是从ID选择器开始继承在class前使用tag将jquery对象缓存起来掌握强大的链式操作使用子查询对直接的DOM操作进行限制冒泡消除无效查询推迟到 $(window).load压缩js全面掌握jquery库1. 总是从ID选择器开始继承在jque
阅读全文
浙公网安备 33010602011771号