HTML5语音输入（淘宝语音搜索）x-webkit-speech方法 支持webkit内核

发表于 2012/02/20 由 前端开发-武方博  62 views

谷歌的网站是时逛时新啊，今天在他们首页发现了HTML5的新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-speech即可，例子如下： <input type="text" x-webkit-speech /> 这样你的输入框右边里就多了个「小话筒」，点击的时候就会提示   这时说出来识别后就可以了，我测试下来，中文英语的识别率还挺高的。 语音输入其他属性： lang 这玩意可以强制输入框里面的语音的语言种类，例如 <input type="text" x-webkit-speech lang="zh-CN"/>   语音事件 目前已知的只有onwebkitspeechchange，顾名思义，就是语音发生变化时触发的事件，一般可以作为提交 <input type="text" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/> 这样说完以后就自动搜索了   x-webkit-grammar 这个不是语音搜索用的属性，但是可以控制这个输入的语法，例如在......查看更多>>

发表在 css3 html5 | 标签为 , , , , | 留下评论

JQuery上传插件Uploadify使用实例详解(Java附件上传)

发表于 2012/02/18 由 前端开发-武方博  97 views

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。 官方下载 官方文档 官方演示 event:事件对象。 queueID：文件的唯一标识，由6为随机字符组成。 fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。 fileCount：选择文件的总数。 filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。 filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。 allBytesTotal：所有选择的文件的总大小。 fileCount：取消一个文件后，文件队列中剩余文件的个数。 allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。 type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’ info：错误的描述 percentage：当前完......查看更多>>

发表在 jquery | 标签为 , , , , | 2 条评论

jquery滚动新闻公告效果

发表于 2012/02/18 由 前端开发-武方博  78 views

仿Twitter的公告效果：   方法如下： 1、HTML 部分： <ul id=”twitter”> <li>第一条消息</li> <li>第二条消息</li> <li>第三条消息</li> </ul> 关于输出 twitter 消息的方法很多，有兴趣的朋友可以看一下。 2、载入 JQuery 直接用 google 托管的就行。 <script type=”text/javascript”src=”http://ajax.googleapis.com/ajax/libs/jquery /1.2.6/jquery.min.js”></script> 3、JQuery 执行代码 $(document).ready(function(){ $(“#twitter li:not(:first)”).css(“display”,”none”); var B=$(“#twitter li:last”); var C=$(“#twitter li:first”); setInterval(function(){ if(B.is(“:visible”)){ C.fadeIn(500).addClass(“in”);B.hide() }else{ $(“#twitter li:visible”).addClass(“in”); $(“#twitter li.in”).next().fadeIn(500); $(“li.in”).hide().remov......查看更多>>

发表在 jquery | 标签为 , , | 留下评论

jQuery图片延迟加载解决方法

发表于 2012/02/18 由 前端开发-武方博  71 views

今天看到乐淘网图片延迟加载，感觉很好！具体效果： 效果： 1、图片没加载时，有一个正在加载中的动态图片 2、只加载一部分图片，即加载让用户看到的图片，当拖动滚动条时，再加载其他图片 好处： 这样可以大大的减少服务器负担，特别对于图片库这个东西，有时候用户只看第一屏的图片，没必要全部把图片都加载出来，加载一部分，即可以减少服务器负担又可以让用户少了等待的时间！ 想看看其方法，通过查看代码发现了另一种解决之道。 方法： 第一步：定义样式，此步骤为了在图片还未完全加载，显示一个动态的正在加载中的图片 假如：图片放在<div class=’imgList’><ul><li><a>图片</a></li></ul></div> 样式为： <style type="text/css"> .imgList ul{ list-style:none; margin:0px; padding:0px } .imgList ul li{ list-style:none; margin:0px; padding:0px; display:inline} .imgList......查看更多>>

发表在 jquery | 标签为 , , , | 留下评论

js动态修改input输入框的type属性

发表于 2012/02/17 由 前端开发-武方博  68 views

需要实现的效果：一个输入框，当输入框未获得焦点的时候，value 值为 “密码”；当输入框失去焦点的时候，输入内容显示为”*****” <input name=”password” type=”text” id=”showPwd” tabindex=”2″ class=”input” value=”密码” /> 我们很直接会想到下面的js $(“#showPwd”).focus(function(){ $(this).attr(‘type’,'password’); }); 发现并没有实现预期效果，出现 uncaught exception type property can’t be changed 错误，查看jQuery 1.42源码 1488 行 // We can’t allow the type property to be changed (since it causes problems in IE) if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) { jQuery.error( “type property can’t be changed” ); } jQuery 修改不了用源生的JS呢？ $(“#pwd”).focus(function(){ $(“#pwd”)[0].type = ‘......查看更多>>

发表在 jquery | 标签为 , | 留下评论

jquery ajax 中文乱码处理

发表于 2012/02/17 由 前端开发-武方博  41 views

jquery在发送ajax数据时，使用了js的内置方法encodeURIComponent对数据进行了处理，该方法的作用是把数据 以UTF-8的方式编码，所以页面的编码如果是GBK或gb2312时候，服务端接收就会出现乱码。 解决方法： ————————————————————— 客户端(jsp页面) 在传递数据前对数据再一次进行encodeURIComponent编码 var m_name = $.trim($(“#m_name”).val()); m_name = encodeURIComponent(m_name);  //对中文进行处理 var map = { m_id:$(‘#m_id’).val(), name:m_name }; $.post(“EditMer.do”,map,function(data){ //….. (根据服务器返回数据进行相关操作) }); ————————————————————......查看更多>>

发表在 前端开发bug修复 | 标签为 , , , , | 留下评论

zSlide-基于CSS3/HTML5演示文档jQuery插件

发表于 2012/02/17 由 前端开发-武方博  62 views

一、卖的什么葫芦药？ jquery.zSlide.js是我最近折腾的一个jQuery插件，借助于CSS3和HTML5的一些新特性，在浏览器中实现类似于powerpoint幻灯片展示。 二、为何需要？ 无论是在公司内部，还是在一些技术会议上，我们做分享的时候，用的最多的想必是powerpoint。但是，powerpoint这个东西本身就是缺乏“自由”与“分享”精神的，因为其目前无法在线共享。要学习某技术会议上大牛分享的东西，多半要去找资源→download→整理或解压或打开之类，资源不好还要清理等等。 oh, my! 像我这样懒得抽筋的人，决不愿意专门去做这种“烧水洗脚”的事情的！此时，我总不禁慨叹，要是可以直接在浏览器中查看该多好啊——饭来张口，衣来伸手。 其实呢，是有专门的网站做这样的事情的。例如国内的豆丁，风波的百度文库，国外知名的slideshare，但是，考虑到产品兼容性，这些站点的文档演示媒介都是flash，其实也没什么不好啦，就是巧克力里面的坚果外面还包了一层壳，有点让......查看更多>>

发表在 css3 html5 | 标签为 , , , | 留下评论

一个页面重构工程师眼中的用户体验

发表于 2012/02/17 由 前端开发-武方博  58 views

在工业化设计融入人们生活的现今，用户体验一词就常常出现在人们的视线里，随着互联网web2.0时代的到来，大大小小的网站设计中也都开始关注用户体验的方面，对什么是用户体验（百度这四个字，比我写什么解释都好）就不做详细赘述了，相信大家比我了解的更加丰富。 用户体验从产品设计阶段便开始介入进来，如原型设计中交互模式设计、功能实现方式设计都融入了设计人员对用户的关怀，听过这样的一句话：“具有良好用户体验的产品，不仅仅取决于一个有着丰富交互设计经验的产品设计师，还与产品生产过程中的每一个环节是否都具备良好的用户体验意识有一定的关系”。 今天我想从一个页面重构工程师的角度出发，从两个方面去谈谈在我的工作中，我所理解的用户体验，以及我做了哪些和用户体验有关的事情。 一、 从可用到易用的细节处理 1. 按钮、链接、导航菜单的鼠标触发状态、鼠标手型等 随着视觉设计的发展，对按钮、链接、或者导航菜单的表现方式变得异常丰富......查看更多>>

发表在 经验感悟 | 标签为 , , , | 留下评论

为触屏手机而设计系列1—拇指操作的热区死角与控件尺寸

发表于 2012/02/16 由 前端开发-武方博  80 views

Part 1 研究背景 1.1 触屏手机界面设计的背景与挑战 挑战1：发展时间短，国内外的研究都尚处在探索阶段，充满未知和不确定。 触屏技术最早被应用到手机上要追溯到1999年（motorola A6188），至今虽然已有12年时间，但真正为手指操作的触屏界面设计带来革命性变化还是07年1月9日发布的iphone1代以及他的多点触摸技术。时至今日，不过4年时间，以苹果设计团队为先驱国内外相关研究领域，包括触摸的手势、触屏界面的规范、触摸的可用性研究等等，都还处在探索阶段，这也意味着有很多现有的东西都是建立在猜测和尝试基础上的，他们的成熟度也是有待时间检验的。这些东西包括国外的期刊文献和图书，甚至是苹果app开发官网上的信息、设计原则。 挑战2：从鼠标键盘到手指，准确率问题、热区和死角的问题。 触屏手机交互研究与PC交互的研究存在着质的变化。输入设备从鼠标键盘变成手指，一方面，操作的精准度上受到了挑战，在密集的信息处理上，用户常常会出现许多误......查看更多>>

发表在 移动网站开发 | 标签为 , , , , , | 一条评论

js图片等比例自动缩放兼容ie6 ie7 火狐

发表于 2012/02/16 由 前端开发-武方博  102 views

需求：图片width<=330px,height<=150。 1、利用max-width,max-height使图片等比例自动缩放，代码： img{ 　　max-width: 330px; 　　max-height: 150px; } 【由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小】   2、用javascript脚本来兼容ie6，代码如： var img_width = img.OffsetWidth; var img_height = img.OffsetHeight; var current_w = (150*img_width)/img_height; var current_h = (330*img_height)/img_width; if(img_height>150){ if(img_width>330){ D.css(img,{ width:330 + "px", height:current_h + "px" }) }else{ D.css(img,{ width:current_w + "px", height:150 + "px" }) } }else{ if(img_width>330){ D.css(img,{ width:330 + "px", ......查看更多>>

发表在 javascript | 标签为 , , | 留下评论

浏览器渲染原理

发表于 2012/02/16 由 前端开发-武方博  67 views

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的： 1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件； 3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件； 4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了； 5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； 6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码； 7. 浏览器发现了一......查看更多>>

发表在 前端开发 | 标签为 , , , , | 留下评论

什么是IE的haslayout

发表于 2012/02/16 由 前端开发-武方博  68 views

IE的haslayout是个很纠结的东西，但作为一名合格的前端开发人员来说，haslayout属性是必须掌握的。 拥有layout概述 Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”[32]，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。 “Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。 微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。了解hasLayout将对IE的臭虫会有更多深入的......查看更多>>

发表在 前端开发bug修复 | 标签为 , , | 2 条评论

IE6、7中display:inline-block的测试

发表于 2012/02/16 由 前端开发-武方博  73 views

通常我们想让内联元素为行块布局显示，有2种方法，最常见的是方法是.selector {display:block;float:left;……}，第二种方法是.selector {display:inline-block;……}，对于第二种方法，在IE浏览器中得到支持，测试结果会认为IE能识别display:inline-block属性，而最近查阅了资料后，得到结果并非如此…… display:inline-block ，简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。这个属性目在主要浏览器的新版本中得到良好的支持，而IE6、7浏览器并不识别display:inline-block属性，之所以IE6、7中内联元素设置了display:inline-block后成行块布局，是因为display:inline-block触发了内联级别的元素的 layout 特性，使内联元素具有inline-block的表症。 关于IE haslayout，《什么是IE的haslayout》中有详细介绍，本文简单介绍haslayout的2个重要知识点： IE6、7中内联元素（如span）触发layout属性后，......查看更多>>

发表在 前端开发 | 标签为 , , | 留下评论

前端开发调试之王Firebug教程

发表于 2012/02/16 由 前端开发-武方博  47 views

每次分享例会同事的分享都会让我学习到很多知识，因为我的基础比较差。所以对很多东西都不熟悉。     今天的分享例会主题是关于Firebug的运用，或许对很多同事来说，这些都不是新知识，但是对我来说我必须得好好总结一下今天所学的知识。     1.什么是Firebug：     Firebug 是网页浏览器 Mozilla Firefox 下的一款开发类插件；它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、 CSS、HTML和Ajax的得力助手。Firebug是一个插件，它必须和Firefox（chrome）浏览器结合使用；可以方便地启用/关闭这个插 件，安装插件之后，打开需要测试的页面，使用快捷键F12唤出Firebug插件，它会将当前页面分成上下两个框架。 2.关于控制台：     控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试；同时还能够在控制台中查看变量内容，直接运行javascript语句；控制台还有个重要的作用就......查看更多>>

发表在 前端开发工具 | 标签为 , , , | 留下评论

兼容IE与火狐 谷歌的css 线性渐变

发表于 2012/02/16 由 前端开发-武方博  31 views

IE系列  filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FF0000′,endColorStr=’#F9F900′,gradientType=’0′); 参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平 Firefox background: -moz-linear-gradient(top, #FF0000, #F9F900); 参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变 Opera background: -o-linear-gradient(top,#FF0000, #F9F900); 参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变 webkit，如Chrome、Safari等  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始......查看更多>>

发表在 前端开发 | 标签为 , | 留下评论
第 1 页，共 16 页12345678910111213141516