分类目录归档：Javascript

jQuery EasyUI 可拖放(Draggable)用法

发表于 由
回复

[ad#content]jQuery EasyUI可以方便实现很多功能，这里将会介绍一下可拖动（Draggable）的具体用法，jQuery EasyUI不仅可以轻松实现DOM元素的拖动，而且可以使用一些参数让它的使用更加灵活，我们来通过一个小例子来学习一下这些参数：（查看演示）

HTML代码如下：

  1. <div id="dd" style="width:100px;height:100px;border:1px solid #ccc;">
  2.     <div id="title" style="background:#ccc;">title</div>
  3. </div>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里添加一行代码即可： 继续阅读 →

jQuery EasyUI框架使用文档

发表于 由
8

[ad#content]jQuery EasyUI是一个基于jQuery实现的Web UI框架，用法非常简单，但是功能非常强大，使用它你可以使用很少的Javascript代码来制作适合自己的网页。

jQuery EasyUI示意图
主页:http://jquery-easyui.wikidot.com
下载:http://jquery-easyui.wikidot.com/download

这里介绍一下快速使用这个框架的方法：首先在你使用的HTML页面的头部需要包含一些CSS文件和JS文件：

  1. <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
  2. <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
  3. <script type="text/javascript" src="../jquery.easyui.min.js"></script></link>

继续阅读 →

JS获取浏览器和屏幕的宽度和高度

发表于 由
回复

[ad#content]在JS操作DOM的时候，会经常用到浏览器的高度和宽度来调节DOM的位置，这里特别记录一下。

  1. <script language="javascript">
  2. function getDocumentSize(){
  3. var str = '';
  4. str+=document.body.clientWidth+"\r\n";//网页可见区域宽
  5. str+=document.body.clientHeight+"\r\n";//网页可见区域高
  6. str+=document.body.offsetWidth+"\r\n";//网页可见区域高(包括边线的宽)
  7. str+=document.body.offsetHeight+"\r\n";//网页可见区域高(包括边线的宽)
  8. str+=document.body.scrollWidth+"\r\n";//网页正文全文宽
  9. str+=document.body.scrollHeight+"\r\n";//网页正文全文高
  10. str+=document.body.scrollTop+"\r\n";//网页被卷去的高
  11. str+=document.body.scrollLeft+"\r\n";//网页被卷去的左
  12. str+=window.screenTop+"\r\n";//网页正文部分上
  13. str+=window.screenLeft+"\r\n";//网页正文部分左
  14. str+=window.screen.height+"\r\n";//屏幕分辨率的高
  15. str+=window.screen.width+"\r\n";//屏幕分辨率的宽
  16. str+=window.screen.availHeight+"\r\n";//屏幕可用工作区高度
  17. str+=window.screen.availWidth+"\r\n";//屏幕可用工作区宽度
  18. alert(str);
  19. }
  20. </script>

这里特别提示两点：
继续阅读 →

JS的灯箱插件Shadowbox的高级用法

发表于 由
5

[ad#content]这篇文章继续介绍关于Shadowbox的使用方法。如果大家是第一次了解Shadowbox的话，可以参见我的上一篇《JS的灯箱插件Shadowbox,支持图片、视频、网页、flash、FLV等媒体轮播》来进行了解。这篇文章主要讲Shadowbox的可选参数。

在上一篇文章中已经介绍了如果在HTML标签里添加属性来使用shadowbox，当然，如果你不愿意在你的HTML标签里添加属性的话，你可以只 要Javascript来操作和控制，虽然这个使用方法稍微有一点复杂，但是它可是让你的HTML代码非常清洁干净，而且你可以很轻松的把一段 shadowbox的代码嵌入到一个已经存在的项目中。

如果你注意观察HTML标签的话，你会发现shadowbox对象有一些常用的属性，我们把它列在下表：
继续阅读 →

JS的灯箱插件Shadowbox,支持图片、视频、网页、flash、FLV等媒体轮播

发表于 由
4

[ad#content]是一个基于网络浏览器的应用程序，支持网络上最流行的媒体格式。使用Shadowbox访问各式各样的媒体时，用户可以直接在所有主流的浏览器中浏览，而且不用去打开一个新的媒体页。
这里说媒体主要包括：图片，SWF，QuickTime，Video和一些网络Video等等。

Shadowbox使用Javascript和CSS编写，可以定制当前非常流行的各种JS库，比如说：
* jQuery
* Prototype
* MooTools (requires 1.2 Core)
* Dojo Toolkit
* Yahoo! User Interface Library (requires yahoo-dom-event.js)
* Ext (requires ext-core.js)
所以大家还是非常值得一试的，下面是它的官方网站和下载地址，下载的时候可以选择你所使用JS库文件和你所希望播放的媒体： 继续阅读 →

jQuery的选择器(四) 表单选择器

发表于 由
1

如果看了前面关于jQuery选择器的文章后，相信你对选择器的语法已经非常熟悉了，现在介绍一下jQuery的最后一类选择器：表单选择器。

为了使用户能够更加灵活的操作表单，jQuery中专门加入了表单选择器。利用这个选择器，能及其方便的获取到表单的某个或某类型的元素

选择器 描述 返回
:input 选取所有的<input>、<textarea>、<select>、<button>元素 集合元素
:text 选取所有的单行文本框 集合元素
:password 选取所有的密码框 集合元素
:radio 选取所有的单选框 集合元素
:checkbox 选取所有的多选框 集合元素
:submit 选取所有的提交按钮 集合元素
:image 选取所有的图像按钮 集合元素
:reset 选取所有的重置按钮 集合元素
:button 选取所有的按钮 集合元素
:file 选取所有的上传域 集合元素
:hidden 选取所有的不可见元素 集合元素

继续阅读 →

jQuery的选择器(三) 过滤选择器

发表于 由
回复

jQuery的过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为：基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤。

1. 基本过滤选择器

选择器 描述 返回
:first 选取第1个元素 单个元素
:last 选取最后一个元素 单个元素
:not(selector) 去除所有与给定选择器匹配的元素 集合元素
:even 选取索引是偶数的所有元素，索引从0开始 集合元素
:o dd 选取索引是奇数的所有元素，索引从0开始 集合元素
:eq(index) 选取索引等于index的元素（index从0开始） 单个元素
:gt(index) 选取索引大于index的元素（index从0开始） 集合元素
:lt(index) 选取索引小于index的元素（index从1开始） 集合元素
:header 选取所有的标题元素，例如h1,h2,h3等等 集合元素
:animated 选取当前正在执行动画的所有元素 集合元素

继续阅读 →

jQuery的选择器(二) 层次选择器

发表于 由
回复

这里首先介绍一下jQuery的另一类选择器：层次选择器。

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和兄弟元素等，那么都可以用到层次选择器，先大体介绍一下层次选择器的格式。

选择器 描述 返回
$（”ancestor descendant”） 选取ancestor元素里的所有descendant（后代）元素 集合元素
$(“parent > child”) 选取parent元素下的child(子)元素，与$（”ancestor descendant”）有区别，$（”ancestor descendant”）选择的是后代元素 集合元素
$(‘prev + next’) 选取紧接在prev元素后的next元素 集合元素
$(‘prev ~ siblings’) 选取prev元素之后的氖siblings元素 集合元素

继续阅读 →

jQuery的选择器(一) 基本选择器

发表于 由
回复

选择器是jQuery的根基，包括四个大类：基本选择器，层次选择器，过滤选择器和表单选择器。这里首先介绍一类最常用的选择器：基本选择器。其他的选择器在稍后的文章中将会陆续发布。

基本选择器是jQuery中最常用的选择器，也是比较简单的选择员，它通过元素的id，class和标签名等来查找DOM元素，在网页中每个id名称只能使用一次，class允许重复使用。可以试用这些基本选择器来完成绝大多数的工作。

选择器 描述 返回
#id 根据给定的id匹配一个元素 单个元素
.class 根据给定的类名匹配元素 集合元素
element 根据给定的元素名匹配元素 集合元素
* 匹配所有元素 集合元素
selector1, selector2，……, selectorN 将每一个选择器匹配到的元素合并后一起反回 集合元素

继续阅读 →

jQuery的图像插件imgZoom

发表于 由
回复

imgZoom是一个jQuery的插件，实现了平滑变焦的图像效果。它使用矢量图形（SVG的或的VML）创建缩略图之间和全尺寸图像优美的过渡。

插件功能：图像可以放大或者缩小，在放大或缩小的时候可以有一个淡出的效果或旋转的效果，而且插件提供的API函数来控制图像的放大或缩小。

此款插件非常小巧，最小版还不到5KB，还兼容现有的主流浏览器（Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.），值得给大家推荐一下。

官方网站：http://odyniec.net/projects/imgzoom/

这里介绍一下快速使用这个插件的方法：

首先在官方网站下载这个插件（http://odyniec.net/projects/imgzoom/jquery.imgzoom-0.1.1.zip），目前版本是0.1.1，在下载的插件中会有scripts 和CSS文件夹，scripts文件夹会包含jQuery文件和imgZoom的js文件，CSS文件夹是一个加载时的小图片，这个小图片在参数中也是可以设置的。

继续阅读 →