可扩展的移动设备上搜索表单.doc_第1页
可扩展的移动设备上搜索表单.doc_第2页
可扩展的移动设备上搜索表单.doc_第3页
可扩展的移动设备上搜索表单.doc_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

可扩展的移动设备上搜索表单上次我写了一篇创建有关移动设备上的导航的教程，今天我将和大家分享一个合适移动设备和互动设计的可扩展的搜索表单。这个技术用到了CSS属性的负值，但不需要JavaScript和额外的标签，是非常简单和有效的设计简洁搜索表单的方法。目标在移动设备上，每一像素都很重要。为了在小空间内显示搜索表单，会将表单设计的相对简洁，然后在激活的时候扩展至全宽度。这样就能够给其他界面元素或者内容区域腾出空间。你可以在Web Designer Wall和Best Web Gallery上看到这种搜索框。当你点击输入区域，它就会扩展到全宽度。在Best Web Gallery上，我使用了jQuery给搜索表单加入了点击搜索按钮时的淡入效果。我们开始：HTML代码下面是一个简单的HTML表单。使用了HTML5的输入标签。重置默认的Webkit引擎下的Input样式在默认情况下，以Webkit引擎为核心的浏览器的Input标签默认样式如下：为了移除默认样式，让其看上去只是一个普通的文字区域，我们添加如下CSS代码：inputtype=search -webkit-appearance: textfield;-webkit-box-sizing: content-box;font-family: inherit;font-size: 100%;input:-webkit-search-decoration,input:-webkit-search-cancel-button display: none;样式化input元素（查看示例）由于CSS代码非常直白，所以我这里不作逐行解释。注意搜索输入框的宽度设置为了55像素，而在激活后会扩展到130像素。其中的transition属性是实现动画效果的技巧。Box-shadow属性给input标签添加了发光的效果。如果你需要进一步了解border-radius或者box-shadow属性，可以阅读CSS3基础这篇文章。例子B（查看示例）在示例B中，搜索输入框进一步的最小化，只有搜索图标显示出来，而没有输入框。注意我在这里更改了输入框的内边距和宽度属性，目的是得到一个完美的圆形按钮。我使用了color ： transparent来让文字不可见。浏览器兼容性这种可扩展的表单效果兼容所有的主流浏览器，例如Chrome， Firefox， Safari和 IE8+。但不支持IE7及以下版本的浏览器，
人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论