2012-1-30 17:42 Monday  
2.2.2 相对定位

    相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它 的起点进行移动。如果将top设置为20像素,那么框将出现在原位置顶部下面20像素的地方。如果将left设置为20像素,那么会在元素左边创建20像 素的空间,也就是将元素向右移动(见图2-10)。

    #mybox {
      position relative;
      left: 20px;
      top: 20px;
      }

图2-10 对元素进行相对定位

    在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框。

    2.2.3 绝对定位

    相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。与之相反,绝对定位使元素的位置与文档流无关,因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样(见图2-11)。

图2-11 对元素进行绝对定位

    绝对定位的元素的位置相对于最近的已定位祖先元素。如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块可能是画布或HTML元素。

    与相对定位的框一样,绝对定位的框可以从它的包含块向上、下、左、右移动。这提供了很大的灵活性。可以直接将元素定位在页面上的任何位置。

    对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么是最初的包含块。

    因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的堆放次序。z-index值越高,框在堆中的位置就越高。

    绝对定位的元素的位置相对于最近的已定位祖先元素,这使我们能够实现一些非常有意思的效果。例如,假设希望让一个文本段落对准一个大框的右下角。只需对包含框进行相对定位,然后相对于这个框对段落进行绝对定位:

    #branding {
      width: 700px;
      height: 100px;
      position:relative;
      }
     #branding.tel{
     position:absolute;
     right:10px;
     bottom:10px;
     text-align:right;
     }
    <div id="branding">
    <p class="tel">tel:0845 838 6163</p>
    </div>

    相对于相对定位的祖先元素对框进行绝对定位,这在大多数现代浏览器中实现得很好。但是,在Windows上的IE 5.5和IE 6中有一个bug。如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置,那么需要确保相对定位的框已经设置了尺寸。如果没有,那么IE会相对 于画布定位这个框。在第9章中可以进一步了解这个bug和修复方法。简单的解决方案是为相对定位的框设置宽度和高度,从而避免这一问题。

    在进行页面布局时,绝对定位是非常有用的工具,尤其是在使用相对定位的祖先元素的情况下。完全可能只使用绝对定位创建出整个设计。为此,这些元素需要具有固定尺寸,这样就能够将它们定位在任何地方而不会有重叠的风险。

    因为绝对定位的元素与文档流无关,所以它们不影响普通流中的框。如果扩大绝对定位的框(例如,通过增加字号),周围的框不会重新定位。因此,尺寸的任何改变会导致绝对定位的框产生重叠,从而破坏精心调整过的布局。

    固定定位

    固定定位是绝对定位的一个子类别。差异在于固定元素的包含块是视口。这使我们能够创建总是出现在窗口中相同位置的浮动元素。这种情况的一个示例可以在 snook.ca上看到(见图2-12)。博客评论表单采用固定定位,这使它在页面滚动时一直出现在屏幕上的相同位置。这有助于改进易用性,用户不必为了 发表评论而一直滚动到页面底部。

    图2-12 在snook.ca上,屏幕右边的评论区域采用固定定位,因此一直出现在视口中的相同位置

    不幸的是,IE 6和更低版本不支持固定定位。为了解决这个问题,Jonathan Snook使用JavaScript在IE中重现了这个效果。

购买《精通CSS:高级Web标准解决方案》:http://shop.csai.cn/itbook/itbookinfo.asp?lbbh=10014414

2012-1-30 17:41 Monday  

不能像php那样的语言一样定义,只能采用

function showAlert(str,alertw,alerth){

   var alertw=arguments[1]?arguments[1]:400;
   var alerth=arguments[2]?arguments[2]:100;

}

这样的方式定义..

借肋于arguments 是实参数组

2012-1-30 17:40 Monday  

用smarty插件,

function smarty_prefilter_chpath($tpl_source,&$smarty)
{
/*这个会将绝对路径也修正,不对
    return preg_replace("/(<(img.*?src|link.*?href|script.*?src)=([\"']))(.*?)(\\3.*?>)/is","$1".SKINTPL."$4$5",$tpl_source);
    */
    /*这个会将js也修正
    return preg_replace("/(<(img.*?src|link.*?href|script.*?src)=([\"']))(([^(http:\/\/)])(.*?))(\\3.*?>)/is","$1".SKINTPL."$5$6$7",$tpl_source);
    */

    /*这个不修正js */
    return preg_replace("/(<(img.*?src|link.*?href)=([\"']))(([^(http:\/\/)])(.*?))(\\3.*?>)/is","$1".SKINTPL."$5$6$7",$tpl_source);
}

文件取名prefilter.chpath.php,放到plugins,用 $smarty->load_filter('pre','chpath');就行了

最新修改此函数如下:

function smarty_prefilter_chpath($tpl_source,&$smarty)
{
/*
    return preg_replace("/(<(img.*?src|link.*?href|script.*?src)=([\"']))(.*?)(\\3.*?>)/is","$1".SKINTPL."$4$5",$tpl_source);
    */
    /*
    return preg_replace("/(<(img.*?src|link.*?href|script.*?src)=([\"']))(([^(http:\/\/)])(.*?))(\\3.*?>)/is","$1".SKINTPL."$5$6$7",$tpl_source);
    */
    /*
    return preg_replace("/(<(img.*?src|link.{1,100}href)=([\"']))(([^(http:\/\/|\{\$imgurl\})])(.*?))(\\3.*?>)/is","$1".SKINTPL."$5$6$7",$tpl_source);
    */
    return preg_replace("/(<(img.*?src|link.{1,100}href)=([\"']))(images|style)(.*?)(\\3.*?>)/is","$1".SKINTPL."$4$5$6",$tpl_source);
}

2012-1-30 17:40 Monday  

这个记在这,留个记号

http://www.oncity.cc/p/test/jquery/search.html

jquery搜索提示的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery 自动完成功能(优化版)</title>
   <script type="text/javascript" src="jquery-1.3.1.js"></script>         
    </head>
    <body>
        <script type="text/javascript">
    var highlightindex = -1;//表示当前高亮节点
    var timeoutId;
    $(document).ready(function() {
    
        var wordInput = $("#word");//文本框
        var wordInputOffset = wordInput.offset();//获得文本框位置
        $("#auto").hide().css("border", "1px black solid").css("position", "absolute")
                .css("top", wordInputOffset.top + wordInput.height() + 5 + "px")
                .css("left", wordInputOffset.left + "px").width(wordInput.width() + 3 + "px");
               
        wordInput.blur(function() {
        autoHide();
        });        
               
        wordInput.keyup(function(event) {
            //处理文本框中的键盘事件
            //如果输入字母,将文本框中最新信息发送给服务器
            var myEvent = event || window.event;
            var keyCode = myEvent.keyCode;//获得键值
           
            if (keyCode == 27) {
            var wordText = $("#word").val();
                autoHide();
                wordInput.text(wordText);
            }
            else {
                 if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46 || keyCode == 32) { //8对应退格键,46对应删除键
                    var wordText = $("#word").val();//获得文本框中的内容
                    var autoNode = $("#auto");
                    if (wordText != "") {
                        clearTimeout(timeoutId);//对上次未完成的延时操作进行取消
                        //延时操作,减少与服务器的交互次数,延时500ms,防止用户操作过快
                        timeoutId = setTimeout(function() {
                            $.post("http://www.oncity.cc/p/test/jquery/search_result.php", {word:wordText}, function(data) {
                           
                            if($("#word").val() =="" ) {
                               autoHide();
                               return;
                            }
                                var jqueryObj = $(data);//将dom对象data转换成jQuery的对象
                                var wordNodes = jqueryObj.find("word");//找到所有word节点
                                autoNode.html("");
                                wordNodes.each(function(i) { //i是索引,用来给id赋值
                                   var wordNode = $(this);//获取单词内容
                                    var newDivNode = $("<div>").attr("id", i).css("backgroundColor", "white");
                                    newDivNode.html(wordNode.text()).appendTo(autoNode);//新建div节点,加入单词内容
                                    //增加鼠标进入事件,高亮节点
                                    newDivNode.mou