BlogJava-紫蝶∏飛揚↗-文章分类-目录

BlogJava-紫蝶∏飛揚↗-文章分类-目录http://www.blogjava.net/algz/category/39537.html我的QQ群:7101519 专注于前端设计(偏重于程序)的开发zh-cnWed, 11 Nov 2009 14:36:54 GMTWed, 11 Nov 2009 14:36:54 GMT60CSS 页面学习20091016(ul 行框块框标签选择 ul,dl在浏览器中的默认值,浮动框的自适应宽度和单元格里直接放内容,重设浏览器默认值)http://www.blogjava.net/algz/articles/297900.html紫蝶∏飛揚↗紫蝶∏飛揚↗Mon, 12 Oct 2009 07:29:00 GMThttp://www.blogjava.net/algz/articles/297900.htmlhttp://www.blogjava.net/algz/comments/297900.htmlhttp://www.blogjava.net/algz/articles/297900.html#Feedback0http://www.blogjava.net/algz/comments/commentRss/297900.htmlhttp://www.blogjava.net/algz/services/trackbacks/297900.html .top{position:fixed;left:0;top:0} //posistion属性需用left,top指定方位(连用)

二.标签符的选择
多行多列用<table>,单行多列用<p style="float:left;">(一般用于标题.即行选择符,另有<span>),多行单列用UL列表(或DL),
文字环绕用<dl>(<div style="width:(定义长点的宽度给环绕留出空间)px;"><dt style="float:left;"><img /></dt><dd>环绕dt<dd>)

三.行框:元素在一行里按列一列一列显示
<a>,<img>,<span>

四.块框（display:block):元素按行一行一行显示
<p>,<div>,<ul>,<li>,<dl>,<dt>

五.列表项<ul>三个属性
值描述
list-style-type 设置列表项标记的类型。
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。

值描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

值描述
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。

值描述
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。

六 firefox ie 浏览器默认值(1em=16px) （为了解决浏览器默认值不为0，一般在页面设计时指定内外边距为0。）
h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,p{margin:0;padding:0}
（1）

ul{padding-left:40px;margin:1em 0;}   /* ul 标签上下外间距为16px;左内间距为40px; */
p,dl{margin:1em 0;}                           /* p,dl 标签上下外间距为16px; */
dd{margin-left:40px;}                         /* dd 标签左外间距为40px; */
firefox: ul dl,dl ul,.....{margin-top:0;margin-bottom:0;} /* 列表嵌套，IE中列表嵌套不设置此属性，依然是margin:1em 0; */

（2）IE中任何元素最小高度规定为19px，不可更改。解决方法：设置高度为19px以下的元素需指定overflow:hidden属性。

七浮动框的自适应宽度和单元格里直接放内容
（1）浮动则自适应内部标签最大宽度
（2）不浮动则自适应父标签宽度
（3）<td>里直接放内容，不用放块元素<p>等， <td>类似于块框，display：table-cell；

八 <ul>，<dl> 列表标签一般不设置背景图片等样式，只设置margin,padding边距属性，样式属性只在<li>，<dt>，<dd>等设置。

九 DIV+CSS表格设置及图示
http://www.blogjava.net/algz/articles/298591.html

十 IE6 IE7 绝对定位元素消失的BUG
http://www.blogjava.net/algz/articles/301959.html

紫蝶∏飛揚↗ 2009-10-12 15:29 发表评论

]]>EXTJS 学习笔记(共17项,20090924更新)http://www.blogjava.net/algz/articles/255938.html紫蝶∏飛揚↗紫蝶∏飛揚↗Sat, 21 Feb 2009 04:03:00 GMThttp://www.blogjava.net/algz/articles/255938.htmlhttp://www.blogjava.net/algz/comments/255938.htmlhttp://www.blogjava.net/algz/articles/255938.html#Feedback0http://www.blogjava.net/algz/comments/commentRss/255938.htmlhttp://www.blogjava.net/algz/services/trackbacks/255938.html目录
(1)箭头样式
 (2)treenode 自定义样式
(3)Ext.tree.TreePanel 的title,root 配置项必须指定,不然图像在IE中显示混乱; loader配置项不指定,不显示图像.
(4)Extjs 日期的使用方法(显示,接收,定义,提交)
(5)Extjs 三个主要文件错误的引用, 浏览器无法显示Extjs效果.
(6)gridpanel加态重新加载columnModel和store
(7)tabpanel判断tab页在不在
(8)panel动态加载tbar(可扩展进行延伸控制任何DIV)
(9)Extjs 扩展继承子类(Ext.extend())
(10)Ext.data.Record 类引用和赋值问题
(11)Ext.apply 无法复制 Ext.data.JsonStore 等数据源相关的类型
(12)TabPanel子窗口(如Ext.Panel等)隐藏属性closable
(13)Panel 的 tools 配置项
(14)Extjs 首页 "load..." 制作方法
(15)Extjs 漂亮的Panel折叠伸缩控件 layout:'accordion'
(16)Ext.grid.GridPanel 的columns属性和Ext.data.Store的fields属性均可为数组
(17)使用XTemplate动态加载panel等组件内容

(1)箭头样式
new Ext.tree.TreePanel({
useArrows : true,//是否使用箭头样式

         loader : new Ext.tree.TreeLoader({ url : "tree-data.json"}),
         root : new Ext.tree.AsyncTreeNode()

(2)treenode 自定义样式
json:
[{
    text:'Basic Ext Layouts',
    expanded: true,
    children:[{
        text:'Absolute', //也可以使用HTML标签
        id:'absolute',
        //icon:....   //自定义图标
        cls:"tem",   //<link rel="stylesheet" href="css/tem.css" type="text/css"></link>
        leaf:true

(3)Ext.tree.TreePanel 的title,root 配置项必须指定,不然图像在IE中显示混乱; loader配置项不指定,不显示图像.

    三个必须项: title,root ,loader
new Ext.tree.TreePanel({
           rootVisible : false,
           useArrows : true,// 是否使用箭头样式
           loader : new Ext.tree.TreeLoader({
              url : "tree-data.json"
             }),
           title : "tool1",
           root : new Ext.tree.AsyncTreeNode()
          }), {
         title : "tool2"

(4)Extjs 日期的使用方法(显示,接收,定义,提交)

http://www.blogjava.net/algz/articles/270359.html

(5)Extjs 三个主要文件错误的引用, 浏览器无法显示Extjs效果.

正确: <script type="text/javascript" src="script/ext/ext-all.js"></script>
错误: <script type="text/javascript" src="/script/ext/ext-all.js"></script>
            <script type="text/javascript" src="../script/ext/ext-all.js"></script>

(6)gridpanel加态重新加载columnModel和store
//重新绑定grid
this.grid.reconfigure(newStore, new Ext.grid.ColumnModel(cm1));
//重新绑定分页工具栏
this.pagingBar.bind(newStore);
//重新加载数据集
newStore.load({params:{start:0,limit:10}});

(7)tabpanel判断tab页在不在
           var tem=tabpanel.getItem("tabpage"); //判断tab页在不在.
            if(tem)
            Ext.Msg.alert("ok");
            else
            Ext.Msg.alert("not");

(8)panel动态加载tbar(可扩展进行延伸控制任何DIV)
var pan=new Ext.Panel({tbar:new Ext.Toolbar({})....); //定义空对象容易在PANEL加载时没加载tbar，所以会出现没有高度或隐藏起来
var t=new Ext.Toolbar({...});
document.getElementById(pan.tbar.id).innerHTML = ""; //清空panel.tbar下的所有内容
t.render(pan.tbar); //toolpanel显示到panel.tbar(div)下

(9)Extjs 扩展继承子类(Ext.extend())
var subclass=Ext.extend(XX,{   //继承Extjs类,可覆盖或添加其子类的属性或方法
xx:...,
xx:...
});
var tem=new subclass({});

(10)Ext.data.Record 类引用和赋值问题
var record=new Ext.data.Record({});
......
store.insert(0,record); //record值勤改变.store中的值也改变.
store.insert(0,record.copy); //record值改变,store中的值不变.record.copy()复制返回另一个记录.

(11)Ext.apply 无法复制 Ext.data.JsonStore 等数据源相关的类型
var store2 = new Ext.data.JsonStore({});
var store3={};
Ext.apply(store2,magazine_store); //效果无用.store2仍引用magazine_store,无法独立使用.
Ext.apply(store3,magazine_store); //效果同上.
store3=Ext.apply(store2,magazine_store); //效果同上.

(12)TabPanel子窗口(如Ext.Panel等)隐藏属性closable
TabPanel子窗口(如Ext.Panel,Ext.grid.GridPanel等)隐藏属性closable:true/false //显示/隐藏子窗口右上角的关闭按钮
注:此属性只有TabPanel子窗口才有效.

(13)Panel 的 tools 配置项
new Ext.Panel({...
tools:[{
    id:'refresh', //必选项
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){     //必须项
        // refresh logic
    }
}]
...})
API详见: http://www.blogjava.net/algz/articles/277819.html

(14)Extjs 首页 "load..." 制作方法
http://www.blogjava.net/algz/articles/277844.html

(15)Extjs 漂亮的Panel折叠伸缩控件 layout:'accordion'
http://www.blogjava.net/algz/articles/278217.html

(16)Ext.grid.GridPanel 的columns属性和Ext.data.Store的fields属性均可为数组
columns:cm    //cm=[....{...}...]    cm=new Ext.Ext.grid.ColumnModel([...])
fields:f            //f=[...] f=new Ext.data.Record.create([...])

(17)使用XTemplate动态加载panel等组件内容
//可以采用异步远程取值
var board_data = {
title : "title",
content : ""
};
//可以是任意组件
    var board_w = new Ext.Window({
       id : "board_w",
       title : "公告",
       modal : true,
             });
    // 以下方法 Ext.fly("board_w");Ext.get("board_w")都错
    tpl.overwrite(Ext.getCmp("board_w").body, data);// 更新公告内容

紫蝶∏飛揚↗ 2009-02-21 12:03 发表评论

]]>