开心网上input输入框研究
作者：好好 来源：好好博客 发布时间：2009-03-06 12:52:00
标签：开心网,input,输入框,设计
在平时，常常会提醒自己要做一个善于发现的人，时刻发现细节，这样才会更加懂得生活、会让生活更加精彩。
在学习上也是如此，我们常常会发现有很多网站做的很棒，成了争像模仿的对象，他们好在哪里？一定有他们的可取之处、有他们值得去研究和学习的地方。
去年常常玩开心网，耗在上面的时间也不少，停车位、买卖奴隶等等。虽然开心网也不是始祖（模仿facebook和校内）。但娱乐之余，我还是好好的研究了一下开心网，它的交互式做的很出色，举一个例子：
下拉的select框没有用传统的下拉式，而是用层的弹出和隐藏来代替传统的select下拉框，如图：
这里不去研究它的具体实现方法，来探讨一下input输入框的实现方法，刚好在最近的项目中我也用到了此表现形式。
刚开始在迷茫用css是怎么实现的，放大来看会发现其实很简单：
用firebug查看源代码，发现，在input外面再添加一个span标签，定义span的border为灰色（#979797），再把input的默认状态的border定义为白色，鼠标点击后定义border-left和border-right为黑色（border-left:1px solid #000; border-top:1px solid #000}）。
代码：
0
投稿猜你喜欢
- 由 John Resig 的 How JavaScript Timers Work 可以知道，现有的 JavaScript 引擎是单线程处理
- ajax开发中, 常遇到下面的几种情况: 1 服务端需要返回一段普通文本给客户端 2 服务端需要返回一段HTML代码给客户端 3 服务端需要
- 很简单，只需建立一个worksheet和Excel相关的信息就可以了具体代码见下：<％set xlApp =&nb
- 作者:JavaScript Kit译者:子乌(Sheneyan)翻译日期:2006-02-12英文原文:Conditional Compil
学习目的： 学习ADO.NET用法，并如何用DataRearder读取数据 今天练习数据库的最基本用法，如何打开数据库。首先在网站设置文件w- 1. document.form.item 问题 (1)现有问题：现有代码中存在许多 document.formName.item(&quo
- 经常看见有人问，MSSQL占用了太多的内存，而且还不断的增长；或者说已经设置了使用内存，可是它没有用到那么多，这是怎么一回事儿呢？ 首先，我
- 我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。除此之外，图片和Coockie也是我们网站中
- 有的时候取出全部数据库记录也许正好满足你的要求，不过，在大多数情况下我们通常只需得到部分记录。这样一来该如何设计查询呢？当然会更费点脑筋了，
- event-----------------------------------------------------------------
- 经常到这来抄抄改改代码，也贡献一个代码，主要是讨论研究用，没有封装可以进一步改进<!DOCTYPE html PUBLIC "
- 尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了，但是偶尔使用一些简单的代码块和对象检测来确保一
- 行高的概念看上去很简单——文字行的高度，其实，行高所涉及到的基础知识，对于今后理解其它属性也很重要。大片密密麻麻的文字往往会让人觉得乏味，因
- 之前用Crystal做了一个数字转English Word的Formula刚刚心血来潮, 大半个晚上写了JS版本的数字转换, 由于JS的Bu
- 早上一开Google Reader，发现已经全部被Silverlight 3的消息占领了，基本上都来自于Silverlight
- 很多用户在网站上会糊弄填写一个电子信箱，请问有什么办法可以阻止这种行为？我们通常用两种方法来进行判断：第一种，设定只有形如aspxhome@
- 看到了很多关于如何读出图片的长度的高度的方法，其实都不实用，大多都是通过图片的大小来判断的，图片的种类众多，通过大小来判断难免要制造很多的代
- 修改my.ini或my.conf,将sql-mode="STRICT_TRANS_TABLES,NO_AUTO_CREATE_US
- MySQL是一个非常流行的小型关 系型数据库管理系统，2008年1月16号被Sun公司收购。目前MySQL被广泛地应用在Internet上的
- 可能接触网站与编程设计的人都知道，一个属性值需要引号包括起来，但是有的时候就是因为没有正确设定引号类型，导致程序出错，就连我自己也是这样，我
