彭彭的技术博客
主站: http://www.zzcn.net/ 彭彭博客:http://www.pengpengblog.com/
博客园
::
首页
::
新随笔
::
联系
::
订阅
::
管理
posts - 71, comments - 50, trackbacks - 3
<
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
与我联系
发短消息
搜索
常用链接
我的随笔
我的空间
我的短信
我的评论
更多链接
我的参与
我的新闻
最新评论
我的标签
留言簿
(3)
给我留言
查看留言
我管理的小组
设计模式
天津Net俱乐部
我参加的小组
读书(Books)
图灵俱乐部
web标准设计
你必须知道的.NET
OOAD&UML
单元测试
随笔档案
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)
相册
彭彭相册
最新评论
1. re: JS的107个好汉【网摘】
啥JB破玩意,复制粘贴都不会
--sdfsafsdfsf
2. re: 许涛的 repeater itemCommand 事件代码(经典代码,不难)
经典在常用上,就是使用的机率比较大~~我个人还是比较喜欢repeater的~~
--楼主
3. re: 许涛的 repeater itemCommand 事件代码(经典代码,不难)
一般般
--VisualStudio
4. re: 许涛的 repeater itemCommand 事件代码(经典代码,不难)
可以说说经典在哪吗?
--lucky0504
5. re: 图片循环滚动代码(无缝滚动)(分别向上、下、左、右)
因为你的高度或宽度不够。。
--楼主
阅读排行榜
1. 图片循环滚动代码(无缝滚动)(分别向上、下、左、右) (1226)
2. web.UI 对 checkbox 等html控件的 美化,使之配合psd出任意效果。[原创](926)
3. Jquery的好书[pdf,新书](878)
4. Fckeditor使用手册(725)
5. 判断一组Radio选择 是否被选择了 [自编javascript函数](510)
评论排行榜
1. Jquery的好书[pdf,新书](5)
2. Fckeditor使用手册(4)
3. web.UI 对 checkbox 等html控件的 美化,使之配合psd出任意效果。[原创](4)
4. 许涛的 repeater itemCommand 事件代码(经典代码,不难)(3)
5. IE和Firefox都兼容性的JS代码书写方式(2)
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://www.zzcn.net/
彭彭博客:
http://www.pengpengblog.com/
彭彭新浪博客:
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
彭成刚
阅读(926)
评论(4)
编辑
收藏
网摘
Feedback
#1楼
2008-04-27 13:59 |
robiy [未注册用户]
这都上首页了,不太好吧……
回复
引用
#2楼
2008-04-27 17:19 |
簡簡單單..
-_-!!! 楼上为啥这么说话?
回复
引用
查看
#3楼
2008-04-27 18:28 |
try1 [未注册用户]
加文字就不好控制了
回复
引用
#4楼
2008-04-28 09:46 |
pengpengsay [未注册用户]
<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原理可实现这个。。啥也不说了。。看的懂的就看。。吧。。
回复
引用
新用户注册
刷新评论列表
标题
姓名
主页
Email
(博主才能看到)
验证码
*
看不清,换一张
[
登录
][
注册
]
内容(请不要发表任何与政治相关的内容)
网站首页
新闻频道
社区
小组
博问
网摘
人才
找找看
Remember Me?
登录
使用高级评论
新用户注册
返回页首
恢复上次提交
[使用Ctrl+Enter键可以直接提交]
该文被作者在 2008-04-27 13:40 编辑过
Google站内搜索
相关文章:
相关链接:
最新IT新闻:
应用程序架构指导包2.0 Beta 2发布
推波助澜 微软推出“I'm a PC”商店
火狐中国版正式发布
微软:中国移动全球率先使用IE Mobile 6
消息汇总:迅雷人事变动 员工与公关部说法大相径庭