htaccess使用说明

Jan 18, 2008 Author: admin | Filed under: Uncategorized

文件 .htaccess 也叫“分布式配置文件”，主要起到了针对目录改变配置的功能，在文件包含一个或多个指令，以作用于此目录及其所有子目录。作为用户，所能使用的命令受到限制。一般属性为 644 (RW-R–R–)。同时子目录中的指令会覆盖更高级目录或者主服务器配置文件中的指令。

1、错误文档的定位

常用的客户端请求错误返回代码：

401 Authorization Required

403 Forbidden

404 Not Found

405 Method Not Allowed

408 Request Timed Out

411 Content Length Required

412 Precondition Failed

413 Request Entity Too Long

414 Request URI Too Long

415 Unsupported Media Type

常见的服务器错误返回代码：

500 Internal Server Error

用户可以利用.htaccess指定自己事先制作好的错误提醒页面。语法格式为：

1. ErrorDocument code document

ErrorDocument 错误代码文件名.扩展名

一般情况下，可以专门设立一个目录，例如errors放置这些页面。然后再.htaccess中，加入如下的指令：

1. ErrorDocument 400 /errors/badrequest.html

2. ErrorDocument 404 /errors/notfound.html

3. ErrorDocument 500 /errors/internalerror.html

一条指令一行。上述第一条指令的意思是对于404，也就是没有找到所需要的文档的时候得显示页面为/errors目录下的notfound.html页面。

如果所需要提示的信息很少的话，不必专门制作页面，直接在指令中使用HTML好了，例如：

1. ErrorDocument 401 “

Authorization Required

”

2、文档的密码保护

可以利用.htaccess对某个目录下的文档设定访问用户和对应的密码，首先要做的是生成一个密码文件，假设为.htpasswd，例如：

1. zhanggy:y4E7Ep8e7EYV

这里密码经过加密，用户可以自己找些工具将密码加密成.htaccess支持的编码。该文档最好不要放在www目录下，建议放在www根目录文档之外，这样更为安全些。

有了密码文件，可以在.htaccess中加入如下指令了：

AuthUserFile /usr/local/safedir/.htpasswd 这里必须使用全路径名

AuthGroupFile /dev/null 需要授权访问的目录

AuthName EnterPassword

AuthType Basic （授权类型）

require user zhanggy （允许访问的用户，如果希望表中所有合法用户都可登陆，可以使用 require valid-user）

可以使用apache自带使用htpasswd命令生成密码文件：

htpasswd -c .htpasswd user1 第一次生成需要创建密码文件

htpasswd .htpasswd user2 之后增加新用户

3、通过htaccess允许SSI(Server Side Including)功能

AddType text/html .shtml

AddHandler server-parsed .shtml

Options Indexes FollowSymLinks Includes

DirectoryIndex index.shtml index.html

4、拒绝指定IP的访问

如果不希望某个IP访问到我的站点的内容，那可以通过.htaccess中加入该IP而将它们拒绝在外。例如：

order allow,deny

deny from 123.45.67.789

deny from 123.45.67. (整个C类地址)

allow from all

第二行拒绝某个IP，第三行拒绝某个IP段，也就是123.45.67.0~123.45.67.255。不止用IP，也可以用域名来设定。

5、保护.htaccess文档

在使用.htaccess来设置目录的密码保护时，它包含了密码文件的路径。从安全考虑，有必要把.htaccess也保护起来，不让别人看到其中的内容。虽然可以用其他方式做到这点，比如文档的权限。不过，.htaccess本身也能做到，只需加入如下的指令：

order allow,deny

deny from all

6、根据referrer阻止用户/站点访问

实现此功能需要mod_rewrite模块。

阻止单一referrer: site.com

RewriteEngine on

# Options +FollowSymlinks

RewriteCond %{HTTP_REFERER} site.com [NC]

RewriteRule .* - [F]

阻止多个referrer: site1.com, site2.com

RewriteEngine on

# Options +FollowSymlinks

RewriteCond %{HTTP_REFERER} site1.com [NC,OR]

RewriteCond %{HTTP_REFERER} site2.com

RewriteRule .* - [F]

[NC] - 大小写不敏感(Case-insensite)

[F] - 403 Forbidden

注意以上代码注释掉了”Options +FollowSymlinks”这个语句。如果服务器未在 httpd.conf 的段落设置 FollowSymLinks, 则需要加上这句，否则会得到”500 Internal Server error”错误。

7、阻止坏爬虫和离线浏览器

实现此功能需要mod_rewrite模块。坏爬虫? 比如一些抓垃圾email地址的爬虫和不遵守robots.txt的爬虫(如baidu?)

可以根据 HTTP_USER_AGENT 来判断它们

(但是还有更无耻的如”中搜 zhongsou.com”之流把自己的agent设置为 “Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)” 太流氓了，就无能为力了)

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} ^BlackWidow [OR]

RewriteCond %{HTTP_USER_AGENT} ^Bot mailto:craftbot@yahoo.com [OR]

RewriteCond %{HTTP_USER_AGENT} ^ChinaClaw [OR]

RewriteCond %{HTTP_USER_AGENT} ^Custo [OR]

RewriteCond %{HTTP_USER_AGENT} ^DISCo [OR]

RewriteCond %{HTTP_USER_AGENT} ^Download Demon [OR]

RewriteCond %{HTTP_USER_AGENT} ^eCatch [OR]

RewriteCond %{HTTP_USER_AGENT} ^EirGrabber [OR]

RewriteCond %{HTTP_USER_AGENT} ^EmailSiphon [OR]

RewriteCond %{HTTP_USER_AGENT} ^EmailWolf [OR]

RewriteCond %{HTTP_USER_AGENT} ^Express WebPictures [OR]

RewriteCond %{HTTP_USER_AGENT} ^ExtractorPro [OR]

RewriteCond %{HTTP_USER_AGENT} ^EyeNetIE [OR]

RewriteCond %{HTTP_USER_AGENT} ^FlashGet [OR]

RewriteCond %{HTTP_USER_AGENT} ^GetRight [OR]

RewriteCond %{HTTP_USER_AGENT} ^GetWeb! [OR]

RewriteCond %{HTTP_USER_AGENT} ^Go!Zilla [OR]

RewriteCond %{HTTP_USER_AGENT} ^Go-Ahead-Got-It [OR]

RewriteCond %{HTTP_USER_AGENT} ^GrabNet [OR]

RewriteCond %{HTTP_USER_AGENT} ^Grafula [OR]

RewriteCond %{HTTP_USER_AGENT} ^HMView [OR]

RewriteCond %{HTTP_USER_AGENT} HTTrack [NC,OR]

RewriteCond %{HTTP_USER_AGENT} ^Image Stripper [OR]

RewriteCond %{HTTP_USER_AGENT} ^Image Sucker [OR]

RewriteCond %{HTTP_USER_AGENT} Indy Library [NC,OR]

RewriteCond %{HTTP_USER_AGENT} ^InterGET [OR]

RewriteCond %{HTTP_USER_AGENT} ^Internet Ninja [OR]

RewriteCond %{HTTP_USER_AGENT} ^JetCar [OR]

RewriteCond %{HTTP_USER_AGENT} ^JOC Web Spider [OR]

RewriteCond %{HTTP_USER_AGENT} ^larbin [OR]

RewriteCond %{HTTP_USER_AGENT} ^LeechFTP [OR]

RewriteCond %{HTTP_USER_AGENT} ^Mass Downloader [OR]

RewriteCond %{HTTP_USER_AGENT} ^MIDown tool [OR]

RewriteCond %{HTTP_USER_AGENT} ^Mister PiX [OR]

RewriteCond %{HTTP_USER_AGENT} ^Navroad [OR]

RewriteCond %{HTTP_USER_AGENT} ^NearSite [OR]

RewriteCond %{HTTP_USER_AGENT} ^NetAnts [OR]

RewriteCond %{HTTP_USER_AGENT} ^NetSpider [OR]

RewriteCond %{HTTP_USER_AGENT} ^Net Vampire [OR]

RewriteCond %{HTTP_USER_AGENT} ^NetZIP [OR]

RewriteCond %{HTTP_USER_AGENT} ^Octopus [OR]

RewriteCond %{HTTP_USER_AGENT} ^Offline Explorer [OR]

RewriteCond %{HTTP_USER_AGENT} ^Offline Navigator [OR]

RewriteCond %{HTTP_USER_AGENT} ^PageGrabber [OR]

RewriteCond %{HTTP_USER_AGENT} ^Papa Foto [OR]

RewriteCond %{HTTP_USER_AGENT} ^pavuk [OR]

RewriteCond %{HTTP_USER_AGENT} ^pcBrowser [OR]

RewriteCond %{HTTP_USER_AGENT} ^RealDownload [OR]

RewriteCond %{HTTP_USER_AGENT} ^ReGet [OR]

RewriteCond %{HTTP_USER_AGENT} ^SiteSnagger [OR]

RewriteCond %{HTTP_USER_AGENT} ^SmartDownload [OR]

RewriteCond %{HTTP_USER_AGENT} ^SuperBot [OR]

RewriteCond %{HTTP_USER_AGENT} ^SuperHTTP [OR]

RewriteCond %{HTTP_USER_AGENT} ^Surfbot [OR]

RewriteCond %{HTTP_USER_AGENT} ^tAkeOut [OR]

RewriteCond %{HTTP_USER_AGENT} ^Teleport Pro [OR]

RewriteCond %{HTTP_USER_AGENT} ^VoidEYE [OR]

RewriteCond %{HTTP_USER_AGENT} ^Web Image Collector [OR]

RewriteCond %{HTTP_USER_AGENT} ^Web Sucker [OR]

RewriteCond %{HTTP_USER_AGENT} ^WebAuto [OR]

RewriteCond %{HTTP_USER_AGENT} ^WebCopier [OR]

RewriteCond %{HTTP_USER_AGENT} ^WebFetch [OR]

RewriteCond %{HTTP_USER_AGENT} ^WebGo IS [OR]

RewriteCond %{HTTP_USER_AGENT} ^WebLeacher [OR]

RewriteCond %{HTTP_USER_AGENT} ^WebReaper [OR]

RewriteCond %{HTTP_USER_AGENT} ^WebSauger [OR]

RewriteCond %{HTTP_USER_AGENT} ^Website eXtractor [OR]

RewriteCond %{HTTP_USER_AGENT} ^Website Quester [OR]

RewriteCond %{HTTP_USER_AGENT} ^WebStripper [OR]

RewriteCond %{HTTP_USER_AGENT} ^WebWhacker [OR]

RewriteCond %{HTTP_USER_AGENT} ^WebZIP [OR]

RewriteCond %{HTTP_USER_AGENT} ^Wget [OR]

RewriteCond %{HTTP_USER_AGENT} ^Widow [OR]

RewriteCond %{HTTP_USER_AGENT} ^WWWOFFLE [OR]

RewriteCond %{HTTP_USER_AGENT} ^Xaldon WebSpider [OR]

RewriteCond %{HTTP_USER_AGENT} ^Zeus

RewriteRule ^.* - [F,L]

[F] - 403 Forbidden

[L] - ?

8、URL转向

如果网站进行了重新规划，将文档进行了迁移，或者更改了目录。这时候，来自搜索引擎或者其他网站链接过来的访问就可能出错。这种情况下，可以通过如下指令来完成旧的URL自动转向到新的地址，语法格式为：Redirect /旧目录/旧文档名新文档的地址

Redirect /old_dir/old_file.html http://yoursite.com/new_dir/new_file.html

或者整个目录的转向，语法格式为： Redirect 旧目录新目录

Redirect /old_dir http://yoursite.com/new_dir

9、改变缺省的首页文件

一般情况下缺省的首页文件名有default、index等。不过，有些时候目录中没有缺省文件，而是某个特定的文件名，比如在pmwiki中是 pmwiki.php。这种情况下，要用户记住文件名来访问很麻烦。在.htaccess中可以轻易的设置新的缺省文件名，语法格式为：

DirectoryIndex 新的缺省文件名

DirectoryIndex pmwiki.php

也可以列出多个，顺序表明它们之间的优先级别，例如：

DirectoryIndex filename.html index.cgi index.pl default.htm

10、防止盗链

如果不喜欢别人在他们的网页上连接自己的图片、文档的话，也可以通过htaccess的指令来做到。实现此功能需要mod_rewrite模块，所需要的指令如下：

RewriteEngine on

RewriteCond % !^$

RewriteCond % !^http://(www.)?phpv.net/.*$ [NC]

RewriteRule .(gif|jpg)$ - [F]

也可以用一张图片来代替：

RewriteEngine on

RewriteCond % !^$

RewriteCond % !^http://(www.)?mydomain.com/.*$ [NC]

RewriteRule .(gif|jpg)$ http://www.phpv.net/PageNotFound.gif [R,L]

11、防止目录列表显示

所需要的指令如下：

IndexIgnore *

IndexIgnore *.jpg *.gif

12、添加 MIME 类型

例如：

AddType application/x-shockwave-flash swf

如果设置类型为 application/octet-stream 将提示下载

0 Comments

firefox2.0里的书签全部丢失

Jan 17, 2008 Author: | Filed under: Uncategorized

上次碰到这个问题是几年前了，firefox上辛辛苦苦建立的标签目录一夜之间全部消失，那一次导致我转向了opera，并焊在上面长达两年之久。这回再次出现同样的问题，真是令人沮丧。

估计是非正常关机造成的xml配置文件损坏，不知大家有没有类似经验。

0 Comments

JQuery tabs标签页代码

Jan 17, 2008 Author: | Filed under: Uncategorized

</p> <p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></p> <p><html lang="en"></p> <p> <head></p> <p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></p> <p> <meta http-equiv="Content-Style-Type" content="text/css"></p> <p> <meta http-equiv="Content-Script-Type" content="text/javascript"></p> <link rel="stylesheet" href="ui.tabs.css" type="text/css" media="print, projection, screen"> <style type="text/css" media="screen, projection"> <p> /* Not required for Tabs, just to make this demo look better... */</p> <p> body, h1, h2 {</p> <p> font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;</p> <p> }</p> <p> h1 {</p> <p> margin: 1em 0 1.5em;</p> <p> font-size: 18px;</p> <p> }</p> <p> h2 {</p> <p> margin: 2em 0 1.5em;</p> <p> font-size: 16px;</p> <p> }</p> <p> p {</p> <p> margin: 0;</p> <p> }</p> <p> pre, pre+p, p+p {</p> <p> margin: 1em 0 0;</p> <p> }</p> <p> code {</p> <p> font-family: "Courier New", Courier, monospace;</p> <p> }</p> </style> <p> <script src="jquery-1.2.1.pack.js" type="text/javascript"></script></p> <p> <script src="ui.tabs.js" type="text/javascript"></script></p> <p> <script type="text/javascript"></p> <p> $(function() {</p> <p> $('#container-1 ul').tabs();</p> <p> $('#container-2 ul').tabs(2);</p> <p> $('#container-3 ul').tabs({ fxSlide: true });</p> <p> $('#container-4 ul').tabs({ fxFade: true, fxSpeed: 'fast' });</p> <p> $('#container-5 ul').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });</p> <p> $('#container-6 ul').tabs({</p> <p> fxFade: true,</p> <p> fxSpeed: 'fast',</p> <p> click: function() {</p> <p> alert('click callback');</p> <p> },</p> <p> hide: function() {</p> <p> alert('hide callback');</p> <p> },</p> <p> show: function() {</p> <p> alert('show callback');</p> <p> }</p> <p> });</p> <p> $('#container-7 ul').tabs({ fxShow: { height: 'show', opacity: 'show' }, fxSpeed: 'normal' });</p> <p> $('#container-8 ul').tabs({ cache: false });</p> <p> $('#container-9 ul').tabs({ disabled: [3] });</p> <p> $(’ <p><a href="#">Remove tab</a></p> <p>‘).prependTo(’#fragment-22′).find(’a').click(function() {</p> <p> $(’#container-9 ul’).tabsRemove(4);</p> <p> return false;</p> <p> });</p> <p> $(’ <p><a href="#">Add tab</a></p> <p>‘).prependTo(’#fragment-22′).find(’a').click(function() {</p> <p> $(’#container-9 ul’).tabsAdd(’#new-tab’, ‘New Tab’, 4);</p> <p> return false;</p> <p> });</p> <p> $(’ <p><a href="#">Disable third tab</a></p> <p>‘).prependTo(’#fragment-22′).find(’a').click(function() {</p> <p> $(’#container-9 ul’).tabsDisable(3);</p> <p> return false;</p> <p> });</p> <p> $(’ <p><a href="#">Enable third tab</a></p> <p>‘).prependTo(’#fragment-22′).find(’a').click(function() {</p> <p> $(’#container-9 ul’).tabsEnable(3);</p> <p> return false;</p> <p> });</p> <p> $(’ <p><a href="#">Click third tab</a></p> <p>‘).prependTo(’#fragment-22′).find(’a').click(function() {</p> <p> $(’#container-9 ul’).tabsClick(3);</p> <p> return false;</p> <p> });</p> <p> $(’ <p><a href="#">Get selected tab</a></p> <p>‘).prependTo(’#fragment-22′).find(’a').click(function() {</p> <p> alert( $(’#container-9 ul’).tabsSelected() );</p> <p> return false;</p> <p> });</p> <p> $(’#container-10 ul’).tabs({ unselected: true });</p> <p> $(’#container-11 ul’).tabs({ event: ‘mouseover’ }).find(’a').click(function() {</p> <p> return false;</p> <p> });</p> <p> });</p> <p> </script></p> <p> </head></p> <p> <body></p> <h1><a href="http://ui.jquery.com">jQuery UI</a> Tabs / Tabs 3</h1> <p> <strong><a href="ui.tabs.zip">Download</a></strong></p> <p> <strong><a href="http://docs.jquery.com/UI/Tabs">Documentation</a></strong></p> <p> <strong><a href="http://docs.jquery.com/UI/TabsExtensions">Tabs Extensions</a></strong></p> <h2>Simple Tabs</h2> <div id="container-1"> <ul> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is active by default:</p> <pre><code>$('#container').tabs();</code></pre> </p></div> <div id="fragment-2"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-3"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Start With Custom Tab</h2> <div id="container-2"> <ul> <li><a href="#fragment-4"><span>One</span></a></li> <li><a href="#fragment-5"><span>Two</span></a></li> <li><a href="#fragment-6"><span>Three</span></a></li> </ul> <div id="fragment-4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-5"> <p>Second tab is active:</p> <pre><code>$('#container').tabs(2);</code></pre> <p> Two alternative ways to specify the active tab will overrule this argument. First a li element</p> <p> (representing one single tab) belonging to the selected tab class, e.g. set the selected tab</p> <p> class (default: “tabs-selected”, see option selectedClass) for one of the unordered li elements</p> <p> in the HTML source. In addition if a fragment identifier/hash in the URL of the page refers</p> <p> to the id of a tab container of a tab interface the corresponding tab will be activated and both</p> <p> the initial argument as well as an eventually declared class attribute will be overruled.</p> </p></div> <div id="fragment-6"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Slide Effect</h2> <div id="container-3"> <ul> <li><a href="#fragment-7"><span>One</span></a></li> <li><a href="#fragment-8"><span>Two</span></a></li> <li><a href="#fragment-9"><span>Three</span></a></li> </ul> <div id="fragment-7"> <p> Use a slide effect to switch tabs.</p> <p> You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.</p> <p> The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,</p> <p> <code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation</p> <p> in milliseconds. If omitted it defaults to <code>normal</code>.</p> <pre><code>$('#container').tabs({ fxSlide: true });</code></pre> </p></div> <div id="fragment-8"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-9"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Fade Effect</h2> <div id="container-4"> <ul> <li><a href="#fragment-10"><span>One</span></a></li> <li><a href="#fragment-11"><span>Two</span></a></li> <li><a href="#fragment-12"><span>Three</span></a></li> </ul> <div id="fragment-10"> <p> Use a fade effect to switch tabs.</p> <p> You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.</p> <p> The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,</p> <p> <code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation</p> <p> in milliseconds. If omitted it defaults to <code>normal</code>.</p> <pre><code>$('#container').tabs({ fxFade: true, fxSpeed: 'fast' });</code></pre> </p></div> <div id="fragment-11"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-12"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Slide and Fade Effect Combined</h2> <div id="container-5"> <ul> <li><a href="#fragment-13"><span>One</span></a></li> <li><a href="#fragment-14"><span>Two</span></a></li> <li><a href="#fragment-15"><span>Three</span></a></li> </ul> <div id="fragment-13"> <p>Use a combined slide and fade effect to switch tabs:</p> <pre><code>$('#container').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });</code></pre> </p></div> <div id="fragment-14"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-15"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Callbacks</h2> <div id="container-6"> <ul> <li><a href="#fragment-16"><span>One</span></a></li> <li><a href="#fragment-17"><span>Two</span></a></li> <li><a href="#fragment-18"><span>Three</span></a></li> </ul> <div id="fragment-16"> <p> Define callback functions that are invoked at different points in time during the tab switch process.</p> <p> These functions are invoked with three arguments: the first one being the clicked tab (the</p> <p> <code>a</code> element), the second one being the <code>div</code> element that holds the content of</p> <p> the clicked tab and the third one being the <code>div</code> element belonging to the tab that gets hidden.</p> <p></p> <p> If the onClick callback returns false, the tab switch is canceled. This is especially useful if switching</p> <p> tabs requires form validation before for example.</p> <pre><code>$('#container').tabs({ click: function() { alert('click callback'); }, hide: function() { alert('hide callback'); }, show: function() { alert('show callback'); } });</code></pre> </p></div> <div id="fragment-17"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-18"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Custom animation</h2> <div id="container-7"> <ul> <li><a href="#fragment-19"><span>One</span></a></li> <li><a href="#fragment-20"><span>Two</span></a></li> <li><a href="#fragment-21"><span>Three</span></a></li> </ul> <div id="fragment-19"> <p>Define your own custom animation:</p> <pre><code>$('#container').tabs({ fxShow: { height: 'show', opacity: 'show' } });</code></pre> </p></div> <div id="fragment-20"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-21"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Ajax tabs</h2> <div id="container-8"> <ul> <li><a href="ahah_1.html" title="Tab one"><span>One</span></a></li> <li><a href="ahah_2.html" title="Tab two"><span>Two</span></a></li> <li><a href="ahah_3.html"><span>Three</span></a></li> </ul></div> <h2>Triggering, Enabling, Disabling, Adding and Removing Tabs</h2> <div id="container-9"> <ul> <li><a href="#fragment-22"><span>One</span></a></li> <li><a href="#fragment-23"><span>Two</span></a></li> <li><a href="#fragment-24"><span>Three</span></a></li> </ul> <div id="fragment-22"> <pre><code>$('#container').tabsClick(3); // simulate click on 3rd tab $('#container').tabsEnable(3); // enable 3rd tab $('#container').tabsDisable(3); // disable 3rd tab $('#container').tabsAdd('#new-tab', 'New Tab', 4); // add new 4th tab $('#container').tabsRemove(4); // remove 4th tab</code></pre> <p> One or more tabs can also be disabled immediatly by simply setting the disabling class for the <code class="html">li</code> element</p> <p> representing that particular tab or by using the <code>disabled</code> option.</p> <pre><code><li class="ui-tabs-disabled"&gt…</li> $('#container').tabs({ disabled: [2, 3] });</code></pre> </p></div> <div id="fragment-23"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-24"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Start with all tabs unselected/allow toggle visibility</h2> <div id="container-10"> <ul> <li><a href="#fragment-25"><span>One</span></a></li> <li><a href="#fragment-26"><span>Two</span></a></li> <li><a href="#fragment-27"><span>Three</span></a></li> </ul> <div id="fragment-25"> <pre><code>$('#container').tabs({ unselected: true }); // start with all tabs hidden $('#container').tabs({ unselect: true }); // selected tab closes on click</code></pre> <p> Setting <code class="javascript">unselected</code> option to <code class="javascript">true</code> automatically sets <code class="javascript">unselect</code> as well.</p> </p></div> <div id="fragment-26"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-27"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Custom event</h2> <div id="container-11"> <ul> <li><a href="#fragment-28"><span>One</span></a></li> <li><a href="#fragment-29"><span>Two</span></a></li> <li><a href="#fragment-30"><span>Three</span></a></li> </ul> <div id="fragment-28"> <p>Define mouseover event to switch tabs (or any other reasonable event)</p> <pre><code>$('#container').tabs({ event: 'mouseover' });</code></pre> </p></div> <div id="fragment-29"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-30"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Changelog</h2> <ul> <li>3.0 - release</li> </ul> <h2>Tested with</h2> <ul> <li>Firefox 2</li> <li>Safari 2.0.4</li> <li>Opera 9.24</li> <li><abbr title="Internet Explorer">IE</abbr> 7</li> <li><abbr title="Internet Explorer">IE</abbr> 6</li> </ul> <p> </body></p> <p></html> 显示更多