什么是 jQuery Mobile？

jQuery Mobile 是一个基于 jQuery 的面向移动设备的网页前端用户界面框架，旨在简化移动设备的应用程序的过程，它几乎支持所有的移动浏览器的。

jQuery Mobile 功能特性

跨平台跨设备

jQuery Mobile 框架兼容主流的设备，如 iOS（包括 iPhone，iPad），Andorid，黑莓，塞班，Windows Phone 等，它让你非常容易就可以设计一个运行在所有的智能手机和平板设备上的 Web 程序。

触摸屏优化的布局和 UI WIDGETS

jQuery Mobile 是触摸屏优化的，并且提供一个适应不同的智能设备的动态触摸用户界面，这套系统包含基本的布局控件（如列表，面板等），并且还有一套额外的表单控件和 UI widgets (toggles, sliders, tabs)。

更大，更好的主题化的外观设计

jQuery Mobile 还提供扩展了 CSS 框架，让用户更方便去设计 Web 程序的界面，并且还支持如 text-shadow, box-shadow, and gradients 等这类的 CSS 3 特性。

下载：jQuery Mobile。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 3条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider
• Pluralink：一个链接多个选择

function setCookie(name,value){
    var exp  = new Date();
    exp.setTime(exp.getTime() + 30*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;
}
function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 5条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 给 Javascript 加上面向对象的属性：Class.js
• 快速复制常用 JavaScript 库：ScriptSrc.net
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具

创建一个类

One = {
	message:'',
	set:function(val){
		this.message = val;
	},
	get:function(){
		alert(this.message);
	}
};

使用创建的类

var e = new Class(One);
e.set('Hello, World!');
e.get();

构建函数

如果构建函数 construct() 存在，在实例化类的时候，就会被调用，构建函数也可以有参数。

One = {
	message:'',
	construct:function(val){
		this.set(val);
	},
	set:function(val){
		this.message = val;
	},
	get:function(){
		alert(this.message);
	}
};

用法：

var e = new Class(One,['Awesome!']);
e.get();

扩展类

通过 Extend() 函数可以扩展现有的类：

Two = Extend(One,{
	construct:function(val){
		this.set(val);
	}
});

用法：

var e = new Class(Two,['Quixotic!']);
e.get();

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 1条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• Javascript 中如何存储，获取和删除 Cookies
• 快速复制常用 JavaScript 库：ScriptSrc.net
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具

网址：http://scriptsrc.net/

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 4条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• Javascript 中如何存储，获取和删除 Cookies
• 给 Javascript 加上面向对象的属性：Class.js
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具

jQZoom 就是这样的一个 jQuery 插件，它能够让你网站的图片实现放大镜效果，把鼠标移到小图上，旁边出现大图的局部放大的部分，如下演示：

jQZoom 演示

RSS 用户需要返回页面才能看到效果。

jQZoom 使用说明

下面介绍下简单使用：

1. 在你的页面中包含 jqzoom.css

<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2. 包含 jQzoom 和 jQuery JS 代码：

<script type="text/javascript" src="your_path/jquery.js"></script>
<script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3. 现在创建一个放图片的容器（最好是 DIV），并给 class 赋值为 jqzoom，然后给每张图片设置一个 jqimg 属性，它的值为大图的地址。

<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>

4. 当页面导入的时候，载入 jQZoom 插件。

$(document).ready(function(){ $(".jqzoom").jqueryzoom(); });

好了基本设置好了，当然你也可以自己做些简单的设置：

$(document).ready(function(){
    $(".jqzoom").jqueryzoom({
        xzoom: 300, //设置放大 DIV 长度（默认为 200）
        yzoom: 300, //设置放大 DIV 高度（默认为 200）
        offset: 10, //设置放大 DIV 偏移（默认为 10）
        position: "right", //设置放大 DIV 的位置（默认为右边）
         preload:1,
        lens:1
    });
});

下载：jQZoom。
演示：jQuery 图片放大镜效果插件：jQZoom

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 7条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 延迟加载图片的 jQuery 插件：Lazy Load
• jQuery Mobile 1.0 发布
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider

bxSlider 使用

使用 bxSlider 首先要载入 jQuery Javascript 库。然后载入 bxSlider 代码。

下面就是一个简单的 bxSlider 演示效果（RSS 用户需要返回页面才能看到效果）：

• 

  WordPress：企业建站利器
  WordPress 是一款风靡全球的开源 CMS 系统。在过去，它更多的应用于开设个人或多用户博客系统；但现在，它开始越来越多地应用于企业门户网站设计中。作为国内最早使用并对 WordPress 进行二次开发的爱好者之一，自从2006年初次接触 WordPress 系统开始，我就为其强大的功能，灵活的可扩展性，以及方便的可定制性所深深吸引。

• 

  美国虚拟主机推荐：Bluehost
  Bluehost 建立于 1996 年，已经具有了十几年的虚拟主机服务经验，现已突破 100 万的网站托管数量，并且还以稳定速度向前发展。Bluehost 以其高质量的主机和口碑，在美国是深受好评的虚拟主机，在美国主机界也是屡获大奖。

• 

  bbPress 介绍，安装和中文包
  bbPress 是一款开源论坛程序，它是一个非常容易使用的轻量级论坛程序，由于 bbPress 保持了体积小，重量轻，没有提供过多复杂的功能，所以速度非常快。对于有更多需求的用户来说，bbPress 也和 WordPress 一样提供了一个非常强大插件系统，让你添加各种功能扩充论坛。

• 

  主机推荐：(mt) Media Temple
  Media Temple 简称 (mt) ，是一家比较独特的美国主机商，和其他美国商一样大肆的做广告不一样，(mt) 更关注社区，它的营销计划可以简单归纳为：Host Great Sites，所以选择了 (mt)，就选择和许多伟大的站点做邻居。我爱水煮鱼目前正在使用 Media Temple 主机。

• 

  WordPress 相关日志插件：WordPress Related Posts
  产生相关日志最好的方法就是通过 Tag，根据日志含有相同的 Tag 数越多，就认为日志相关性越强，所以我根据这一原理开发了 WordPress Related Posts 这个 WordPress 插件，它会根据日志的 tag 的相关性产生一个相关日志列表。

• 

  WordPress 主题教程：从零开始制作 WordPress 主题
  创建 WordPress 主题其实不难，只要你从现在开始认真学习这个教程，从零一步一步开始，你就会成为一个 WordPress 主题制作高手，至少你会修改现有主题。本文是一个从零开始制作 WordPress 主题的教程，它会一步一步教你如何制作 WordPress 主题。

要实现上面的效果，我么加载 jQuery 和 bxSilder 的代码之后，还需要在页面的 head 中添加如下的 jQuery 代码：

$(function(){
	$('#slides1').bxSlider({
		prev_image: 'http://bxslider.com/images/btn_arrow_left.jpg',
		next_image: 'http://bxslider.com/images/btn_arrow_right.jpg',
		wrapper_class: 'slides1_wrap',
		margin: 70,
		auto: true,
		auto_controls: true
	});
});

bxSlider 详细配置参数

bxSlider 有以下参数可以进行配置：

$(document).ready(function(){
	$('ul').bxSlider({
		alignment: 'horizontal',        // 'horizontal', 'vertical' - 幻灯片方向
		controls: true,                 // 设置是否上一个/下一个按钮是否显示
		speed: 500,                     // 速度，单位为毫秒
		pager: true,                    // 是否显示页码
		pager_short: false,             // 是否显示短页码 (1/4)
		pager_short_separator: ' / ',   // 用于区分短页码的文本
		margin: 0,                      // 间隔
		next_text: 'next',              // 下一个文本
		next_image: '',                 // 下一个图片
		prev_text: 'prev',              // 上一个文本
		prev_image: '',                 // 上一个图片
		auto: false,                    // 是否自动切换
		pause: 3500,                    // 停留时间 (auto mode only)
		auto_direction: 'next',         // 向那个方向移动 (auto mode only)
		auto_hover: true,               // 设置鼠标悬停的时候是否暂停
		auto_controls: false,           // 设置是否显示 'start'/'stop' 按钮 (auto mode only)
		ticker: false,                  // determines if slideshow will behave as a constant ticker
		ticker_controls: false,         // determines if 'start'/'stop' ticker controls are displayed (ticker mode only)
		ticker_direction: 'next',       // order in which slides will transition (ticker mode only)
		ticker_hover: true,             // determines if slideshow will pause while mouse is hovering over slideshow
		stop_text: 'stop',              // 'stop' 按钮文本
		start_text: 'start',            // 'start' 按钮文本
		wrapper_class: 'bxslider_wrap'  // 外面 wapper 的 DIV 的 class 名字
	});
});

下载：bxSlider。
演示：jQuery slider 插件: bxSlider

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 13条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• Pluralink：一个链接多个选择

#grid 适应所有宽度的页面，可以调整任意的高度布局（默认为 20px），可以实时隐藏和打开网格线，#grid 使用非常简单，一个 Javascript 文件，简单的几行 CSS 代码，和一个用于垂直网格的图片。

#grid 使用

#grid 使用非常简单，在你的页面上插入所需的 Javascript 和 CSS代码之后，只需按下 G 就会显示网格线，松开网格线消失，G + H 就会一直显示网格线，松开也不会消失，如果没有显示网格线，可以按下 G+F 把网格线调到前面。#grid：网页网格布局工具这篇日志已经启用了，你可以按下这些快捷键来测试下效果。

安装 #grid

1. 下载 hashgrid.js 脚本，并且上传到服务器中。

2. 然后在网页中添加如下 JavaScript 代码：

   <!-- Grab latest version of jQuery -->
   <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
   </script>
   
   <!-- Include the hashgrid script -->
   <script type="text/javascript" src="hashgrid.js"></script>
   

3. 然后在网页中添加如下 CSS 代码：

   /**
    * Grid
    */
   #grid{
   
       /* Vertical grid lines */
       background: url(bg-grid-980.gif) repeat-y 0 0;
   
       /* Dimensions - same width as your grid with gutters */
       width: 980px;
   
       /* Grid (left-aligned)
       position: absolute;
       top: 0;
       left: 0;
       */
   
       /* Grid (centered) */
       position: absolute;
       top: 0;
       left: 50%;
       margin-left: -490px;
   
   }
   
   /**
    * Horizontal grid lines, defined by your base line height
    *
    * Remember, the CSS properties that define the box model:
    * visible height = height + borders + margins + padding
    */
   #grid .horiz{
   
       /* 20px line height */
       height: 19px;
       border-bottom: 1px dotted #aaa;
       margin: 0;
       padding: 0;
   
   }
   

#grid 可以支持各种网格系统的，目前默认提供 980 宽的布局（940 内容区，两边 20 边界），如果使用别的网格模式，需要调整下CSS 和制作一张新的用于垂直网格布局的图片。

下载：#grid
演示：#grid：网页网格布局工具

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 9条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider
• Pluralink：一个链接多个选择

还有有了 jQuery，使用 jQuery，我们只需要几行代码就能在新窗口中打开外部链接。

首先我们需要找到所有的外部链接，在 $(document).ready() 函数添加如下代码：

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])");

上面这段代码查找 href 属性是以 http:// 或者 https:// 开始的，并且不包含当前域名（location.hostname）的链接（a）标签。这样我们就不会获取任何相对路径或者绝对连接中含有当前域名的内部连接。

如果我们想给外部链接加上 “external” class，添加如下的代码：

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external");

上面的代码给外部链接加上一个 CSS Class ，这样就可以使用 CSS 来样式化外部链接了。

如果你想外部链接在新窗口打开，继续增加如下一行代码：

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external")
.attr("target","_blank");

上面的代码给链接标签增加一个 target 属性，并且给他赋值为 _blank，这样代码是标准的，并且外部链接在新窗口打开。上面就是使用 jQuery 在新窗口打开外部链接的所有代码。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 20条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider
• Pluralink：一个链接多个选择

如把鼠标移到下面“我的网站”这个链接，就可以显示 “我爱水煮鱼”，“WordPress Jam”，“Honey Piggy” 这三个链接。

我的网站

“我的网站”右上角的[3]则表明这个链接包含三个链接，目前不支持 RSS，你需要返回页面上查看。

Pluralink 使用非常简单，首先你需要在页面中加载 jQuery 库，如果你的 WordPress 已经启用了，则可以放弃这一步，如果没有，我们可以通过 Google AJAX Libraries 加载 jQuery。

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1");

</script>

然后加载 Pluralink 的 Javascript 代码和样式表。

<script type="text/javascript" src="http://pluralink.com/files/pluralink.js"></script>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink_ie.css" type="text/css" />
<![endif]-->
 
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink_ie6.css" type="text/css" />
<![endif]-->

最后使用以下格式插入多个链接：

<a href="http://fairyfish.net/||http://wpjam.com/||http://honeypiggy.com" title="我爱水煮鱼||WordPress Jam||Honey Piggy">我的网站</a>

如果你的页面上使用 AJAX，你可以使用函数pluralink.reinit();重新激活该插件。

另外 Pluralink 还提供 WordPress 插件，如果你对以上步骤觉得繁琐的，可以直接下载 Pluralink 的 WordPress 插件，直接上传激活即可。

目前 Pluralink 还有一些局限性，如不能在 RSS 中显示（Pluralink 开发者说正在开发），并且没有兼容性，如果 Javascript 代码取消的话，这就是一个废的链接，并且 SEO 方面也不是很友善，不过总体来说这是一个非常不错的 jQuery 插件，并且文件很小。

下载：Pluralink。
演示：Pluralink：一个链接多个选择

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 19条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider

Feature List 的使用方法

使用 Feature List 需要调用一些简单的函数：

$.featureList(
	$("#tabs li a"),
	$("#output li"), {
		start_item : 1
	}
);
 
// Alternative
 
$('#tabs li a').featureList({
	output		: '#output li',
	start_item	: 1
});

Feature List 需要两组数组，一个是 tab，一个是 output，当用户点击 tab，脚本就会去找预期对应的 output。当前的 Tab 会加上 current CSS。

其中下面是一些可以进行配置的选项：

• start_item — 点击最开始的 tab，默认是 0。
• pause_on_hover — 如果是 true，则鼠标移到到 Tab 上幻灯片切换会停止，默认是 true。
• transition_interval — 定义两次切换之间的时间间隔，0 为不自动切换，默认是 5000 毫秒。

演示（RSS 阅读器用户需要返回页面才能看到效果）：

下载：Featured List。
演示：Feature List：制作推荐列表的 jQuery 插件

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 11条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• jQuery slider 插件: bxSlider
• Pluralink：一个链接多个选择

Lazy loader 是一个延迟加载图片的 jQuery 插件，在一些图片非常多的网站中非常有用，在在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有很多图片的比较长的网页来说，可以加载的更快，并且还能节省服务器带宽。

Lazy Loader 使用也非常简单，首先确保你的页面已经加载 jQuery Javascript 库，然后在加载 Lazy Load 的 Javascript 文件：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

然后在页面的 header 添加如下代码即可：

<script type="text/javascript"></script>
$(document).ready(function(){
    $("img").lazyload({
        placeholder : "/images/grey.gif",
        effect : "fadeIn"
    });
}
</script>

当然 Lazy Load 也有更多复杂的设置，你可以参考 Lazy Load 原文介绍或者 mg12 的翻译。

我爱水煮鱼已经增加了这个功能，你可以在一些图片较多的日志页面预览下。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 23条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery 图片放大镜效果插件：jQZoom
• jQuery Mobile 1.0 发布
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider

在卓越价购买 | 在当当购买

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 14条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

TinySlider 可以很容易通过 CSS 定义就集成到任何网站中，并且它不仅仅支持图片，而且支持任何内容，该脚本支持自动轮换，自动恢复到最初界面，支持导航栏，并且支持横向或者纵向轮换等等，功能非常强大。

TinySlider 基本使用语法如下：

var slideshow=new TINY.slider.slide('slideshow',{
	id:'slider', //  slideshow 父级 div 的 ID
	auto:3, // 自动轮换的时间间隔，默认这个功能是禁止的
	resume:true, // 中断后自动恢复，默认为false。Resume auto after interrupted, defaults to false
	vertical:false, // 定义是否使用垂直方向，默认为 false
	navid:'pagination', // 定义可选的 导航条的 UL 的 ID
	activeclass:'current', // 定义但前 Slide LI 的 class
	position:0 // 定义最初的slide，默认为 0
});

下面是一个简单的演示：

• TinySlider – Simple JavaScript Slideshow

  TinySlider 是一个非常轻量级的原生 Slideshow Javascript 库，它只有 1.5KB 大小，并且是原生的，所以你使用它之前无需引入 jQuery 这些库，所以速度上也更加快。

  TinySlider 可以很容易通过 CSS 定义就集成到任何网站中，并且他不仅仅支持图片，而且支持任何内容，该脚本支持自动轮换，自动恢复到最初界面，并且支持横向或者纵向轮换。TinySlider 基本使用如下：

• 
• 
• 

• 1
• 2
• 3
• 4

下载：TinySlider

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 17条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• Javascript 中如何存储，获取和删除 Cookies
• 给 Javascript 加上面向对象的属性：Class.js
• 快速复制常用 JavaScript 库：ScriptSrc.net
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接

来自淘宝的开源编辑器：KISSY Editor

KISSY Editor 的基本功能有：

1. 含有编辑器的基本功能，如：字体，颜色，大小，粗细，下划线，插入图片，链接等
2. 该编辑器的最大特点是小巧精简，仅依赖 yahoo-dom-event，代码 min 后不超过 50k，gzip 压缩后不超过 20k
3. 支持所有 A 级浏览器

KISSY Editor 是基于 MIT 协议发布的开源项目，所以无论是个人开发还是商业应用，都可以免费使用，集成到自己开发的程序中。

KISSY Editor 演示和下载。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 14条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 淘宝 Web 服务器 Tengine 正式开源
• jQuery Mobile 1.0 发布
• Javascript 中如何存储，获取和删除 Cookies
• 给 Javascript 加上面向对象的属性：Class.js
• 快速复制常用 JavaScript 库：ScriptSrc.net
• 延迟加载图片的 jQuery 插件：Lazy Load

今天介绍的 eXtplorer 可以下载下来安装到自己服务的在线文件管理程序，是我见过功能强大的，它是基于 PHP 和 ExtJS Javascript 库创建的。使用 eXtplorer 可以在线浏览文件和文件夹之外，我们甚至可以将 eXtplorer 作为 FTP 客户端去登录 FTP 服务器。

eXtplorer：基于 PHP 和 Javascript 的文件管理程序

eXtplorer 的详细功能

• 可以通过鼠标拖拉复制和移动文件和文件夹
• 动态的目录树，并且能够根据需要显示子目录
• 可以在线修改文件，并且代码高亮显示
• 可以重命名，删除和创建文件和文件夹
• 可以通过 FTP 方式或者直接访问文件
• 并且可以修改文件的权限和属性
• 可以上传和下载文件
• 可以压缩文件，或者解开压缩包，支持 ZIP, Tar, Tar/GZ, Tar/BZ 四种格式
• 可以创建多个用户，并且可以给用户赋予不同的权限，如只能“浏览”，“编辑”，和“管理”
• 现在还可以作为 Joomla! 和 Mambo 这两个 CMS 程序的部件，不过遗憾还没有 WordPress 方面的插件。

安装 eXtplorer

安装 eXtplorer 需要以下几步：

1. 首先你要确保你服务器的 PHP 版本>4.3
2. 解压缩下载下来的压缩包
3. 使用你的 FTP 客户端上传源代码到服务器上的某个目录下 如 /extplorer
4. 设置 extplorer 的目录可写，并且设置 /ftp_tmp 目录的权限为 777
5. 在浏览器访问 http:///extplorer （默认帐号和密码都是 admin），他会弹出一个框让你里修改密码。一定要修改，不然让人获取权限，就可以删除你服务器上所有文件。

如果你不能修改你的 admin 密码，可能是因为你的用户文件不可写，在 FTP 中，把 /config 目录下的 “.htusers.php” 文件设置为可写。

下载：eXtplorer
中文介绍：eXtplorer：基于 PHP 和 Javascript 的文件管理程序

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 8条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 使用 JavaScript 实现 PHP 函数功能：PHP.JS
• jQuery Mobile 1.0 发布
• Javascript 中如何存储，获取和删除 Cookies
• 给 Javascript 加上面向对象的属性：Class.js
• 快速复制常用 JavaScript 库：ScriptSrc.net
• 延迟加载图片的 jQuery 插件：Lazy Load

JS Beauty：在线 Javascript 美化压缩工具

JS Beauty 是一款在线 Javascript 美化工具，它具有美化，净化，压缩和解压缩 Javascript 代码等功能：

1. 美化：将混乱的 Javascript 代码格式化为优美的带缩进的格式，适合阅读和修改。
2. 净化：去掉 Javascript 代码里面的换行、空格、制表符、注释等对于机器无用代码，这样能够压缩 Javascript 文件的体积，节省服务器的带宽。
3. 压缩：通过一定的算法将 Javascript 代码压缩得更小，能够进一步节省服务器带宽。常用的压缩算法是：Edwards’s Packer，很多 Javascript 框架都用这种方式压缩代码，如 jQuery。
4. 解压：可以认为是压缩的反向操作，将压缩的代码解压出来并美化成人可以阅读的格式。

JS Beauty 网址：http://jsbeauty.iyi.cn/

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 5条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• Javascript 中如何存储，获取和删除 Cookies
• 给 Javascript 加上面向对象的属性：Class.js
• 快速复制常用 JavaScript 库：ScriptSrc.net
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接

• 有多种图标样式可供选择
• 可以自定义日期轴线
• 可设置旋转轴文字
• 自动计算趋势线
• 工具提示和高亮数据点
• 默认最优设置，非常易于使用

jQuery 绘图插件：jqPlot

使用 jqPlot 基本可以控制图表的每一个部分，如网格的背景，字体和大小，等等，并且jqPlot 自己本身也有插件支持系统，所以它可以很容易扩展新的图表类别和选项。

jqPlot 已经有很好的文档，并且还提供了很多很好的例子。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 10条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider

使用 PHP.JS 非常简单，不需要任何服务器支持，现在可以三种方式使用它：

1. 下载默认的 PHP.JS 包。
2. 或者配置 PHP.JS 选择自己需要的函数，然后下载。
3. 甚至直接选择需要的某一函数，直接 Copy 过去使用。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 14条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• eXtplorer：基于 PHP 和 Javascript 的文件管理程序
• jQuery Mobile 1.0 发布
• Javascript 中如何存储，获取和删除 Cookies
• 给 Javascript 加上面向对象的属性：Class.js
• 快速复制常用 JavaScript 库：ScriptSrc.net
• 延迟加载图片的 jQuery 插件：Lazy Load

TINY.box.show('advanced.html',1,300,150,1,3)

它一共有6个参数，第一个是要显示的 AJAX 或 HTML 内容。第二个是设置是否为 AJAX。第三个是宽度，0 为自动。第四个是高度，0 为自动。第五个是是否设置隐藏，第六个则是设置是否自动隐藏的时间。

演示 + 下载

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 18条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• Javascript 中如何存储，获取和删除 Cookies
• 给 Javascript 加上面向对象的属性：Class.js
• 快速复制常用 JavaScript 库：ScriptSrc.net
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接

1. JS 文件：thickbox.js 或者压缩版本 thickbox-compressed.js。
2. CSS 文件：ThickBox.css
3. 最后一个 Loading 图片：loadingAnimation.gif

除了以上三个文件之外，你还需要有 jQuery JavaScript 类库 或者压缩版，甚至可以使用 Google 提供 CDN 加速的版本。

ThickBox 使用也非常见，首先在 HTML 文件的 HEAD 导入 jQuery JS 和 ThickBox JS 文件，并且 jQuery JS 文件必须在前：

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

然后打开 thinkbox.js 文件通过 tb_pathToImage 这个变量来设置 loadingAnimation.gif 文件的路径。

然后在 HEAD 导入 thickbox.css 文件：

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

当然你也可以吧 thickbox.css 里面的内容复制到你现在的 CSS 文件中，最后你只要给 a 元素天添加 class=”thickbox” 属性就可以开始用 thickbox。详细使用可以查看 ThickBox 官方教程。

我在使用中碰到的最大问题是，如果网页上有 Flash 的话，往往 Flash 会把 ThickBox 的弹出框给挡住，这时的解决方法也是非常简单，就是给 Flash 设置透明的参数：wmode=”transparent”。详细就是给 Flash 的 object 标签添加如下参数：<param name="wmode" value="transparent">，并在 embed 标签中设置 wmode=”transparent”，如果使用 AC_FL_RunContent，可以加多一对参数 ‘wmode’,'transparent’ 即可。如果还是有问题，可以尝试给 Flash 外面增加一个 DIV 标签，并给他设置 z-index:0; 的样式。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 7条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery Mobile 1.0 发布
• 延迟加载图片的 jQuery 插件：Lazy Load
• 使用 jQuery 在新窗口打开外部链接
• #grid：网页网格布局工具
• Feature List：制作推荐列表的 jQuery 插件
• jQuery slider 插件: bxSlider