28 2010

CSS Hacks

对于前端开发人员而言,一个主要的任务就要是解决网页在不同浏览器下显示不一致的问题。有些时候,为了能够在各种主流浏览器下实现理想的页面布局, 往往就会利用浏览器的漏洞(其实是不同浏览器解析差异),采用一些特殊的样式属性(例如_height或-height就只会对IE6及以下版本浏览器起 作用),这就是平时所说的CSS Hacks. 但是Hacks方式会引发潜在兼容问题,应尽量避免。

下面介绍常用的几个CSS Hack方式:

1、_property: value and -property: value
仅作用于IE6及以下
2、*property: value
仅作用于IE7及以下
3、!important
IE6及以下版本浏览器,对!important标识符存在这样一个问题,在样式声明区域中,相同的属性如果再次被声明,前面的!important作用 的属性就会被忽略。!important往往被用来赋予IE6及以下版本浏览器特殊的属性值。

下面是区别不同浏览器的写法:

css_hack

参考:


27 2009

web开发工具大集合

英文原文:Collection of Web Developer Tools, per Browser
中文翻译:译言-Collection of Web Developer Tools for major browsers


22 2009

jsp:include与include伪指令的区别

Jsp中两种包含页面的方式,静态包含与动态包含:

<%@ include file=”content.jsp”  %>

<jsp:include page=”content.jsp”></jsp:include>

  1. 静态包含(include伪指令):不会检查文件的变化,适合包含静态页面。在编译Servlet的时候,将两个页面融合到一个Servlet里。
  2. 动态包含(jsp:include):总是会检查文件中变化。生成两个Servlet文件,请求执行时,由Servlet相关对象去调用被包含页面对应的Servlet,JspRuntimeLibrary.include(request, response, “content.jsp”, out, false);

19 2009

Ext 学习资源总结

Ext官网:http://www.extjs.com/

Ext API Document:http://www.extjs.com/docs

Ext Samples:http://extjs.com/deploy/dev/examples/samples.html

Ext官方教程:http://extjs.com/learn/Tutorials 大部分提供了中文支持

一起Ext:http://www.17ext.com/ 国内比较不错的Ext讨论社区

两个不错的Ext系统源码:开源网络硬盘系统图书管理系统


17 2009

Ext.ux.UploadDialog 显示问题

Ext.ux.UploadDialog是一个基于ExtJS2.0开发的文件上传控件。在Ext2.0版本下会出现底部按钮显示不全的情况,换成Ext2.2就OK了。

Ext.ux.UploadDialog官方:http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php


16 2009

Extjs DateField在firefox下显示过长的问题

在页面中加入如下CSS代码即可:

1
2
3
4
.x-date-middle {
  	padding-top:2px;padding-bottom:2px;
	width:130px; /* FF3 */
}

8 2009

Ext xtype罗列

Ext2.0对框架进行了非常大的重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件,Ext组件是由 Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。


组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件。
基本组件有:

xtype            Class
————-    ——————
box              Ext.BoxComponent  具有边框属性的组件
button           Ext.Button  按钮
colorpalette     Ext.ColorPalette 调色板
component        Ext.Component 组件
container        Ext.Container 容器
cycle            Ext.CycleButton
dataview         Ext.DataView 数据显示视图
datepicker       Ext.DatePicker 日期选择面板
editor           Ext.Editor 编辑器
editorgrid       Ext.grid.EditorGridPanel 可编辑的表格
grid             Ext.grid.GridPanel 表格
paging           Ext.PagingToolbar 工具栏中的间隔
panel            Ext.Panel 面板
progress         Ext.ProgressBar 进度条
splitbutton      Ext.SplitButton 可分裂的按钮
tabpanel         Ext.TabPanel 选项面板
treepanel        Ext.tree.TreePanel 树
viewport         Ext.ViewPort 视图
window           Ext.Window 窗口

工具栏组件有
—————————————
toolbar          Ext.Toolbar 工具栏
tbbutton         Ext.Toolbar.Button 按钮
tbfill           Ext.Toolbar.Fill 文件
tbitem           Ext.Toolbar.Item 工具条项目
tbseparator      Ext.Toolbar.Separator 工具栏分隔符
tbspacer         Ext.Toolbar.Spacer 工具栏空白
tbsplit          Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext           Ext.Toolbar.TextItem 工具栏文本项

表单及字段组件包含:
—————————————
form             Ext.FormPanel Form面板
checkbox         Ext.form.Checkbox checkbox录入框
combo            Ext.form.ComboBox combo选择项
datefield        Ext.form.DateField 日期选择项
field            Ext.form.Field 表单字段
fieldset         Ext.form.FieldSet 表单字段组
hidden           Ext.form.Hidden 表单隐藏域
htmleditor       Ext.form.HtmlEditor html编辑器
numberfield      Ext.form.NumberField 数字编辑器
radio            Ext.form.Radio 单选按钮
textarea         Ext.form.TextArea 区域文本框
textfield        Ext.form.TextField 表单文本框
timefield        Ext.form.TimeField 时间录入项
trigger          Ext.form.TriggerField 触发录入项

可用的vtype列表:
alpha,alphanum,email,url


8 2009

Ext TabPanel不显示

今天遇到一个奇怪的问题,TabPanel的子面板怎么样都不显示,只要一改变窗体大小就显示了。其实只要设置TabPanel的属性 layoutOnTabChange:true 就可以了。


6 2009

使用Json进行数据传输

掌握 Ajax,第 10 部分: 使用 JSON 进行数据传输:http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/


5 2009

ExtJS s.gif问题

用调试ExtJS的时候,会发现浏览器总会去ExtJS官网去请求s.gif文件,具体URL是:http://extjs.com/s.gif  如果连接不上ExtJS.com网站界面就会出现显示问题。解决这个问题很简单:在执行Ext.onReady()方法之前,执行下面这行代码就可以了。

Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif";