Entries by Geelin

html5实现完美搜索框

前面我们已经了解到一些html5中新增的表单验证属性,相当实用,直接实现了之前需要用js才能实现的功能。我们通常做的搜索框也属于表单内容,就是一个text类型的input和一个submit类型的input。 Type=”text”的input是最基本的input类型,仅针对它,html5就新增了几个非常人性化的属性:placeholder、autofocus和speech。 Placeholder,例:<input type=”text” placeholder=”输入搜索内容“> 。一目了然,它就是用来设置初始值的,而且初始值的颜色为灰色,一旦input中输入新内容,这个值就消失了。这个属性真真是太人性化了。 Autofocus,例:<input type=”text” autofocus>。“自动聚焦”,即当进入一个页面时,加有此属性的input输入框会自动获取焦点,也就是光标第一时间自动停留在该input上,用户可以在进入页面后直接输入内容,而省去了移动鼠标到input上并点击这一步骤。如果一个页面上有两个以上input使用了此属性,那么浏览器会自动选择最后一个使用它的input来聚焦。 Speech,语音输入功能属性。大家用智能手机的时候应该都见识过输入框里那个小话筒的语音输入功能吧,就是用的这个属性。不过目前大部分浏览器都还没有实现这些接口,只有基于webkit核心的浏览器(如Chrome)才能使用它,且需要加上x-webkit前缀。也就是说x-webkit-speech是webkit内核浏览器特有的语音识别工具,即私有属性。用法:<input type=”text” x-webkit-speech>。 大家可以将下面的code直接拷贝并另存为网页,在Chrome浏览器里预览并体验一下,很赞的哦~ <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <title>无标题文档</title> <style type=”text/css”><!– .searchForm input { font-size:12px; } .searchForm input[type=”text”] { background:#fff; border:1px solid #f00; color:#999; float:left; height:28px; line-height:28px; outline:none; padding:3px; width:180px; } .searchForm input[type=”submit”] { background:#f90; border:1px solid #f00; color:#fff; cursor:pointer; display:inline-block; height:36px; margin-left:-1px; padding:0 15px; vertical-align:middle; } .searchForm input[type=”submit”]:hover { background:#f60; } –></style> </head>   <body>   <form class=”searchForm” method=”get”> <p> <input type=”text” placeholder=”输入搜索内容“>  <input type=”submit” value=”点击搜索“> </p> <p> <input type=”text” autofocus x-webkit-speech> <input type=”submit” value=”点击搜索“> </p> </form> […]

如何修改上传选择框(input[file])为英文按钮

如图,这是TalentPool项目的一处需求效果,看似简单的一段布局,暗含一个难点:上传选择框(input[file])默认按钮文字是中文,且不同浏览器解析不一样(“浏览、选择文件”等),而我们要做的是英文网站,所以这个问题亟待解决。 首先想到的就是将<input type=”file” />设置透明隐藏起来;再做一个文本框<input type=”text” />和按钮<input type=”button” value=”Browse” />来模拟上传选择框(input[file])的样式;然后利用此按钮的click事件触发<input type=”file” />的click()来模拟点击效果;最后给<input type=”file” />绑定一个change事件将选择获得的路径文本赋给文本框<input type=”text” />。做到这里应该算成功了吧,然而在测试的时候发现此方法在IE下行不通,原因是IE中提交表单时会清空表单数据,这一瞬间触发了我加的绑定change事件,从而导致无法提交到选择文件。 头疼了好一会儿,上网搜集这个问题,发现网上的答案大多也是与此类似,可是此方法不可行啊。于是静下心来,从问题点出发考虑,并结合各位前辈提出的问题,经过各种尝试终于得到最完美的解决方案:首先同样是将<input type=”file” />设置透明,不过不隐藏,而是至于顶层;再做一个文本框<input type=”text” />和按钮<input type=”button” value=”Browse” />置于<input type=”file” />下层并调整样式使之刚好被<input type=”file” />覆盖;然后给<input type=”file” />添加onChange=”setFilePath()”,并在JS中写好一个方法setFilePath(),实现点击<input type=”file” />后及时赋值给文本框<input type=”text” />。另外<input type=”file” />的宽度样式设置也很巧妙,用样式width来设置是不起效果的;用内带的size来设置只有IE下有效;而后又发现用JS设置width样式在火狐这类主流浏览器有效,IE无效。这样也不错,可以分别设置这两个值来匹配一个固定的宽度。 到此为止,问题总算得到完美解决。下面分别贴出3部分代码,应该注意的部分已用粗体标注:   HTML: <form name=”uploadForm”> <input id=”browseTrue” size=”34″ type=”file” name=”upload” onChange=”setFilePath()”> <input type=”text” id=”browseText”> <input id=”browse” type=”button” value=”Browse” /> </form>   CSS: #browseTrue { position:absolute; z-index:2; } #browseText, #browse { position:relative; z-index:1; } #browseText { width:190px; padding:3px; border:1px solid #d0d0d0; } #browse { background:#eee; border:1px solid #ccc; height:23px; padding:0 16px; color:#666; }   JS: $(function(){ $(“#browseTrue”).css({“opacity”:”0″,”width”:”278px”,”height”:”24px”}); }); function setFilePath(){ $(“#browseText”).val(document.forms[“uploadForm“].upload.value); };   记得还要调用jQuery函数库文件哦。

细说前端设计

Web前端设计是在div+css流行起来后衍生出的一个职位,它是从笼统的“网页设计师”概念里分离出来的独立工作。这里的“设计”是指将PSD设计稿转换成Web页面时html结构及css样式的代码设计,行业内对此项工作有多种称呼:切图、网页排版、网页设计等等。

HTML5新增标签的汇总与详解

趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析。这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦。

jQuery实现半收缩或全部展开的分类效果

网站制作时会默认列出其中一部分搜索率较高的分类,隐藏另外一大部分,免得占用有利的视觉空间,当用户找不到自己需要的分类时,“展开更多▼”之类的按钮会引导他点击继续浏览其它分类;反之,当用户不再需要看更多分类时,便可点击“简洁展现▲”之类的按钮将那部分分类再收缩起来。

网页二级导航各种效果实现技巧

一般稍大点的网站都会运用二级导航甚至三级导航来将网站内容分门别类得更具体。二级导航的运用最为普遍,今天就主要来探讨二级导航的多种效果实现。以我个人以往的项目经验来看,我认为二级导航基本分为以下三种展现方式。