‘Web前端技术’ 分类下的所有文章

Web前端相关技术

2013八月21

HTML5在线作图工具Processon分享

ProcessOn简介

CSDN的蒋涛不久前在微博上评价说ProcessOn是web版的visio,出于好奇私下对ProcessOn进行了一番研究。最后发现无论是在用户体验上,还是在技术上,ProcessOn都比微软的Visio要好很多。下面就来简单介绍一下这款基于HTML5开发的作图工具。

Processon在线作图工具操作界面

Read more…

2013八月15

TypeError: elem[type] is not a function jquery表单提交错误

分类:JQuery,Web前端技术 | 标签:, | 浏览:1,363 4 Comments

摘要

今天项目组的一个同事在做一个添加功能时,利用jquery提交表单时报以下错误:
TypeError: elem[type] is not a function
elem[ type ]();
帮其找了好久才找出问题的原因,所以记录下,同时也和大家分享下

错误的原因

由于提交表单的input文本框name属性使用了submit值,代码如下:

<input id="submitBtn" class="sub bottom" type="button" name="submit" />

解决方法,将name=”submit”修改为其它值即可

2013七月7

管理系统切图时需要注意的事项

分类:Web前端技术,项目管理 | 标签:, , | 浏览:106 1 Comment

写作背景

最近由于公司项目比较多,公司新招了一个美工,负责帮我切公司开发框架中的设计图,结果切出来的页面基本不能用,让我很无语,无奈之下又让我们研发团队的另外一个美工帮切图,在切图之前我将需要注意的事项都做了整理,在此和大家分享下。

miss系统切图时注意事项

1. 页面需要支持IE6+、火狐、谷歌等浏览器
2. 页面要能够自适应,随着屏蔽的分辨率、页面自动变化
3. 页面不要出现横向滚动条
4. 表格中的td不要加样式,只加宽度就行(开发的可以添加)
5. 操作按钮都用文字加样式,不要用图标、比如表格区域中的删除、修改按钮
6. 查询条件可以横向、纵向动态添加
7. 左边菜单顶层菜单可以上下收缩,鼠标选中需要有选中样式
8. 左边菜单整体可以向左进行收缩,收缩后右边的表格向左伸展
9. 左边菜单收缩时,需要有箭头指向,说明目前是伸缩状态还是收缩状态
10. 页面文本框的宽度需要有几个不同的尺寸,开发人员可以进行选择使用。
11. 新增页面input后面需要加query的验证,所以布局需要考虑到。

Read more…

2013七月1

flash转换成html5工具汇总

转换工具介绍

由于Flash被苹果拒之门外,很多开发者在开发产品时都不得不在Flash和HTML5之间做出选择。将原有的flash转为html5是一个不错的选择,那么下面我们对转换工具做一个简单的介绍及汇总:
Free Flash to HTML5 Online Converter
Adabe公司的出品的 Flash to Html5
谷歌公司出品的 Swiffy
Flash原图
Flash装换为HTML5

Read more…

2013六月27

.png格式图片在ie内核浏览器上显示XX

分类:Web前端技术,解决方案 | 标签: | 浏览:56 0 Comments

问题描述

今天新来了一个美工,在切图的时候发现网页引入的.png的图片在IE内核浏览器中都出不来,显示红X,最后在网上找了下资料,问题解决了,下面和大家分享下解决方法。

解决办法

将以下代码复制站粘贴到记事本保存为.reg格式的文件,导入注册表,重启电脑,即可解决以上问题

Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\MIME\Database\Content Type\image/png]
“Extension”=”.png”
“Image Filter CLSID”=”{A3CCEDF7-2DE2-11D0-86F4-00A0C913F750}”
[HKEY_CLASSES_ROOT\MIME\Database\Content Type\image/png\Bits]
“0”=hex:08,00,00,00,ff,ff,ff,ff,ff,ff,ff,ff,89,50,4e,47,0d,0a,1a,0a

Read more…

2013六月25

国内优秀的HTML5前端开发框架汇总

写作背景

国外很有多优秀的HTML5前端开发框架相信大家都耳熟能详:JQuery Mobile,Twitter Bootstrap, Schena Touch, BackBone等等。
同样,也存在很多国内比较优秀的前端开发框架,其中中国互联网三巨头贡献了近一半:腾讯,阿里巴巴,百度。
框架不是万能的,选择和项目匹配的框架可以显著提高开发效率,但是也有可能带来代码的臃肿,本着“write less, do more”思想,选择合适的框架是最重要的。其中每个框架各有特点,还需要读者自己把关。如:腾讯的JX比较适合构建和组织大规模、工业级的Web App,腾讯内部的WebQQ、Q+等产品都是采用JX框架开发。
本文主要为大家推荐九款国内最火的HTML5前端开发框架,它们分别是腾讯团队开发的JX、淘宝团队开发的KISSY、百度团队开发的QWrap、以及Tangram、上海康尚实验室推出的Como、EdoJs 、KindEditor 、NJF 、JSI。

Read more…

2013六月18

使用Bootstrap的五大理由

Twitter Bootstrap简介

Twitter Bootstrap是基于HTML、CSS和JavaScript的简洁灵活的流行前端框架及交互组件集。它是Twitter在2011年8月开源的一整套前端解决方案,拥有非常完备和详尽的开发文档,有了它,Web开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。
使用bootstrap的理由
尽管也有不少网页设计师抱怨Bootstrap网站结构臃肿、不灵活并且难以维护,但是Bootstrap的确有一些迷人的内置功能,比如:
1) 流媒体网格布局
2) 响应式设计
3) 自定义表单元素
4) 页面排版
5) JavaScript交互性
6) 跨浏览器兼容性
这些功能看起来是不是很酷?它是如此的迷人。
下面让我们来看看Bootstrap的一些亮点,也许它不是适用于每项工作的最佳工具,但是下面所述的几大理由,绝对让你乐意将其纳入您的工具箱中。

Read more…

2013四月25

政府网站设计开发时应该注意的事项

写作背景

最近作为项目经理,负责做一个政府机构的门户网站,之前评估的工作量大概为2个人月左右,美工1人月,开发1人月,没想到结果做了6个人月左右才做完,最后对项目做了一个总结,分析出项目工作量超标的主要原因为以下:
1、客户对页面设计要求比较高,美工就设计图设计了大概10版左右,每次设计大概需要4天左右
2、对政府网站的开发经验比较少,很多细节没有考虑到
3、网站基础数据量比较大,数据录入上投入了大量的时间和精力,大概用了2个人月
4、用户对细节要求比较高,基本上对每篇文章、段落、文字都有特殊要求。
后面想想,其实客户要求的一些细节在之前的网站中也出现过,其他客户也有过类似的要求,只是当时没有做总结,才导致现在出现这么多的问题,所以现在将政府网站设计、开发时需要注意的一些事项进行下总结,大家进行下分享。

Read more…

2013四月21

java实现自动访问网站并获取返回值的代码

写作背景

最近在做一个项目,里面有一个需求是需要通过java程序访问一个http的接口,并且需要解析及获取接口返回值,最后在网上查了资料,实现了此功能,将代码和大家分享下。
通过java访问http地址的实现方式有两种,一种是post的方式,另外一种是get方式,下面就对两种方式分别做一个介绍

post方式实现

1、java代码实现自动访问网站的代码

try {
	/** post方式 */
	HttpClient client = new HttpClient();
	PostMethod postMethod = new PostMethod(
			"http://localhost:8080/portal/check.jsp");
	// 参数设置
	postMethod.setParameter("channelid", "85");
	// 执行postMethod
	client.getParams().setParameter(
			HttpMethodParams.HTTP_CONTENT_CHARSET, "utf-8");
	// 执行并返回状态
	int status = client.executeMethod(postMethod);
	String getUrl = postMethod.getResponseBodyAsString();
	System.out.println(getUrl);
} catch (Exception e) {
	// TODO Auto-generated catch block
	e.printStackTrace();
}

2、check.jsp类的代码

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%
//通过栏目id判断用户对栏目权限;
String channelid = (String) request.getParameter("channelid");
if(null==channelid||""==channelid){
	response.getWriter().print(100);
}else{
	response.getWriter().print(200);
}
%>

3、其输出的结果为200.

Read more…

2013四月16

设为首页添加收藏夹代码-支持所有浏览器

背景说明

最近做的一个网站上面有一个功能就是将现在的页面设置为首页,添加收藏的小功能,其实这个功能是所有网站上面基本都存在的功能,但是需要实现所有浏览器都支持设为首页、添加收藏,确实不怎么好实现,下面将自己在网上查的一些资料做下总结。
把页面设置为首页,加入收藏功能,支持ie,火狐,谷歌,safari,360安全,qq,遨游,搜狗浏览器等浏览器,目前不支持360急速浏览器的兼容模式下加入收藏功能。这里虽然说是兼容,但是有些浏览器本身就是不支持用js来把页面设为首页,加入收藏夹,只能让用户手动去在浏览器或者按键去设置这些功能,这里说的兼容是指当浏览器有这个设置的时候js会有提示。

设为首页的代码

//设为首页
function setHome(url){
    if (document.all) {
        document.body.style.behavior='url(#default#homepage)';
           document.body.setHomePage(url);
    }else{
        alert("您好,您的浏览器不支持自动设置页面为首页功能,"+
                "请您手动在浏览器里设置该页面为首页!");
    }
}
<a onclick="setHome(window.location)" href="javascript:void(0)">设为首页</a>

Read more…