当我刚开始玩博客园博问时,就感觉博客园里的标签的设计很有意思。当时就想,有机会一定要把这个设计自己做一下。可谁知道,这个思绪就只是在我的脑海里转了一圈,溜出去了。一年以后,在做一个项目时,一个页面上的关于添加作者的需求又让我想起了这个设计。于是,,,
![](https://images0.cnblogs.com/blog/368927/201311/07155044-13e916e7ca184fc8a683f9130b550521.png)
首先我们分析一下这个设计。很显然这个设计不是一个简单的text类型的input标签,虽然外面的边框看着有那么点神似。大框框里面的字体是有样式的,那么肯定是由html标签,如span,label等包裹着的。然后根据css控制其样式。注意我们前面说了,大框框不是一个text类型的input标签,但是他确实是可以输入文字的,看见那个“|”线了吗,那就是编辑状态的光标。所以这个地方肯定有一个text类型的input标签。所以,经过分析,这个其实就是有div+span+input组合起来具有时髦功能的高级文本输入框,呵呵。
经过上面的分析,下面我们说说实现过程。
第一步很简单,纯div+css技术,准备一个div,套上样式,就可以看上去和上面的截图的样子差不多了。本人的div+css水平一般,项目时间紧迫,没有专门的前端。所以只能自己摸索着做一个效果了。下面是我做的效果:
![](https://images0.cnblogs.com/blog/368927/201311/07154842-e611c24ae5b240baa76f2b537e413471.png)
第二步,很显然就是将我们的标签动态化,也就是加上javascript逻辑。这一步是有点儿麻烦,但是借助jQuery这么强大的javascript框架,也是很轻松的就都可以搞定。
为了实现javascript与page分离,结构更加清晰,我将所有的javascript逻辑以插件的形式封装了。同时这样的做法也便于javascript逻辑复用。
由于代码逻辑非常的简单,就不解释了,有兴趣的朋友下载源码看看。
ps:源码只是简单的,机械的实现了类似博客园标签的功能,供初学者看看还是可以的,但是若要用于实际的项目中,需要自己添加一下自己的逻辑。
当然这个也是可以继续开发的,比如与输入框的数据模糊匹配数据库的数据,将span标签的数据回传给服务器,等等。有时间的话,在做吧。