web.UI 对 checkbox 等html控件的 美化,使之配合psd出任意效果。[原创]
虽然技术不是很难,单现在网上采用这种技术的,还是很少,也就是在国外的一些个站点看到过这些技术,所以自己就写下实现效果。。(第一次发首页,高手请勿见怪,但绝对原创)
你是否对web.UI默认设计感到很烦恼,很多好的设计,由于不能很好的支持导致了网页的整体美观?
哪么好吧。。让我们来重写web组建,让他们按照我们的显示效果来出现吧。。
技术需求:设计能力(可以去找美工),javascript基本概念,html熟悉
下面我就以html->form->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下载:https://files.cnblogs.com/pengpengsay/myCheck.rar
你是否对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。。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
事件。。写了个小函数
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
意思就是,点击的时候,显示我们的图片,并自动改写checkbox控件属性,达到实用目的。表单提交的时候,获得cc就可以了。。
下面给出小demo,大家下载下来看看就可以了。。根据这个思路,可以自己做些动画效果或什么的都可以,下来菜单用jQuery当然是更XX了。。呵呵。。
demo下载:https://files.cnblogs.com/pengpengsay/myCheck.rar
---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)