机器学习和生物信息学实验室联盟

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 5992|回复: 1
打印 上一主题 下一主题

怎么实现在文本搜索框里添加小放大镜?

[复制链接]
跳转到指定楼层
楼主
发表于 2011-11-28 22:25:29 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
本帖最后由 hsc 于 2011-12-7 17:59 编辑


看到这个图片里的搜索框是不是很炫呢,圆角先不管,邹老师发得一篇帖子里有答案了,这里就说一下怎么即加入一行字,又

在前边加入一个小放大镜,其实如果能够实现放大镜和字再点击之后能够同时实现消失,并在外边点击之后能够实现同步消失

和出现是最好的,但是理想总是美好的,这个功能我相信是可以实现的,但是我暂时还没有找到解决办法。

但是添加一个小放大镜不让他消失还是比较简单的,但是找到一个关键合适的放大镜图片是很关键的,这一个图片是我自己做

的,用着还算合适如果需要,可以下载来用。

其实关键的代码就一行,只需要设置文本框的背景图片就可以了,代码如下:

background:url(search.jpg) no-repeat left center; padding-left:25px;

添加padding-left属性是为了把字体往后移一点,这样不会和图片重合,下边代码是一个完整的文本框的代码,就是和论文检索

系统首页上的一样:

<input id="Title" type="text" value="请在这里输入搜索主题,不必填作者"
                        onfocus="javascript:if(this.value == '请在这里输入搜索主题,不必填作者'){this.value = ''; this.style.color='#000000';}else{this.style.color='#000000';}"
                        onblur="if(this.value==''){this.value='请在这里输入搜索主题,不必填作者';this.style.color='#A1A1A1';}else{this.style.color='#000000';}"
                        style="width: 400px; height:20px; color:#A1A1A1;background:url(search.jpg) no-repeat left center; padding-left:25px;" />

效果图为:

http://datamining.xmu.edu.cn:8080/paper/

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享分享
回复

使用道具 举报

沙发
 楼主| 发表于 2011-11-28 22:30:57 | 只看该作者
我好郁闷,图片为什么一直显示不出来,如果谁想要图片,直接来我这拷好了,郁闷ing....
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

机器学习和生物信息学实验室联盟  

GMT+8, 2024-11-2 13:33 , Processed in 0.066949 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表