彭成刚的技术博客
彭成刚新浪微博:http://t.sina.com.cn/pengchenggang
随笔 - 128, 文章 - 0, 评论 - 104, 引用 - 4
web.UI 对 checkbox 等html控件的 美化,使之配合psd出任意效果。[原创]
虽然技术不是很难,单现在网上采用这种技术的,还是很少,也就是在国外的一些个站点看到过这些技术,所以自己就写下实现效果。。(第一次发首页,高手请勿见怪,但绝对原创)
你是否对web.UI默认设计感到很烦恼,很多好的设计,由于不能很好的支持导致了网页的整体美观?
哪么好吧。。让我们来重写web组建,让他们按照我们的显示效果来出现吧。。
技术需求:设计能力(可以去找美工),javascript基本概念,html熟悉
下面我就以html->form->checkbox为例,来为大家改写下。。
<
input
type
="checkbox"
name
="cc"
id
="cc"
value
="checkbox"
/>
这个就是我们常用的checkbox了,对于它的样式,默认的css并不能很好的解决我们的问题,那么我们只有一个方法来完成我们想法了,那是什么呢?很简单,K掉他。。呵呵。。但可不是删除啊。。因为我们还要用他来提交表单等等。。所以只要
style="display:none;"
就可以了。。对于他来说我们只需要他的
checked 属性。
现在你可以找你的美工做个你想要的图片了。。要两个哦。一个未选中和一个选中的哦。。(水分太弄了好像)
这里我们用div来弄个表现的层来替代刚才checkbox。。
<
div
style
="width:22px; height:22px;background-image:url(checkOff.JPG);"
onclick
="myCheckbox('cc',this);"
>
</
div
>
我做的图片宽度是22*22 默认的时候给了张checkOff图片,这里我们用div.onclick事件来模拟checkbox的onclick
事件。。写了个小函数
<
script language
=
"
javascript
"
>
function
myCheckbox(obj,thisobj)
{
var
o
=
document.getElementById(obj);
if
(o.checked)
{
thisobj.style.backgroundImage
=
"
url(checkOff.JPG)
"
;
o.checked
=
false
;
}
else
{
thisobj.style.backgroundImage
=
"
url(checkOn.JPG)
"
;
o.checked
=
true
;
}
}
<
/
script>
意思就是,点击的时候,显示我们的图片,并自动改写checkbox控件属性,达到实用目的。表单提交的时候,获得cc就可以了。。
下面给出小demo,大家下载下来看看就可以了。。根据这个思路,可以自己做些动画效果或什么的都可以,下来菜单用jQuery当然是更XX了。。呵呵。。
demo下载:
http://files.cnblogs.com/pengpengsay/myCheck.rar
---------------------------------------------
彭成刚微博:
http://t.sina.com.cn/pengchenggang/
彭彭新浪博客:
http://blog.sina.com.cn/zzcn/
彭彭技术博客:
http://pengpengsay.cnblogs.com/
彭彭百度博客:
http://hi.baidu.com/pengpengsay/
彭彭照片相册:
http://zzcn.yupoo.com/
绿色通道:
好文要顶
关注我
收藏该文
与我联系
posted on 2008-04-27 13:38
彭成刚
阅读(1355)
评论(4)
编辑
收藏
评论
1174000
#1楼
回复
引用
这都上首页了,不太好吧……
2008-04-27 13:59
|
robiy[未注册用户]
#2楼
回复
引用
查看
-_-!!! 楼上为啥这么说话?
2008-04-27 17:19
|
簡簡單單..
#3楼
回复
引用
加文字就不好控制了
2008-04-27 18:28
|
try1[未注册用户]
#4楼
回复
引用
<div style="width:22px; height:22px;background-image:url(checkOff.JPG); float:left; cursor:hand;" onclick="myCheckbox('cc',this);"> </div>作者网站(彭彭社区):
http://www.zzcn.net/
<div style="clear:both;"></div>
<div style="width:22px; height:22px;background-image:url(checkOff.JPG); float:left; cursor:hand;" onclick="myCheckbox('cc',this);"> </div>作者网站(彭彭社区):
http://www.zzcn.net/
加了个float:left; cursor:hand;,这样文字就能显示在右边了。。这都属于css只是范畴,我只是讲下js原理可实现这个。。啥也不说了。。看的懂的就看。。吧。。
2008-04-28 09:46
|
pengpengsay[未注册用户]
注册用户登录后才能发表评论,请
登录
或
注册
,
返回博客园首页
。
首页
博问
闪存
新闻
园子
招聘
知识库
最新IT新闻
:
·
春节后礼品回收iPhone成新宠燕窝被冷落
·
分析称苹果近1000亿现金储备最佳用途是派息
·
扎克伯格11件蠢事:曾同意将Facebook卖给雅虎
·
最想要的Entity Framework功能
·
专访Jeffrey Richter:Windows 8是微软的重中之重
»
更多新闻...
最新知识库文章
:
·
高级编程语言的发展历程
·
如何学习一门新的编程语言?
·
学习不同编程语言的重要性
·
为什么我喜欢富于表达性的编程语言
·
计算机专业的女生为什么要学编程
»
更多知识库文章...
China-pub 2011秋季教材巡展
China-Pub 计算机绝版图书按需印刷服务
导航
博客园
首页
新随笔
联系
订阅
管理
<
2008年4月
>
日
一
二
三
四
五
六
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
公告
昵称:
彭成刚
园龄:
4年3个月
粉丝:
25
关注:
14
搜索
常用链接
我的随笔
我的评论
我的参与
最新评论
我的标签
我的标签
window name no open map flash 教程 学习 it 弹出窗口
(1)
随笔档案
2012年1月 (1)
2011年5月 (1)
2010年12月 (1)
2010年11月 (1)
2010年10月 (2)
2010年7月 (2)
2010年6月 (3)
2010年5月 (1)
2010年4月 (2)
2010年3月 (2)
2010年1月 (2)
2009年12月 (1)
2009年11月 (2)
2009年9月 (1)
2009年7月 (1)
2009年6月 (2)
2009年5月 (2)
2009年4月 (6)
2009年3月 (13)
2009年2月 (3)
2009年1月 (1)
2008年12月 (5)
2008年11月 (2)
2008年10月 (3)
2008年9月 (1)
2008年8月 (2)
2008年7月 (4)
2008年6月 (2)
2008年4月 (11)
2008年3月 (11)
2008年2月 (4)
2008年1月 (3)
2007年12月 (9)
2007年11月 (9)
2007年10月 (12)
相册
彭彭相册
最新评论
阅读排行榜
评论排行榜
推荐排行榜