Archive for March, 2007

Pages (2): 1 2 »

checkbox 三态切换

Mar 30, 2007 Author: | Filed under: Uncategorized

注意这次可是 IE only！

</p> <p><body></p> <input name="c0" id="c0" type="checkbox" onpropertychange="gray(this)"> <p><script></p> <p>function gray(c)</p> <p>{</p> <p>c.indeterminate = c.checked;</p> <p>}</p> <p></script></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

0 Comments

书写清爽的CSS文件

Mar 29, 2007 Author: | Filed under: Uncategorized

原文来自 Default Styles for CSS，大致内容如下：

1.注释你的代码，如

/*—————————————————–

[client] Screen Stylesheet

version: 1.0

date: 01/03/07

author: [your email]

email: [you at domain dot com]

website: [your domain]

version history: [location of file]

—————————————————*/

2.分隔不同的部分，如导入的样师表

/* Import other stylesheets

———————————*/

@import url(”typography.css”);

3.删除所有默认的样式

/* Remove padding and margin */

{

margin: 0;

padding: 0;

border: 0;

}

… 自己看原文吧，回头再写,886

0 Comments

按照ffish的方法做的，需要修改样式

Mar 27, 2007 Author: | Filed under: Uncategorized

</p> <p><script src="http://www.prototypejs.org/assets/2007/1/18/prototype.js" type="text/javascript"></script></p> <style type="text/css"> <p> #loading{</p> <p> position: absolute;</p> <p> top: 30%;</p> <p> left: 0%;</p> <p> height: 25%;</p> <p> width: 100%;</p> <p> text-align: center;</p> <p> line-height: 0;</p> <p> }</p> <p>#loadingback{</p> <p> position: absolute;</p> <p> top: 10%;</p> <p> left: 0%;</p> <p> height: 100%;</p> <p> width: 100%;</p> <p> text-align: center;</p> <p> line-height: 0;</p> <p> background-color:blue;</p> <p> opacity:.1;</p> <p> filter:alpha(opacity=10)</p> <p> }</p> </style> <p><script ></p> <p>function showSelectBoxes(){</p> <p> selects = document.getElementsByTagName("select");</p> <p> for (i = 0; i != selects.length; i++) {</p> <p> selects[i].style.visibility = “visible”;</p> <p> }</p> <p>}</p> <p>// —————————————————</p> <p>function hideSelectBoxes(){</p> <p> selects = document.getElementsByTagName(”select”);</p> <p> for (i = 0; i != selects.length; i++) {</p> <p> selects[i].style.visibility = “hidden”;</p> <p> }</p> <p>}</p> <p>function start()</p> <p>{</p> <p> //alert(’aaaa’);</p> <p> hideSelectBoxes();</p> <p> Element.show(’loadingback’);</p> <p> //Element.show(’loading’);</p> <p>}</p> <p>function end()</p> <p>{</p> <p> showSelectBoxes();</p> <p> Element.hide(’loadingback’);</p> <p>}</p> <p></script></p> <p><body></p> <div id="loadingback" style="display:none;"> <div id="loading" style=""> <p> <img src="images/loading.gif"></p> </div> </div> <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p> <p><button onclick="start()">test</button> <button onclick="end()">end test</button></p> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试<br /> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <p></body></p> <p></html></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

现在的问题是，我怎么把loadingback设置为半透明？ loading背景全透明

ffish添加: 你要的是这个效果吗?

</p> <p><script src="http://www.prototypejs.org/assets/2007/1/18/prototype.js" type="text/javascript"></script></p> <style type="text/css"> <p>#content</p> <p>{</p> <p> position:absolute;</p> <p>}</p> <p>#loadingback{</p> <p> position: relative;</p> <p> z-index:2;</p> <p> top: 0;</p> <p> left: 0;</p> <p> height: 100%;</p> <p> width: 100%;</p> <p> text-align: center;</p> <p> background-color:blue;</p> <p> opacity:.5;</p> <p> filter:alpha(opacity=50);</p> <p>}</p> <p>#loading{</p> <p> position: absolute;</p> <p> z-index:3;</p> <p> top: 100px;</p> <p> left: 100px;</p> <p> height: 30%;</p> <p> width: 30%;</p> <p> text-align: center;</p> <p> border:solid 1px red;</p> <p> background-color:yellow;</p> <p>}</p> </style> <p><script ></p> <p>function start()</p> <p>{</p> <p> Element.show('loadingback');</p> <p> Element.show('loading');</p> <p>}</p> <p>function end()</p> <p>{</p> <p> Element.hide('loadingback');</p> <p> Element.hide('loading');</p> <p>}</p> <p></script></p> <p><body></p> <div id="content">网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页<br /> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <p>内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容</p> <p><button onclick="start()">test</button> </div> <div id="loadingback" style="display:none;"></div> <div id="loading" style="display:none;"> Loading….<button onclick="end()">end test</button></div> <p></body></p> <p></html></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

要注意的几个地方:

1. 内容需放到一个单独的div里,并设为绝对定位,(z-index=0缺省)

2. loadingback要设为全屏大小,以覆盖整个背景内容

3. loading的z-index值要设的比loadingback大

4. content,loadingback,loading为平行关系,不是包含关系

在这种实现中, 包含背景内容的div收不到鼠标事件, 所以不需要特殊处理其中的控件, flash会怎样没有测试过.

0 Comments

ajax onloading效果？？

Mar 26, 2007 Author: | Filed under: Uncategorized

发内部通知不管用，onload怎么样背景变灰，前台仅显示一个动画？

看这个例子 http://www.butone.com/btnews/

0 Comments

opera speed dial

Mar 26, 2007 Author: | Filed under: Uncategorized

opera 9.20 新开tab就会出现 speed dial 界面。

Speed Dial gives you quick access to your favorite Web sites when a new tab is opened. Click on an empty spot to add a new Speed Dial entry, delete it by clicking on the cross, or drag and drop thumbnails to rearrange. To open a page, click on the thumbnail, or press Ctrl+1 to Ctrl+9.

以下为引用内容:

Opera Mini在初始页面有9个链接作为“Speed Dial”（快速拨号），如此，你可以只按*1就打开你手机上最喜爱的站点。现在，个人电脑上的Opera也有这个功能了。Ctrl+1到Ctrl+9为你提供了打开你最喜欢的网页的快捷方式。当你打开一个新页面，9个“快速拨号”站点会在漂亮的预览中呈现，只需轻轻一点。

0 Comments