博客园-无梦家园http://www.cnblogs.com/fanrong/无梦家园zh-cnFri, 05 Dec 2008 11:54:15 GMTFri, 05 Dec 2008 11:54:15 GMT60jbossseamhttp://www.cnblogs.com/fanrong/archive/2007/11/18/963141.html沧桑雨迢迢沧桑雨迢迢Sun, 18 Nov 2007 05:20:00 GMThttp://www.cnblogs.com/fanrong/archive/2007/11/18/963141.htmlhttp://www.cnblogs.com/fanrong/comments/963141.htmlhttp://www.cnblogs.com/fanrong/archive/2007/11/18/963141.html#Feedback0http://www.cnblogs.com/fanrong/comments/commentRss/963141.htmlhttp://www.cnblogs.com/fanrong/services/trackbacks/963141.htmlhttp://www.jbossseam.com/

[新闻]Google操作系统已开始内部测试？
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>CSS样式类别列表http://www.cnblogs.com/fanrong/archive/2007/06/22/793166.html沧桑雨迢迢沧桑雨迢迢Fri, 22 Jun 2007 07:22:00 GMThttp://www.cnblogs.com/fanrong/archive/2007/06/22/793166.htmlhttp://www.cnblogs.com/fanrong/comments/793166.htmlhttp://www.cnblogs.com/fanrong/archive/2007/06/22/793166.html#Feedback3http://www.cnblogs.com/fanrong/comments/commentRss/793166.htmlhttp://www.cnblogs.com/fanrong/services/trackbacks/793166.html      以下是常用的css样式类别列表:字体样式(font),文本样式(text),背景样式(background),盒样式(border),列表样式(ul,li).
字体样式font:
      字体类型:font-family
      字体大小:font-size
      字体风格:font-style(斜体,正常体)
      字体粗细:font-weight(粗,细)
      字体颜色:color
      字体行高:line-height
      字间距:letter-spacing

文本样式text
      行间距(字体行高):line-height
      文本修饰:text-decoration(下划线,上划线,删除线)
      水平对齐:text-align
      垂直对齐:vertical-align

背景样式background:
      背景颜色:background-color
      背景图片:background-image
      背景重复:background-repeat
      背景定位:background-position
      
盒样式box:
      外边距:margin
      内边距:padding
      边框宽度:border-width
      边框颜色:border-color
      边框风格:border-style      
      上边框:border-top
      右边框:border-right
      下边框:border-bottom
      左边框:border-left
      宽度:width
      高度:height
      漂浮:float
      清除:clear

列表样式ul,li:
      控制显示:display
      符号列表:list-style-type
      图形列表:list-style-image
      位置列表:list-style-position
      鼠标形状:cursor
    
      



[新闻]Google阅读器界面升级 全新改版
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>样式设计概要http://www.cnblogs.com/fanrong/archive/2007/06/22/793151.html沧桑雨迢迢沧桑雨迢迢Fri, 22 Jun 2007 06:50:00 GMThttp://www.cnblogs.com/fanrong/archive/2007/06/22/793151.htmlhttp://www.cnblogs.com/fanrong/comments/793151.htmlhttp://www.cnblogs.com/fanrong/archive/2007/06/22/793151.html#Feedback0http://www.cnblogs.com/fanrong/comments/commentRss/793151.htmlhttp://www.cnblogs.com/fanrong/services/trackbacks/793151.html盒模型(box model),定位(position)和浮动(float).这三个概念控制dom元素在页面上的排列和显示方式,他们是布局的基础.

盒模型(box model):
      网页上没一个元素都是一个矩形框(盒模型).可能我们没有看到盒本身,但实际上我们看到的内容都是包含再一个个的"盒"中的,这是因为浏览器的初始设置把"盒"的边框隐藏了.
      边框(border),内容(content),内容和边框的距离(内边距padding)以及与其他元素的距离(外边距margin)是盒模型的4要素.
      
定位(position):
      定位决定了网页元素的表现形式.浏览器根据每个dom元素在html中出现的顺序,依次一个接一个排列,形成一个"流",这种流区别于浮动和绝对定位这两种比较特殊的定位方式,称为"普通流".
      css有三种基本的定位机制:普通流,浮动和绝对定位.(相对定位可以看作是普通流定位的一部分)
      定位position有以下几个主要属性:static(默认),absolute(绝对定位),relative(相对定位).
      这里的absolute(绝对定位),可以把某个元素精确的定位在某个地方.绝对定位的元素的位置相对于"最近"的"已定位"的祖先元素,如果没有已定位的祖先元素,那么它的位置相对于body.
      relative(相对定位)所谓的"相对",是相对于本元素相对于在普通流中的初始位置,它的"相对目标"是原本的自身!

浮动(float):
      float有三个属性:left,right,none.
      它一般使用在页面布局的功能上(在UI组件设计的领域,浮动并不是太主要的概念.).
      与浮动相关的另一个概念是清除(clear).略过...



[新闻]Google阅读器界面升级 全新改版
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>UI组件化开发样式设计http://www.cnblogs.com/fanrong/archive/2007/06/22/793100.html沧桑雨迢迢沧桑雨迢迢Fri, 22 Jun 2007 06:08:00 GMThttp://www.cnblogs.com/fanrong/archive/2007/06/22/793100.htmlhttp://www.cnblogs.com/fanrong/comments/793100.htmlhttp://www.cnblogs.com/fanrong/archive/2007/06/22/793100.html#Feedback2http://www.cnblogs.com/fanrong/comments/commentRss/793100.htmlhttp://www.cnblogs.com/fanrong/services/trackbacks/793100.html      基于web的展现方式,其根本原理是html+css!javascript只是作为一种改变Html结构和css属性的手段.
      遵循web标准的网页设计,基本的原则是:html决定结构,而css负责显示,而javascript则改变这两者.
      
UI组件外观设计目标:
      设计开发基于组件化模型的UI时,在UI外观设计上的一个要点是:保持UI组件的外观独立性.如:Menu可以加入不同的MenuItem,形成一个满足需求的菜单,这里组成MenuItem的html不能受到Menu的外观样式影响.
      在一般的网页设计中,通常有这样的样式定义:div{...},.menu span{...}...等.这两个样式定义具有一个特性,就是"泛样式化"!.如div{...}这样定义把网页中所有的div元素都应用到此样式;而.menu span{...}则把使用.menu样式类的元素包含的所有span元素都应用到此样式.
      在设计开发可组合分离的UI组件时,我们必须去除掉这样的"泛样式化"设计!当我们设计一个UI是,给这个UI设计的样式,应该只影响此UI,不能影响以后可能加入此UI中的其他UI的html外观.
      设计组件的样式,应该可以轻松更换"皮肤",以及特殊的外观定制.

UI组件化样式设计原则:
      1)html决定UI结构,css决定外观显示,javascript改变两者.
      2)所有的外观设置,全部通过style和css样式类设计.(style的优先级最高,样式类可以多附加,后加的样式类,将覆盖前样式类的同名属性!)
      3)设计样式时,只使用"样式类",如".my{...}".并且"样式类"之间可以进行一定的继承与派生.
      4)避免设计"泛应用"的样式,如"p{...}",".my span{...}"等.
      5)避免设计基于元素id的样式,如"#menu{...}"等.
      6)样式统一抛弃简写方式,如"border:solid 1px #000;"全部写成"border-right:solid 1px #000;","border-top:solid 1px #000;","border-bottom:solid 1px #000;","border-left:solid 1px #000;",以保持最大的灵活性.(注:样式的精简不是UI组件设计首要追求的,样式的灵活性设置和切换才是!)
      7)出于样式的统一和简化设计,统一使用标准的像素"px"作为基本单位.
      8)必须满足IE和FF两个主流浏览器的兼容性!
      9)使用YUI的样式文件(才2K),以达到兼容不同浏览器初始样式的目的.
      10)抛弃样式中,一些不必要的属性



[新闻]Google阅读器界面升级 全新改版
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>initialize对象状态初始化概念逻辑及意义http://www.cnblogs.com/fanrong/archive/2007/06/20/790223.html沧桑雨迢迢沧桑雨迢迢Wed, 20 Jun 2007 04:12:00 GMThttp://www.cnblogs.com/fanrong/archive/2007/06/20/790223.htmlhttp://www.cnblogs.com/fanrong/comments/790223.htmlhttp://www.cnblogs.com/fanrong/archive/2007/06/20/790223.html#Feedback2http://www.cnblogs.com/fanrong/comments/commentRss/790223.htmlhttp://www.cnblogs.com/fanrong/services/trackbacks/790223.html阅读全文

[新闻]微软官方下载：Windows Vista SP2 Beta测试版
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>javascript索引器简析http://www.cnblogs.com/fanrong/archive/2007/06/20/790185.html沧桑雨迢迢沧桑雨迢迢Wed, 20 Jun 2007 03:38:00 GMThttp://www.cnblogs.com/fanrong/archive/2007/06/20/790185.htmlhttp://www.cnblogs.com/fanrong/comments/790185.htmlhttp://www.cnblogs.com/fanrong/archive/2007/06/20/790185.html#Feedback2http://www.cnblogs.com/fanrong/comments/commentRss/790185.htmlhttp://www.cnblogs.com/fanrong/services/trackbacks/790185.htmlC#实现:
public class MyClass{
    private string _name;
    //索引器
     public string Name{
        get{ return this._name;}
        set{ this._name = value; }
    }
}
JAVA实现:
public class MyClass {
    private String _name;
    public String getName(){
        return this._name;
    }
    public void setName(String value){
        this._name = value;
    }
}

      在javascript中,实现索引器的方法和java差不多,如下:
var MyClass = function(){    
}
MyClass.prototype = {
    _name: null,
    get_name: function(){
        return this._name;
    },
    set_name: function(value){
        this._name = value;
    }
}

      这种javascript索引器的做法,就是MS AJAX的做法.
      当我们需要访问某一对象的属性时,可以由一个专门的"属性访问方法"来统一执行,如下:
<script type="text/javascript">
var MyClass = function(){
}
MyClass.prototype = {
    _name: null,
    get_name: function(){
        return this._name;
    },
    set_name: function(value){
        this._name = value;
    }
}

function setProperties(component, properties){
    for (var name in properties) {
        var val = properties[name];
        var setter = component["set_" + name];
        if (typeof(setter) === 'function') {
            setter.apply(component, [val]);            
        }       
    }    
}

var m = new MyClass();

setProperties(m,{name:"fanrong"});
alert(m.get_name());
</script>

      

[新闻]微软官方下载：Windows Vista SP2 Beta测试版
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>jQuery简析http://www.cnblogs.com/fanrong/archive/2007/05/28/763025.html沧桑雨迢迢沧桑雨迢迢Mon, 28 May 2007 13:34:00 GMThttp://www.cnblogs.com/fanrong/archive/2007/05/28/763025.htmlhttp://www.cnblogs.com/fanrong/comments/763025.htmlhttp://www.cnblogs.com/fanrong/archive/2007/05/28/763025.html#Feedback16http://www.cnblogs.com/fanrong/comments/commentRss/763025.htmlhttp://www.cnblogs.com/fanrong/services/trackbacks/763025.htmljQuery是为了改变javascript的编码方式而设计的.
      从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库.
      jQuery改变javascript编码方式!
      那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程:
1)查找(创建)jQuery对象:$("selector");
2)调用jQuery对象的方法完成我们需要完成的工作:$("selector").doOurWork();
      ok,jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的.这两个步骤是jQuery的编码逻辑核心!
      要实现这种简洁编码方式,创建jQuery对象这一环节至关重要.因此,jQuery的dom元素查找能力相当强悍.此外,jQuery对象的方法肯定是有限的,有限的方法满足不了日益增长各有所需的要求,所以,必须提供jQuery对象方法的扩展能力.
      强悍的dom元素查找能力,以及随心所欲的方法扩展,这两点正是jQuery的核心所在!
      来一个简单的示例,来说明jQuery是如何工作的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
</head>
<body id="bd">
<a href="http://www.baidu.com">baidu</a>
</body>
</html>
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript" >
$(function(){
    $("a").click(function(e){//1)查找$("a");2)jQuery对象事件click;3)jQuery对象方法hide
        $(this).hide("slow");
        return false;   
    });
});
</script>
      
      jQuery中有一个"配置"的思想,这一点使得对象的属性/事件等设置变得容易理解且十分简便,如下一个拖拽组件的初始化:
$(document).ready(
    function()
    {
        $('#drag1').Draggable({
            handle: "ax",               //属性设置
            onStart: function(el,x,y){  //事件监听器设置      
            }
        });
    }
);
      可以看到,$("#drag1")是查找并创建一个jquery对象,然后调用Draggable方法进行拖拽初始化,在此方法调用时,传递一个"配置"对象,进行拖拽操作的初始化配置.
      这一"配置"的思想,极大简化了一些编码步骤,并相当直观和易懂.

以下我进行三个问答:
1)   问:为什么$(selector)之后,返回的是jQuery对象?
      答:从jQuery的源代码中,我们可以知道:var $ = jQuery.因此当我们$(selector)操作时,其实就是jQuery(selector),创建的是一个jQuery对象.当然正确的写法应该是这样的:var jq = new $(selector);而jQuery使用了一个小技巧在外部避免了new,在jquery方法内部:if ( window == this ) return new jQuery(selector);
2)   问:为什么创建一个jQuery对象之后,我们可以这样写$(selector).each(function(index){...});进行遍历操作呢?
      答:其实jQuery(selector)方法调用时,在jQuery(selector)方法内部,最后返回的是一个数组:return this.setArray(a);而each方法体内部是一个for循环,在循环体内是这样调用的:method.call(this[i],i).
3)   问:为什么jQuery能做到jQuery对象属性/方法/事件的插件式扩展?
      答:如果您有一些javasciprt的面向对象方面的知识,就会知道,jQuery.prototype原型对象上的扩展属性/方法和事件,将会给jQuery的对象"扩展".基于这一点,jQuery是这样写的:jQuery.fn = jQuery.prototype.所以,当我们扩展一个插件功能时,如下:
jQuery.fn.check = function() {
  return this.each(function() {
    this.checked = true;
  });
};
其实就是:
jQuery.prototype.check = function() {
  return this.each(function() {
    this.checked = true;
  });
};

      综上所述,jQuery给我们带来了一个简洁方便的编码模型(1>创建jQuery对象;2>直接使用jQuery对象的属性/方法/事件),一个强悍的dom元素查找器($),插件式编程接口(jQuery.fn),以及插件初始化的"配置"对象思想.

   附:实现自己的jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
<div id="d">divvv</div>
<div id="fsd">fdsf</div>
</body>
</html>
<script type="text/javascript">
//实现自己的MyQuery框架
var MyQuery = function(selector){
    if ( window == this ) return new MyQuery(selector);
    //这里只实现dom类型的简单查找,嘿嘿
    var doms = document.getElementsByTagName(selector);
    var arr = [];
    for(var i=0; i<doms.length; i++){
        arr.push(doms.item(i));
    }
    return this.setArray(arr);
}
MyQuery.prototype.setArray = function( arr ) {
        this.length = 0;
        [].push.apply( this, arr );
        return this;
}
MyQuery.fn = MyQuery.prototype;
var $ = MyQuery;

//插件扩展1)each
MyQuery.fn.each = function(method){
    for(var i=0,l=this.length; i<l; i++){
        method.call(this[i],i);
    }
}
//插件扩展2)show
MyQuery.fn.show = function(){
    this.each(function(i){
        alert(i+":"+this.id+":"+this.innerHTML);
    });
}
//debugger
$("div").show();
</script>


[新闻]微软发布PC Live单机游戏客户端
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>我的Ajax Framework的架构设计思路http://www.cnblogs.com/fanrong/archive/2007/05/22/755881.html沧桑雨迢迢沧桑雨迢迢Tue, 22 May 2007 09:16:00 GMThttp://www.cnblogs.com/fanrong/archive/2007/05/22/755881.htmlhttp://www.cnblogs.com/fanrong/comments/755881.htmlhttp://www.cnblogs.com/fanrong/archive/2007/05/22/755881.html#Feedback0http://www.cnblogs.com/fanrong/comments/commentRss/755881.htmlhttp://www.cnblogs.com/fanrong/services/trackbacks/755881.html      核心思想:分层设计,组件化编程.

      客户端AJAX框架分4层:
            1)核心级:提供一套最基本的跨浏览器属性和方法.
            2)系统级:具备完整的ajax框架特点.
            3)应用级:提供丰富的UI组件库.
            4)业务级:提供针对具体业务需求而开发的UI组件库.

      核心级:以Helper模式提供跨浏览器方法/事件/对象,不对原始浏览器做任何改动.
            1>基础javascript扩展
            2>跨浏览器的window对象,DomHelper(提供跨浏览器DOM操作),EventHelper(提供跨浏览器事件机制),XMLDOM,XMLHttpRequest,CssHelper(样式操作)...
            3>一些基本UI组件:combobox,colorSelector,calendar等
         核心级框架可以被任何人使用,它只提供最基本的跨浏览器对象,不具备任何"框架性"特征,和原始的HTML和JAVASCRIPT是一个层级的.它的意义就在于"跨浏览器"!
      系统级:提供一个完善的Ajax框架,实现面向对象方式的组件封装和实现组件化编程的架构.
            1>面向对象框架
            2>运行时环境对象
            3>事件机制
            4>组件模型
            5>JSON组件
            6>网络通信组件
            7>DragDrop拖拽组件
            8>动作组件,动画组件,数据组件等..
            9>js动态加载组件
         本层实现类似vasp.net ajax Extensions,做的都是一些"基础性"的工作,完成基础架构,担没有直接可以应用的UI组件.
      应用级:提供可直接应用的与具体业务需求无关的UI组件库.
         如:grid,tree,menu,tabpanel,toolbar等...
         本层以"插件"形式提供专业的UI组件库,可以说这一层是UI级的AJAX,也是最实用的一层.本层的编码设计依赖于系统级的框架设计,实现组件的装配和拆分.
      业务级:针对具体业务需求而开发的UI组件库
         如:一个具有完整流程的类Excel操作的扩展Grid,一个从固定XML结构格式生成的Menu或Tree等.
         这一层级与具体业务需求紧密关联,这一层的应用不需要写代码,而应该封装在JAVA标签或.NET WEB控件内.应用组件的开发人员,应该只需要配置几个属性,提供一个符合需要的数据源对象即可使用此层的组件.
      
      组件化架构:借鉴微软的asp.net ajax的OO框架和组件化框架.
         1>组件之间的分离与组合.依靠接口和抽象基类进行分离设计,实现关键功能部件的颗粒化细分.分离和组件,这事两大设计要点!
         2>组件的逻辑功能与界面特效功能的分离与绑定.如将基础UI控件,动作组件,动画组件等进行分离和绑定.
         3>组件的基础样式和可扩展样式的分离.必须将一个UI组件的基本base样式和可扩展ext样式进行分离设计,而不要耦合在一起,让其他应用者难以进行样式修改和皮肤扩展(YUI-EXT就是这样的情况).

   实现以上不同层级的框架开发之后,可以应用在任何软件平台上,设计RIA的UI控件,如java的标签,.net的web control等...



[新闻]Firefox遭“独家”恶意软件攻击
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>jQuery学习资源http://www.cnblogs.com/fanrong/archive/2007/05/22/755821.html沧桑雨迢迢沧桑雨迢迢Tue, 22 May 2007 08:34:00 GMThttp://www.cnblogs.com/fanrong/archive/2007/05/22/755821.htmlhttp://www.cnblogs.com/fanrong/comments/755821.htmlhttp://www.cnblogs.com/fanrong/archive/2007/05/22/755821.html#Feedback1http://www.cnblogs.com/fanrong/comments/commentRss/755821.htmlhttp://www.cnblogs.com/fanrong/services/trackbacks/755821.html jQuery官方主页:http://jquery.com
      jQuery中文入门指南:http://www.k99k.com/jQuery_getting_started.html
      jQuery使用手册:http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html
      jQuery UI插件演示:http://interface.eyecon.ro/demos
      jQuery插件:http://docs.jquery.com/Plugins
      jQuery API 中文版:http://jquery.org.cn/api/cn/index.xml
      jQuery 中文官方论坛:http://bbs.jquery.org.cn/
      

[新闻]Firefox遭“独家”恶意软件攻击
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>asp.net ajax的事件机制小议http://www.cnblogs.com/fanrong/archive/2007/04/27/729875.html沧桑雨迢迢沧桑雨迢迢Fri, 27 Apr 2007 07:30:00 GMThttp://www.cnblogs.com/fanrong/archive/2007/04/27/729875.htmlhttp://www.cnblogs.com/fanrong/comments/729875.htmlhttp://www.cnblogs.com/fanrong/archive/2007/04/27/729875.html#Feedback4http://www.cnblogs.com/fanrong/comments/commentRss/729875.htmlhttp://www.cnblogs.com/fanrong/services/trackbacks/729875.html      举一个简单的使用示例:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <div>
        <input id="Button1" type="button" value="button" />
        <input id="txt1" type="text" />
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
function pageLoad(){
    $addHandler(document,"click",function(e){
        alert(e.clientX+":"+e.clientY);
    });
    
    $addHandler($get("Button1"),"click",function(e){
        alert($get("txt1").value);
        e.stopPropagation();
    });
}
</script>

      可以看见,通过$addHandler对一个DOM元素进行事件监听时,事件处理方法会传递进来一个默认的e参数,这一点和IE的全局的event对象的做法不同,而更符合标准的做法.
      注意,这个e参数就是事件对象,而且是一个跨浏览器的事件对象,它具有如:target,clientX,clientY,keyCode,type...等常用的属性.
      此外,这个DOM事件e对象,有两个比较重要的方法:preventDefault(阻止浏览器DOM元素的默认行为),stopPropagation(阻止DOM事件的冒泡传递).利用这两个方法,可以实现一些特别的需