自定义阅读宽度Beta专门配合那些自适应宽度布局或者全宽的版面设计。Jakob Nielson已经教过我们使用一个自适应宽度布局，自适应宽度布局，但是用户在阅读文章的时候，还是会遇到问题。自定义阅读宽度，可以让用户选择适合的阅读宽度。

为了判断自定义阅读宽度是否适合自己，我建立了一个测试页面，来做一个演示。

看完演示后，如果你还想做进一步的了解，你可以继续阅读以下的文章，接下来主要是介绍如何在你的网页上进行自定义阅读宽度。

源文件

首先，要下载包含测试示例的源文件。
你可以对该文件进行编辑，来自定义以下的脚本：
resize.php
test.php
javascripts/readingwidth.js
css/lightbox.css
css/readingWidth.css

通过JavaScrip文件，你可以发现我已经使用了scriptaculous，因为其中一个文件比较大。这可是一个压缩JavaScript好方法，可是这样就超出了文章的范围。Dustin Diaz建议不使用JavaScript libraries，但是scriptaculous的滑块控件确实很实用。

了解脚本的作用

scrip可以根据用户的偏好来调整指定容器的大小（在测试例子中，使用了BODY容器）。首先scrip可以显示链接。用户可以点击链接来resize dialog。resize dialog使用了一个叫做Lightbox Gone Wild的Lightbox自定义版本。

下面看一下script的演示 。

只有当页面完成装载后，链接才会显示。这个技术使用了Peter-Paul Koch的addLoadEvent功能。

用户选择一个阅读宽度后，script会设置一个persistent cookie。再次浏览页面的时候，通过php 可以读取cookie，容器也会随着进行适当地调整。如果想要返回默认宽度，用户可以再次调整阅读宽度，然后将阅读宽度设置到默认值。

自定义test.php

你所阅读的persistent cookie是可以进行自定义script的第一个部分。
PLAIN TEXT
PHP:
        <?php
                 if (isset($_COOKIE["ReadingWidth"])) {
                 print($ReadingArray[0]);
                $ReadingArray = explode(",", $_COOKIE["ReadingWidth"]);
                $ReadingWidth = "";
                if (count($ReadingArray) === 3 ) { $ReadingWidth = $ReadingArray[0];}
                if (preg_match("/^\d\d*(px|%)$/", $ReadingWidth)) {
               ?>
    <style type="text/css">#reading-width-container { width: <?php echo $ReadingWidth ?>;}</style>
          <?php
          }
    }
   ?>

可以看到一个为ID of #reading-width-container而设置的样式。也可以看到BODY标签有相同的ID.无需将reading-width-container ID应用到BODY标签上，你可以将ID 应用到任何你想要用户调整大小的容器上。你还可以自定义运用样式的方式。如果你想要内嵌样式，你可以轻松地通过自定义脚本去将一个内嵌样式应用到你选择的容器中。

test.php的另一个可以进行自定义的是显示链接。

PLAIN TEXT
PHP:
           <a id="reading-width-resize" style="display: none" href="resize.php" class="lbOn">Resize Window</a>

我建议大家保存显示链接的ID，但是如果你喜欢的话，可以将文本链接改变成图像链接。需要注意的是阅读宽度对话框的链接必须是相对路径。在一些情况下，绝对路径是不能够使用的。（比如，用户输入的是devlounge.net，而不是www.devlounge.net）

自定义resize.php

你还可以自定义阅读对话框的默认值

PLAIN TEXT
PHP: 
            $SliderValue = 1; //Can be from 0 - 1 (i.e., 0.03)
            $IsFixedSelected = "true"; //Can be "true"

滑动杆的初始值可以设置在0-1之间。滑动杆的初始值是当用户打开阅读宽度对话框时，滑动杆的初始值。

IsFixedSelected决定单选按钮的默认值。设置为“ture”时确保Fixed单选按钮已经选定，而“faulse”是确保Fluid单选按钮已经选定。

当实例化阅读宽度对象时，还可以对另外一个部分进行自定义。
PLAIN TEXT
PHP: 
            var readingControl = new ReadingWidth("reading-width-container", "auto", <?php echo $IsFixedSelected ?>,15, 100, true);

但对一个对象进行实例化的时候，这个对象已经设置了容器ID,宽度默认值，包括单选按钮的选定，最小宽度，最大宽度，还有是否设定为百分比。

宽度默认值可以是任意的CSS值（比如"auto", "1024px", "100%"）。如果将最小和最大宽度都设为0，那么最小和最大宽度可以忽略。需要注意的是你要将最小和最大宽度值设定为百分数或者象素。如果是百分数的话，你可以通过设置true来说明，如果不是，就设置为false。

还有一个可以进行自定义的部分――滑块控件。你需要根据最大最小宽度值来调整滑块控件。
PLAIN TEXT
PHP: 
 var slider = new Control.Slider('handle1','track1',{  range:$R(0.15,1), values:
 [.15,.20,.25,.30,.35,.40,.45,.50,.55,.60,.65,.70,.75,
.80,.85,.90,.95,1],

我已经把滑块控件从15%调整到100%。这个数值可以通过调整range 和value值来进行修改。

自定义readingwidth.js

PLAIN TEXT
JavaScript:
            //Make the overlay (Lightbox) static to fix a bug in IE when using the BODY tag as a container - Comment the next two lines if you don't use the BODY tag as a container
                var overlay = document.getElementById("overlay");
                if (overlay != null) { overlay.style.width = this.GetBrowserWidth() };

如何你没有将BODY标签作为阅读宽度容器，那么看一些JS 文档里的内容（应该在45和46行）。当BODY 容器大小改变时，Internet Explorer就会调整Lightbox覆盖图的大小。以上的代码为覆盖图设置了一个固定宽度。

自定义样式

你可以通过样式表改变阅读宽度对话框的样式。你可以在readingWidth.css文件中找到所有阅读宽度对话框的样式。也可以在lightbox.css文件中找到所有Lightbox Gone Wild样式。

其它相关内容

我对lightbox.js文档中的代码做了一点修改。这样可以修改IE中的一个bug，这个bug就是由于网页卷轴不可用，那么阅读宽度脚本会认定浏览器的宽度过宽。相关注释应该在88-90行。

Bugs

现在，发现的bug都已经修改好了。这个脚本已经在IE 6, IE 7, FF 1.5, FF 2,和 Opera 9上进行了成功的测试。如果你使用的是一些其它浏览器，比如Safari 或者 Konquerer，并且可以提供给我们一起反馈信息，我们将非常感激。

我并不是说在脚本里没有任何bug。但是，所有发现的bug已经被修改或者已经提供方法来降低它的影响。这个脚本作为beta发布的主要原因就是希望得到一些反馈，并且在寻找一下残余的bug。

未来

请密切留意今后的相关信息（包括添加的功能和bug的修改）。我打算不使用prototype或者scriptaculous来写一个类似的脚本。请关注！

现在就下载吧！
自己去试做一下自定义宽度测试吧！立即下载版本1 Beta。