使用button标签,实现三态图片按钮

三态图片按钮对于好的用户体验来说必不可少。我对dom事件进行一些处理,在不改变html的情况下,实现了三态按钮。下面的解决方法的关键,主要是去掉虚线选框和对背景进行定位,没有使用循环处理,任何一个按钮,只要定义了背景图片和边框为0,就自动变成了三态按钮。

if(document.all)
document.execCommand("BackgroundImageCache",false,true)
document.body.onload=function(){
if(document.activeElement.tagName=="BUTTON")
document.activeElement.blur()
}
document.onmouseover=document.onmouseout=document.onmousedown=document.onmouseup=function(e){
var ee=e==null?event.srcElement:e.target
e=e||event
if(ee.tagName!="BUTTON"||ee.clientWidth!=ee.offsetWidth)
return
if(e.type=="mousedown"){
ee.style.backgroundPosition="0 -"+(2*ee.offsetHeight)
if(document.all)
ee.hideFocus=true
else
return false
}
if(e.type=="mouseover"||e.type=="mouseup")
ee.style.backgroundPosition="0 -"+ee.offsetHeight
if(e.type=="mouseout")
ee.style.backgroundPosition="0 0"
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

上面的解决方法还有点美中不足,就是在firefox下,没办法用Tab键定位按钮,这是因为为了去掉虚框,屏蔽了点击事件。下面的程序解决了这个问题,方法是在按钮里创建一个不可见的新按钮,由它转移焦点。

button{border:0}

if(document.all)
document.execCommand("BackgroundImageCache",false,true)
document.body.onload=function(){
if(document.activeElement.tagName=="BUTTON")
document.activeElement.blur()
}
document.onmouseover=document.onmouseout=document.onmousedown=document.onmouseup=function(e){
var o,ee=e==null?event.srcElement:e.target
e=e||event
if(ee.tagName=="BUTTON"&&ee.clientWidth==ee.offsetWidth){
if(e.type=="mousedown"){
if((ee.lastChild||"").tagName!="BUTTON"){
o=document.createElement("button")
o.style.cssText="position:absolute;left:-9000"
ee.appendChild(o)
ee.onfocus=function(){ee.lastChild.focus()}
}
ee.style.backgroundPosition="0 -"+(2*ee.offsetHeight)
}
if(e.type=="mouseover"||e.type=="mouseup")
ee.style.backgroundPosition="0 -"+ee.offsetHeight
if(e.type=="mouseout")
ee.style.backgroundPosition="0 0"
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

时间: 2007-01-06

WPF图片按钮的实现方法

本文实例为大家分享了WPF图片按钮的实现代码,供大家参考,具体内容如下 直接代码 public class ImageButton : System.Windows.Controls.Button { /// <summary> /// 图片 /// </summary> public static readonly DependencyProperty ImageProperty = DependencyProperty.Register("Image", t

iOS 将系统自带的button改装成上图片下文字的样子

经常会用到上面是图片,下面是文字的Button.这样的控件可以自定义,但是偶然发现一个直接对系统button进行图片与位置的重新layout实现同样效果的代码,最后使用的按钮是这样的: 代码是通过继承UIButton,然后再重写layoutSubviews方法,对自带的图片和titleLabel进行重新的layout,代码如下: // // ZZZUpDownButton.h // // Copyright © 2016年 George. All rights reserved. // /**

pygame实现非图片按钮效果

本文实例为大家分享了pygame实现非图片按钮效果的具体代码,供大家参考,具体内容如下 按钮类程序 # -*- coding=utf-8 -*- import threading import pygame from pygame.locals import MOUSEBUTTONDOWN class BFControlId(object): _instance_lock = threading.Lock() def __init__(self): self.id = 1 @classmetho

微信小程序button标签open-type属性原理解析

这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信开放能力):合法值中的其中之一: getUserInfo说明:引导用户授权 而获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 而按钮的bindgetuserinfo属性 说明:用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的

android自定义按钮示例(重写imagebutton控件实现图片按钮)

由于项目这种类型的图片按钮比较多,所以重写了ImageButton类. 复制代码 代码如下: package me.henji.widget; import android.content.Context;import android.graphics.ColorMatrix;import android.graphics.ColorMatrixColorFilter;import android.util.AttributeSet;import android.view.MotionEvent

layui自己添加图片按钮并点击跳转页面的例子

1.按钮样式 <table class="layui-hide" id="test" lay-filter="menu-filter" style="margin: 0 10px;"></table> <script type="text/html" id="toolbtn"> <a class="" lay-event=&q

ASP.NET中ImageButton图片按钮控件的使用

ImageButton 说白了,就是一个能显示图片的按钮,用法和Button基本一致,无非就是点击之后触发事件,只是比Button展现更丰富一些. 一.常见 ImageButton 属性 属性 描述 ImageUrl 在 ImageButton 控件中显示的图像的路径. ToolTip 提示的文本. AlternateText 图像无法显示时显示的文本. 二.ImageButton实例演示 前台代码 ImageButton.aspx 复制代码 代码如下: <%@ Page Language=&quo

原生javascript实现图片按钮切换

先给大家看下效果展示图 以下为详细代码: 复制代码 代码如下: function LGY_picSwitch(option){     this.oWrap = this.getId(option.wrapID); //最外层元素     this.olistWrap = this.getNodeByClassname(this.oWrap,'gy_picSwitch_listWrap')[0];     this.oUl = this.olistWrap.getElementsByTagNam

Bootstrap源码解读表单(2)

源码解读Bootstrap表单 基础表单 对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制.主要将这些元素的margin.padding和border等进行了细化设置. 这些元素如果使用了类名"form-control",将会实现一些设计上的定制效果. 1. 宽度变成了100% 2. 设置了一个浅灰色(#ccc)的边框 3. 具有4px的圆角 4. 设置阴影效果,并且元素得到焦点之时,阴影和边框效果会