随笔 - 281  文章 - 26 评论 - 39 trackbacks - 0

slf4j简介

     准确的说,slf4j并不是一种具体的日志系统,而是一个用户日志系统的facade,允许用户在部署最终应用时方便的变更其日志系统。

使用方式:

       在系统开发中,统一按照slf4j的API进行开发,在部署时,选择不同的日志系统包,即可自动转换到不同的日志系统上。比如: 选择JDK自带的日志系统,则只需要将slf4j-api-1.5.10.jar和slf4j-jdk14-1.5.10.jar放置到 classpath中即可,如果中途无法忍受JDK自带的日志系统了,想换成log4j的日志系统,仅需要用slf4j- log4j12-1.5.10.jar替换slf4j-jdk14-1.5.10.jar即可(当然也需要log4j的jar及配置文件)

使用场景:

        我们开发的是类库或者嵌入式组件,可以考虑使用slf4j,因为我们并不能决定用户选择哪种日志系统(不同软件开发公司会钟情 于不同的日志系统);但是如果我们开发独立应用,面向的是最终客户,则无需考虑slf4j,因为最终客户只关心功能实现,不会在意开发公司具体使用什么日 志系统的。

应用举例

        我们先举个实际例子,让大家有个直观认识,建立一个简单测试类,如下:
  1. package chb.test.slf4j;  
  2. import org.slf4j.Logger;  
  3. import org.slf4j.LoggerFactory;  
  4. /** 
  5.  * @author chb 
  6.  * 
  7.  */  
  8. public class TestSlf4j {  
  9.         Logger log = LoggerFactory.getLogger(TestSlf4j.class);  
  10.           
  11.         public void testLog(){  
  12.                 log.info("this is a test log");  
  13.         }  
  14.         /** 
  15.          * @param args 
  16.          */  
  17.         public static void main(String[] args) {  
  18.                 TestSlf4j slf = new TestSlf4j();  
  19.                 slf.testLog();  
  20.         }  
  21. }  
 
1>JDK自带的log输出
       首先,我们在classpath中加入slf4j-api-1.5.10.jar和slf4j-jdk14-1.5.10.jar两个包,然后运行main函数,输出信息如下:
  1. 2010-1-5 21:44:47 chb.test.slf4j.TestSlf4j testLog  
  2. 信息: this is a test log  
 
 2>slg4j提供的simple log
      然后,我们用slf4j-simple-1.5.10.jar替换slf4j-jdk14-1.5.10.jar,选择使用slf4j提供的simple log,输出信息如下:
  1. 0 [main] INFO chb.test.slf4j.TestSlf4j - this is a test log  
 
 3>log4j日志输出
    再然后,我们再用slf4j-log4j12-1.5.10.jar替换slf4j-simple-1.5.10.jar(记得classpath也需要增加log4j依赖jar包),同时增加一个log4j.properties文件,内容如下:
  1. log4j.debug=true  
  2. log4j.rootLogger=DEBUG,stdout  
  3. log4j.appender.stdout=org.apache.log4j.ConsoleAppender  
  4. log4j.appender.stdout.Target=System.out  
  5. log4j.appender.stdout.layout=org.apache.log4j.PatternLayout  
  6. log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p - %m%n  
 
 我们再稍微修改一下main函数,加载一下log4j.properties,如;
  1. public static void main(String[] args) {  
  2.         System.setProperty("log4j.configuration", "log4j.properties");  
  3.         TestSlf4j slf = new TestSlf4j();  
  4.         slf.testLog();  
  5. }  
 
运行main函数,输出结果如下:
  1. log4j: Parsing for [root] with value=[DEBUG,stdout].  
  2. log4j: Level token is [DEBUG].  
  3. log4j: Category root set to DEBUG  
  4. log4j: Parsing appender named "stdout".  
  5. log4j: Parsing layout options for "stdout".  
  6. log4j: Setting property [conversionPattern] to [%d{ABSOLUTE} %5p - %m%n  ].  
  7. log4j: End of parsing for "stdout".  
  8. log4j: Setting property [target] to [System.out].  
  9. log4j: Parsed "stdout" options.  
  10. log4j: Finished configuring.  
  11. 22:01:40,831  INFO - this is a test log  
 
 原理介绍--静态绑定
        大家看到要使用哪种日志系统,只需要将对应的日志系统所需要的jar包文件(包括slf4j提供的jar包和日志系统自身依赖 的jar包,例如:slf4j-log4j12-1.5.10.jar和log4j.1.2.jar)放入classpath即可,slf4j可以自动探 测具体使用哪种日志系统,这种技术被称为静态绑定。
       在实际使用中,我们通过LoggerFactory.getLogger()获得logger,查看LoggerFactory的源代码会发现如下两点,
    这里就有一个问题了,slf4j是如何将自己的通用日志格式转成不同的日志系统的格式的呢?
    我们再分析每个日志系统相关的源代码,会发现不同日志系统包都会有一个Adapter,用来在slf4j和不同日志系统之间做转换。
 
   下面是LoggerFactory.java的源代码,大家可以参考一下,为了理解方便,我已经将代码顺序做了调整:
  1. /** 
  2.  * Return a logger named corresponding to the class passed as parameter, using 
  3.  * the statically bound {@link ILoggerFactory} instance. 
  4.  *  
  5.  * @param clazz 
  6.  *          the returned logger will be named after clazz 
  7.  * @return logger 
  8.  */  
  9. public static Logger getLogger(Class clazz) {  
  10.   return getLogger(clazz.getName());  
  11. }  
  12.   
  13.   
  14. public static Logger getLogger(String name) {  
  15.   ILoggerFactory iLoggerFactory = getILoggerFactory();  
  16.   return iLoggerFactory.getLogger(name);  
  17. }  
  18.   
  19. /** 
  20.  * Return the {@link ILoggerFactory} instance in use. 
  21.  *  
  22.  * <p> 
  23.  * ILoggerFactory instance is bound with this class at compile time. 
  24.  *  
  25.  * @return the ILoggerFactory instance in use 
  26.  */  
  27. public static ILoggerFactory getILoggerFactory() {  
  28.   if (INITIALIZATION_STATE == UNINITIALIZED) {  
  29.     INITIALIZATION_STATE = ONGOING_INITILIZATION;  
  30.     performInitialization();  
  31.   }  
  32.   switch (INITIALIZATION_STATE) {  
  33.   case SUCCESSFUL_INITILIZATION:  
  34.     return getSingleton().getLoggerFactory();  
  35.   case FAILED_INITILIZATION:  
  36.     throw new IllegalStateException(UNSUCCESSFUL_INIT_MSG);  
  37.   case ONGOING_INITILIZATION:  
  38.     // support re-entrant behavior.  
  39.     // See also http://bugzilla.slf4j.org/show_bug.cgi?id=106  
  40.     return TEMP_FACTORY;  
  41.   }  
  42.   throw new IllegalStateException("Unreachable code");  
  43. }  
  44.   
  45.   
  46. private final static void performInitialization() {  
  47.   bind();  
  48.   versionSanityCheck();  
  49.   singleImplementationSanityCheck();  
  50. }  
  51.   
  52. private final static void bind() {  
  53.   try {  
  54.     // the next line does the binding  
  55.     getSingleton();  
  56.     INITIALIZATION_STATE = SUCCESSFUL_INITILIZATION;  
  57.     emitSubstituteLoggerWarning();  
  58.   } catch (NoClassDefFoundError ncde) {  
  59.     INITIALIZATION_STATE = FAILED_INITILIZATION;  
  60.     String msg = ncde.getMessage();  
  61.     if (msg != null && msg.indexOf("org/slf4j/impl/StaticLoggerBinder") != -1) {  
  62.       Util  
  63.           .reportFailure("Failed to load class \"org.slf4j.impl.StaticLoggerBinder\".");  
  64.       Util.reportFailure("See " + NO_STATICLOGGERBINDER_URL  
  65.           + " for further details.");  
  66.     }  
  67.     throw ncde;  
  68.   } catch (Exception e) {  
  69.     INITIALIZATION_STATE = FAILED_INITILIZATION;  
  70.     // we should never get here  
  71.     Util.reportFailure("Failed to instantiate logger ["  
  72.         + getSingleton().getLoggerFactoryClassStr() + "]", e);  
  73.   }  
  74. }  
  75.   
  76.   
  77. private final static StaticLoggerBinder getSingleton() {  
  78.   if (GET_SINGLETON_METHOD == GET_SINGLETON_INEXISTENT) {  
  79.     return StaticLoggerBinder.getSingleton();  
  80.   }  
  81.   if (GET_SINGLETON_METHOD == GET_SINGLETON_EXISTS) {  
  82.     return StaticLoggerBinder.getSingleton();  
  83.   }  
  84.   try {  
  85.     StaticLoggerBinder singleton = StaticLoggerBinder.getSingleton();  
  86.     GET_SINGLETON_METHOD = GET_SINGLETON_EXISTS;  
  87.     return singleton;  
  88.   } catch (NoSuchMethodError nsme) {  
  89.     GET_SINGLETON_METHOD = GET_SINGLETON_INEXISTENT;  
  90.     return StaticLoggerBinder.getSingleton();  
  91.   }  
  92. }  

posted @ 2010-06-04 14:54 阿C's 阅读(178) 评论(0) 编辑
jBPM与jPDL简介

关于jBPM

jBPM,全称是Java Business Process Management,是一种基于J2EE的轻量级工作流管理系统。jBPM是公开源代码项目,它使用要遵循 Apache License。jBPM在2004年10月18日,发布了2.0版本,并在同一天加入了JBoss,成为了JBoss企业中间件平台的一个组成部分,它 的名称也改成JBoss jBPM。随着jBPM加入JBoss组织,jBPM也将进入一个全新的发展时代,它的前景是十分光明的。

jBPM最大的特色就是它的商务逻辑定义没有采用目前的一些规范,如WfMC&acute;s XPDL, BPML, ebXML, BPEL4WS等,而是采用了它自己定义的JBoss jBPM Process Definition Language (jPDL)。jPDL认为一个商务流程可以被看作是一个UML状态图。jPDL就是详细定义了这个状态图的每个部分,如起始、结束状态,状态之间的转换 等。

jBPM的另一个特色是它使用Hibernate来管理它的数据库。Hibernate是目前Java领域最好的一种数据持久层解决方案。通过Hibernate,jBPM将数据的管理职能分离出去,自己专注于商务逻辑的处理。

关于jPDL

jPDL(JBoss jBPM Process Definition Language)是构建于jBPM框架上的流程语言之一。在jPDL中提供了任务(tasks)、待处理状态 (wait states)、计时器(timers)、自动处理(automated actions)…等术语,并通过图型化的流程定义,很直观地描述业务流程。

jPDL可以部署于Java语言的任何应用环境下,JavaSE Application(Swing/SWT)、JavaEE Application(Application Server) 。

jPDL分发包的组成

目前jPDL的最新版本是3.2.3,通过http://labs.jboss.com/jbossjbpm/jpdl_downloads/可以获得官方下载包。下载包分为两种,一种是标准包(jbpm-jpdl-3.2.3.zip);一种是套件包(jbpm-jpdl-suite-3.2.3.zip)。两者最大的区别是套装包自带一个已经配置好的jboss服务,下载解压缩后,可直接运行。

(1)jPDL的核心程序包(jbpm-jpdl.jar)

它是一个典型的jar文件,它涵盖对流程定义和运行时流程实例上下文环境的操作API。在最简化的业务流程样例中,jPDL将流程定义存储与XML 格式的定义文件中,在运行时载入内存,在内存里记录完整的业务实例和执行过程的环境变量,并完成全部操作。显然,在实际应用中,流程信息必须被持久化的存 储于数据库中。jPDL使用了Hibernate作为其对象持久化的API。

(2)Graphical Process Designer插件(jbpm-jpdl-designer-3.1.2.zip)

它是一个基于Eclipse的图型编辑插件。使用它可以对业务流程进行可视化的定制,而无须手动编辑XML文件。该插件还提供了流程定义上传功能,可以将新定义的流程发布到在线运行的jPDL系统上。

(3)jPDL身份包(jbpm-identity.jar)

它是jPDL的一个轻量级扩展包,简单实现了组Group、用户User、许可权Permission等用户身份认证和鉴权机制。如果您的应用环境只需要简单的用户认证鉴权管理,那么它十分适合您。

(4)jPDL Web控制台(jbpm-console.war)

它是一个标准Web应用(使用了JSF技术),提供了对jPDL平台执行情况的监控程序(对jPDL数据库的监控)。管理员可以通过该程序方便的维 护jPDL的数据库,管理流程定义和流程实例的执行情况。同时,它还提供了一个简单的Getting started DEMO,方便初学者了解jPDL。

jbpm-jpdl-suite-3.2.3.zip压缩包组成

在解压jbpm-jpdl-suite-3.2.3.zip后,会看到很多目录,如下所示:

(1)config目录

该目录存放了jPDL的默认配置文件 ,包括hibernate.cfg.xml 、jbpm.cfg.xml(jPDL的主配置文件,默认是空的)、jbpm.mail.templates.xml(邮件模板配置文件)、 log4j.properties(日志配置文件)

(2)db目录

该目录存放了jPDL针对不同数据库的表初始化sql文件。这里要说的是,jbpm.jpdl.mysql.sql在MySql下批量运行时,会出现错误提示,原因是语句后缺少”;”号,需要修订后才能使用。

(3)designer目录

该目录存放了GPD(Graphical Process Designer)插件。

(4)examples目录

该目录存放了jPDL的简单范例。

(5)doc目录

该目录存放jPDL 的相关说明文档,包括用户指南、Java API文档等。

(6)server目录

该目录存放了配置好的jBoss和控制台程序,Windows下双击start.bat可立即执行。数据库使用HSQL,存放于/server/server/jbpm/data下。

(7)src目录

该目录下存放的是源代码,可以通过查看代码来了解其具体实现,有助于增强理解。

(8)deploy目录

该目录下面包含3个war包:jbpm-console.war、jbpm-enterprise.ear、jbpm-mail.war。

(9)lib目录

该目录中存放了支持的jar包。

参考资料

http://baike.baidu.com/view/1087511.html

http://linliangyi2007.javaeye.com/blog/176340

posted @ 2010-05-25 15:04 阿C's 阅读(117) 评论(0) 编辑

 

一、全文搜索(Lecene框架)

二、缓存(实现页面级的URL缓存)

三、生成静态文件(比如说,一个首页可能会员由多个部分组成,每个模块生成一个静态文件,然后才用服务器端包含SSI技术进行组装,其默认的后缀是.shtml)

四、静态文件分布存储于独立的服务器(CSS,JS,图片,文件等,用一个Apache服务器来处理请求)

五、分布式开发(各服务器间的数据同步,像www.sina.com网一样发区域的服务器数据的同步;便于使用服务器的集成,服务器可分为:WEB服务器、Session服务器、数据库服务器、静态文件服务器等等,一个WEB服务就可能由几十台机器集成后共同提供服务,负载均衡器的使用)

六、数据库的拆分(数据库表的拆分和数据库表字段的拆分)

七、搜索引擎优化(SEO)

八、访问监控(JMS)

九、单元测试,高并发访问测试

十、开发文档的制作(E-R图,类关系图,需求说明书,详细设计说明书,数据字典等)

十一、动态部署(Ant等工具的使用)

十二、表单提交验证(客户端验证和服务器端验证,有一点要注意和说明的是:通过服务器端验证失败后,要返回到客户表单提交前的页,并把客户提交前输入所有的信息显示出来,提示客户出错的地方以便其进行修改。最好是可以定义一些全局的验证规则,如果E-mail的验证)

十三、AJAX异步调用技术的使用(遮罩层的使用,应用于部分数据的验证如果登录名,加载等待信息的提示)

十四、各项数据的备份(有独立的备份服务器,做到数据的同步备份)

posted @ 2010-05-12 08:50 阿C's 阅读(37) 评论(0) 编辑
CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)

 

html代码:
<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p>
</div>

css代码:
div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}

/* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

}

/* FF 下的样式 */
p{clear:both;}
p span{
float:left;
max-width:175px;   /*IE不能解释该属性,而FF可以*/
}
p:after{
content:"...";
}

================================================
以下是详细过程,想继续学习的请往下看,不想学的请直接用上面的结果就可以了。
--------------------------------------------------------------
学习篇:

今天有朋友在52css.com的留言板提出一个问题:为什么 text-overflow:ellipsis的时候没有任何效果呀?text-overflow是一个比较特殊的属性,在CSS手册中,这个属性是这样定义的:

  语法:
  text-overflow : clip | ellipsis

  参数:
  clip :  不显示省略标记(...),而是简单的裁切
  (clip这个参数是不常用的!)
  ellipsis :  当对象内文本溢出时显示省略标记(...)

  说明:
  设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
  请您注意,text-overflow:ellipsis属性在FF中是没有效果的。

  示例:
  div { text-overflow : clip; }

  text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50 个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text- overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。

  关于text-overflow属性如何应用,我们作如下的说明讲解:

  text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。

我们首页建立了一个无序列表UL,里面有几个列表项LI,内部建立了列表链接A。我们的测试主要在LI在进行,请注意观察,看如下的三段代码:
一、仅定义text-overflow:ellipsis; 不能实现省略号效果
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">CSS实战精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/">CSS实战:id是狙击枪 class是双刃剑 合则两利分则两败</a>
<li><a href="http://www.52css.com/">CSS布局实例:CSS标签切换代码实例教程</a>
<li><a href="http://www.52css.com/">Web标准:改变您的网页制作思维方式 节省代码及结构与表现分离</a>
<li><a href="http://www.52css.com/">解决IE7以下版本不支持无A状态伪类的几种方法!</a>
<li><a href="http://www.52css.com/">CSS去除表格td默认间距及制作1px细线表格 </a>
</ul>
</body>
</html>
二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px;
text-overflow:ellipsis; white-space:nowrap;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">CSS实战精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/">CSS实战:id是狙击枪 class是双刃剑 合则两利分则两败</a>
<li><a href="http://www.52css.com/">CSS布局实例:CSS标签切换代码实例教程</a>
<li><a href="http://www.52css.com/">Web标准:改变您的网页制作思维方式 节省代码及结构与表现分离</a>
<li><a href="http://www.52css.com/">解决IE7以下版本不支持无A状态伪类的几种方法!</a>
<li><a href="http://www.52css.com/">CSS去除表格td默认间距及制作1px细线表格 </a>
</ul>
</body>
</html>
 三、按52css.com的教程,即本文所讲的方法,同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果:
不过请注意此方法适用与IE与OP浏览器,FF不适用!
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">CSS实战精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/">CSS实战:id是狙击枪 class是双刃剑 合则两利分则两败</a>
<li><a href="http://www.52css.com/">CSS布局实例:CSS标签切换代码实例教程</a>
<li><a href="http://www.52css.com/">Web标准:改变您的网页制作思维方式 节省代码及结构与表现分离</a>
<li><a href="http://www.52css.com/">解决IE7以下版本不支持无A状态伪类的几种方法!</a>
<li><a href="http://www.52css.com/">CSS去除表格td默认间距及制作1px细线表格 </a>
</ul>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------


实际解决问题篇:

(可能还不是很完美,仅供大家参考。)
  单行文本的控制,以前是由程序员完成的,实现截字效果。
  在52css.com以前的文字中,也介绍过,通过CSS也实现这样的效果:
  如何设置列表(li)超出部分显示省略号?
  http://www.52css.com/article.asp?id=148
  CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
  http://www.52css.com/article.asp?id=602上面所写的学习篇就是以上两个连接的内容
  上面的两种方法是以前介绍给大家的。它们存在着一定的局限,只能对IE起效果,而在FF下时无效的。

  在FF下面,是直接截断文字,不会加上“…”。今天介绍的方法兼容IE FF,看下面的详细介绍:

  为了更符合实际,我用一个div装起要调试的内容,并为这个div定义一个宽度。
  例如:
css代码:
div{width:200px;}

html代码:
<div>
<span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span>
</div>

 在IE中实现是非常简单的,CSS 如下:

Example Source Code [www.52css.com]
span {
display:block;
width:200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

}

  但在FF中用上面的样式是实现不了的,因为text-overflow: ellipsis;是IE中特有的(非CSS标准)。现在在FF下看到的仅仅只是把溢出的内容切除了,说到"溢出切除",这下说到点子上了,在FF中实现就要用到非常规的方法:一个标签作切除内容,再加一个标签作填补省略号用,并且加起来的长度就能超过容器的宽度,本例指的就是DIV的宽度200px,实现的想法就是这样。

    那么继续进一试验,关于切除内容,这个已经基本上解决了,那就来说补省略号,不用JS,用CSS实现的话就要用到伪对象after,伪对象不懂的就要先去温故或百度一下。先从HTML下手,为span标签外再加一层p标签(当然你也可以加其它标签的)

Example Source Code [www.52css.com]
html代码:
<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p>
</div>

  我们再为这个P标签加样式。

Example Source Code [www.52css.com]
CSS:
p:after{
content:"...";
}

  这样还不行,因为省略号是有宽度的,这样省略号就跳到一下行了,下面要做的就是让span 加省略号的宽度不大于容器宽度(准确的说是相等),并且让省略号紧跟内容的内容,下面就是解决上面这些问题的CSS样式:

Example Source Code [www.52css.com]
p{clear:both;}
p span{
float:left;
max-width:175px;

}
p:after{
content:"...";
}

  这里还要补充的一点是关于p span 的宽度用了"max-width"这个属性,IE不能解释该属性,而FF可以,这样就避开了IE对SPAN宽度的重新应用。上面说得有乱,归纳如下:

Example Source Code [www.52css.com]
html代码:
<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p>
</div>

css代码:
div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}

/* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

}

/* FF 下的样式 */
p{clear:both;}
p span{
float:left;
max-width:175px;   /*IE不能解释该属性,而FF可以*/
}
p:after{
content:"...";
}
posted @ 2010-05-10 18:14 阿C's 阅读(108) 评论(0) 编辑

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>鼠标拖拽</title>
  <script type="text/javascript">
   function Drag(o, e){
    var e = window.event || e;
    var _x = e.offsetX || e.layerX;
    var _y = e.offsetY || e.layerY;
    o.style.filter = 'Alpha(opacity=70)';
    o.style.opacity = '0.7';
    document.onmousemove = function(e){
     var e = window.event || e;
     alert(_x + ", " + _y + "\r\n" + e.clientX + ", " + e.clientY + "\r\n" + e.offsetX + ", " + e.offsetY);
     o.style.left = e.clientX - _x + 'px';
     o.style.top = e.clientY - _y + 'px';
     o.style.cursor="move";
    }
    document.onmouseup = function(e){
     document.onmousemove = null;
     o.style.filter = o.style.opacity = '';
     o.style.cursor="default";
    }
   }
  </script>
 </head>
 <body>
  <div onmousedown="Drag(this, event)"
   style="position: absolute; border: 1px solid red; background: pink; width: 400px; height: 300px;"></div>
 </body>
</html>
绿色字体处: _x, _y已经形成闭包, 是不会变的, 值为最初始鼠标相对其DIV原点(0,0)的距离

蓝色字体处: e.clientX, e.clientY为鼠标相对屏幕的原点(0,0)的距离

粉色字体处: document.onmouseup和document.onmousemove这两个事件被设定在drag事件中才产生,这样的好处是在其他情况下不会产生拖放的效果

红色字体处: document.onmousemove在onmouseup事件中清除是为了善后工作, 这点要注意

posted @ 2010-04-16 09:30 阿C's 阅读(56) 评论(0) 编辑
摘要: <script>varnow=newDate();//当前日期varnowDayOfWeek=now.getDay();//今天本周的第几天varnowDay=now.getDate();//当前日varnowMonth=now.getMonth();//当前月varnowYear=now.getYear();//当前年nowYear+=(nowYear<2000)?1900:0...阅读全文
posted @ 2010-04-07 17:34 阿C's 阅读(101) 评论(0) 编辑
摘要: Java代码 packagerong.propertyUtils;importjava.util.Map;importorg.apache.commons.beanutils.MethodUtils;importorg.apache.commons.beanutils.PropertyUtils;publicclassTestPropertyUtils{publicstaticvoidmain(S...阅读全文
posted @ 2010-04-02 11:05 阿C's 阅读(878) 评论(0) 编辑
摘要: 为了解答“正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?”这个问题,也为了能够便于大家对正则表达式有一个更为综合和深刻的认识,我将一些关键点和容易犯糊涂的地方再系统总结一下。 总结1:附件参数g的用法 表达式加上参数g之后,表明可以进行全局匹配,注意这里“可以”的含义。我们详细叙述: 1)对于表达式对象的exec方法,不加入g,则只返...阅读全文
posted @ 2010-03-30 09:21 阿C's 阅读(52) 评论(0) 编辑
摘要: 相信大多数朋友都是iframe木马的受害者,有朋友的网站被注入了n回iframe,心情可想而知。而且现在ARP攻击,注入iframe也是轻而易举的事,仅局域网里都时刻面临威胁,哎,什么世道。接近年关,为了防止更多的朋友受到攻击,于是细细说下。 灵儿曾经在经典论坛上发过贴子:《一行代码解决网站防挂IFRAME木马方案》,有不少朋友都联系了灵儿,有的表示感谢,不过更多的是疑问了,今天把原理细细地讲一下...阅读全文
posted @ 2010-03-19 11:11 阿C's 阅读(152) 评论(0) 编辑
摘要: IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和 Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员...阅读全文
posted @ 2010-03-19 11:01 阿C's 阅读(37) 评论(0) 编辑
仅列出标题  下一页