彭彭的技术博客
主站: http://www.zzcn.net/ 彭彭博客:http://www.pengpengblog.com/
博客园
::
首页
::
新随笔
::
联系
::
订阅
::
管理
posts - 105, comments - 83, trackbacks - 4
公告
我的最新闪存
MVC 的View用的html模板,想了很久,突然想起来Module可以用反射来做,最后就剩下一个C了。。 不错不错。。呵呵。。
<
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
与我联系
发短消息
搜索
常用链接
我的随笔
我的空间
我的短信
我的评论
更多链接
我的参与
我的新闻
最新评论
我的标签
留言簿
给我留言
查看留言
我管理的小组
设计模式
天津Net俱乐部
我参加的小组
web标准设计
读书(Books)
单元测试
图灵俱乐部
编程爱好者
你必须知道的.NET
OOAD&UML
我的标签
window name no open map flash 教程 学习 it 弹出窗口
(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)
相册
彭彭相册
最新评论
1. re: 用jquery做了个下拉菜单[仿yahoo]
@bolo
那个是楼主的站~~原来效果在上面。。后来改版了。。就删了那个效果了~~自己本机调试吧。。吼吼~~
--彭成刚
2. re: 用jquery做了个下拉菜单[仿yahoo]
怎么演示链接到其他网站去了?
--bolo
3. re: 彭彭滚动插件1.0 发布! ppRoll.js
新改了下~~copy 2个文件的~~
--彭成刚
4. re: 天津站长大会 网站联盟申请
网站名称:旅游贵宾网 网站域名: 联系人:齐芝魁 联系方式:QQ:670539574 网站介绍:天津最大的旅游信息发布平台、天津旅行社的网上营业厅...
--旅游贵宾网
5. re: 天津站长大会 网站联盟申请
网站名称:百宝吧!——天津大学生消费网 网站域名: 联系人:肖立群 联系方式:QQ:52643547 E-mail:xlqstar@qq.com 网站介绍:天津大学生没事就上的逛街、休闲网...
--拓荒
阅读排行榜
1. 图片循环滚动代码(无缝滚动)(分别向上、下、左、右) (7096)
2. Fckeditor使用手册(1580)
3. Jquery的好书[pdf,新书](1430)
4. flash全屏代码,全浏览器支持。(1253)
5. web.UI 对 checkbox 等html控件的 美化,使之配合psd出任意效果。[原创](1083)
评论排行榜
1. 天津站长大会 网站联盟申请(13)
2. 用jquery做了个下拉菜单[仿yahoo](7)
3. Jquery的好书[pdf,新书](6)
4. 图片循环滚动代码(无缝滚动)(分别向上、下、左、右) (4)
5. web.UI 对 checkbox 等html控件的 美化,使之配合psd出任意效果。[原创](4)
60天内阅读排行
1. 复选框&单选按钮视觉优化
2. 铭万轮换广告组件(14)
3. [转]关于在DataTable中执行DataTable.Select("条件")返回DataTable的解决方法(5)
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
彭成刚
阅读(1083)
评论(4)
编辑
收藏
网摘
Feedback
1174000
#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原理可实现这个。。啥也不说了。。看的懂的就看。。吧。。
回复
引用
刷新评论列表
刷新页面
返回页首
发表评论
昵称:
[登录]
[注册]
主页:
邮箱:
(仅博主可见)
验证码:
看不清,换一个
评论内容:
登录
注册
[使用Ctrl+Enter键快速提交评论]
0
1173022
链接:
切换模板
导航:
网站首页
社区
新闻
博问
闪存
网摘
招聘
找找看
Google搜索
China-pub 计算机图书网上专卖店!6.5万品种 2-8折!
China-Pub 计算机绝版图书按需印刷服务
相关文章:
最新IT新闻:
IBM发布全球首款开源智能编译器
IE颓势不减 微软下月公布最新浏览器架构
竞争日趋激烈 微软欲借 Windows 7 扭转战局
上海电信计划2012年80%用户实现100M带宽
数万名网友签名抗议星际争霸2取消局域网功能
相关链接: