qooxdoo是一个自由免费的Ajax GUI框架,现在它的1.0版本提供了下载。 qooxdoo的发音为 ['ku:ksdu:],,它提供了使用JavaScript实现几乎所有,建立类桌面Web应用程序所需的用户界面。根据开发者HTML, CSS或 DOM知识不是必需的。这个架构可以运行在所有主流的浏览器上,例如:Internet Explorer, Firefox, Safari, Opera和Chrome。
在官方网站,提供了示例应用程序操作环境,你可以在线获得qooxdoo的演示,演示平台提供了表格、表单、树、数据捆绑、主题、语言、拖拉操作、html编辑器等功能。
qooxdoo采用双重许可方式,允许用户选择LGPL或EPL许可证。
演示平台:http://demo.qooxdoo.org/1.0/demobrowser/
下载:qooxdoo1.0 ......
公司最近给我一个任务:把一个用iframe做的留言板改写用Ajax做,这样做的原因是:对搜索引擎的优化。虽然很早就知道Ajax可以做局部刷新,但因为自己是刚毕业入职的菜鸟,仅仅是知道有这么个技术可以做这样一功能而已。一边学一边做。现在这功能还没完全弄好,先总结下思路以便更好的学习:
业务逻辑:在线研讨会,提问者页面立即局部刷新,其他用户打开了这个页面定时局部刷新。
所用知识:ajax 定时器 往主页面局部div里异步加载进一个显示提问者所提问题列表的页面
代码:
//清空输入框,提示已输入
function submitQA() {
document.qasubmit.body.value = "";
qahint.innerHTML = "<b> 您的发言已经提交,欢迎继续发言。谢谢。</b>"
}
//点击问题提交调用
function readySubmit() {
setTimeout(submitQA, 1000);
setTimeout(function(){assign('tv');} , 1500);
}
//异步加载数据处理页面
function load(id) {
assign(id);
setTimeout(function () { load(id);},5000);
}
//往主页div插入 ......
HTML中使用input type="file"上传文件时,代码中只能得到文件的名称,而有些特殊的需要要求我们必须得到上传文件的绝对路径,为此我们采用Javascript实现得到文件的绝对路径。
具体如下。
页面代码(只粘贴了关键代码):
<form name="thisform" method="post"
action="<%=request.getContextPath()%>/movieManage.do" id="thisform" enctype="multipart/form-data">
<input type="file" name="theFile" onchange="document.getElementById('theFilePath').value=this.value"/>
<input type="hidden" id="theFilePath" name="theFilePath" value="">
</form>
注意:要有enctype="multipart/form-data"
Action代码:
String filePath = request.getParameter("theFilePath");
filePath既是上传文件的绝对路径。
浏览器中测试:
Firefox和IE中可以得到绝对路径。
谷歌Chrome浏览器最后得到的仍是文件名,可能是为了安全。在谷歌浏览器中的实现仍需探索。 ......
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:register
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendLink
页脚:footer
版权:copyRight
1.css ID 的命名
外 套: wrap
主导航: mainNav
子导航: subnav
页 脚: footer
整个页面: content
页 眉: header
页 脚: footer
商 标: label
标 题: title
主导航: mainNav(globalNav)
顶导航: topnav
边导航: sidebar
左导航: leftsideBar
右导航: rightsideBar
旗 志: logo
标 语: banner
菜单内容1: menu1Content
菜单容量: menuContainer
子菜单: submenu
边导航图标:sidebarIcon
注释: note
面包屑: breadCrumb(即页面所处位置导航提示)
容器 ......
position属性其实是指本体对上级的定位。如果这么理解,就好办了。
默认的属性值都是static,静态。就不用多说了。最关键的是
relative(相对)以及absolute(绝对)。
往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B">
</div>
</div>
当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。
这样在开发一些基于B/S应用程序的时候,就能很方便的添加一些UI元素,例如某一个活动层的关闭按钮等。
本文来自:http://www.awflasher.com/blog/archives/731 ......
一年里遇到的css问题总结一下:
到现在发现用hack越多证明你的水平越差,目前写的代码几乎没有用到这些解决方法了。但是话说回来只有遇到问题并且解决才能最终达到预防。直到所有的都遇到了你也就是高手了!
应用最多的本人感觉就是:height:1%;overflow:hidden;//解决float等问题
1、高度自适应问题:
完美解决办法:
div{
height:auto !important;
height:xxx px;
min-height:xxx px;
}
前提是:在div(此处的div只是个常用案例,并非只能用在这个标签上)的结束标签前加上清除浮动的代码。该代码样式写法如下:
{
visibility:hidden;
display:none;
clear:both;
font-size:0;
height:0;
}
2、完全居中问题:
说明:垂直居中只适用于页面高度固定的情况。
完美解决办法(不会出现内容看不见的问题):
假设你的主体框架为#main
页面结构写法如下:
<div id="vertical"> </div>
<div id="main">xxxx</div>
样式写法如下:(样式中的背景色只是为了测试而用非必写项,body中的text-align为必写项。)
html,body{
height:100%;
margin:0;
padding:0;
}
body{
text ......