手机移动端各种按钮的代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是手机移动端各种按钮的代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为手机移动端各种按钮的代码，属于站长常用代码" />
<title>手机移动端各种按钮的代码</title>
<!--demo展示所用css，不用关心 begin-->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" href="css/widget/button/button_demo.css" />
<!--demo展示所用css end-->
<!--组件依赖css begin-->
<link rel="stylesheet" type="text/css" href="css/widget/button/button.css" />
<link rel="stylesheet" type="text/css" href="css/widget/button/button.default.css" />
<link rel="stylesheet" type="text/css" href="css/icons.default.css" />
<!--组件依赖css end-->
<!--组件依赖js begin-->
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/mobileevent2pc.js"></script><!--此js为在PC端方便查看效果，用在手机上，可去掉此js-->
<script type="text/javascript" src="js/zepto.extend.js"></script>
<script type="text/javascript" src="js/zepto.highlight.js"></script>
<script type="text/javascript" src="js/zepto.ui.js"></script>
<script type="text/javascript" src="js/widget/button.js"></script>
<script type="text/javascript" src="js/widget/button.input.js"></script>
<!--组件依赖js end-->
</head>
<body>
<!-- 代码 开始 -->
<div class="section">
    <div>
        <a id="btn1">点击后不可用</a>
        <a class="button" href="#" target="_blank">a按钮</a>
        <button class="button">button按钮</button>
    </div>
</div>
<div class="section">
    <div>
        <input id="button11" data-icon="checkbox" type="checkbox" />
        <label for="button11">复选按钮1</label>
        <input id="button12"  data-icon="checkbox" type="checkbox" />
        <label for="button12">复选按钮2</label>
        <input id="button13" data-icon="radio" type="radio" name="radio1" />
        <label for="button13">单选1</label>
        <input id="button14"  data-icon="radio" type="radio" name="radio1" />
        <label for="button14">单选2</label>
        <input id="button15"  data-icon="radio" checked="checked" type="radio" name="radio1" />
        <label for="button15">单选3</label>
    </div>
</div>
<script>
    $('.button').button();
    $('#button11, #button12, #button13, #button14, #button15').button();
	
	$('#btn1').button({
        click: function() {
            this.disable();
        }
    });

    $.ui.button({
        label: '复选按钮1',
        type: 'checkbox',
        container: '#btsn_create'
    });

    $.ui.button({
        label: '复选按钮2',
        type: 'checkbox',
        container: '#btsn_create'
    });

    $.ui.button({
        type: 'radio',
        label: '单选1',
        attributes: {
            name: 'test'
        },
        container: '#btsn_create'
    });

    $.ui.button({
        type: 'radio',
        label: '单选2',
        selected: true,
        attributes: {
            name: 'test'
        },
        container: '#btsn_create'
    });
</script>
<!-- 代码 结束 -->
</body>
</html>

JS代码(zepto.highlight.js):

/** * @file 实现了通用highlight方法。 * @name zepto.highlight * @desc 点击高亮效果 * @import core/zepto.js,core/zepto.extend.js */
(function($){
	var actElem,inited = false,timer,cls,removeCls = function(){
	clearTimeout(timer);
	if(actElem && (cls = actElem.attr('highlight-cls'))){
	actElem.removeClass(cls).attr('highlight-cls','');
	actElem = null;
}
}
;
	$.extend($.fn,{
	/** * @name highlight * @desc 禁用掉系统的高亮，当手指移动到元素上时添加指定class，手指移开时，移除该class * @grammar highlight(className) ⇒ self * @example var div = $('div');
	* div.highlight('div-hover');
	* * $('a').highlight();
	// 把所有a的自带的高亮效果去掉。 */
 highlight:function(className){
	inited = inited || !!$(document).on('touchend.highlight touchmove.highlight touchcancel.highlight',removeCls);
	removeCls();
	return this.each(function(){
	var $el = $(this);
	$el.css('-webkit-tap-highlight-color','rgba(255,255,255,0)').off('touchstart.highlight');
	className && $el.on('touchstart.highlight',function(){
	timer = $.later(function(){
	actElem = $el.attr('highlight-cls',className).addClass(className);
}
,100);
}
);
}
);
}
}
);
}
)(Zepto);

CSS代码(icons.default.css):

/* CSS Document */
.ui-icon{background-image:url(../images/icons-36-black.png);-webkit-background-size:776px 18px;background-size:776px 18px;width:18px;height:18px;display:inline-block;}
.ui-icon.white{background-image:url(../images/icons-36-white.png);}
/* plus minus */
.ui-icon-plus{background-position:-0 50%;}
.ui-icon-minus{background-position:-36px 50%;}
/* delete/close */
.ui-icon-delete{background-position:-72px 50%;}
/* arrows */
.ui-icon-arrow-r{background-position:-108px 50%;}
.ui-icon-arrow-l{background-position:-144px 50%;}
.ui-icon-arrow-u{background-position:-180px 50%;}
.ui-icon-arrow-d{background-position:-216px 50%;}
/* misc */
.ui-icon-check{background-position:-252px 50%;}
.ui-icon-gear{background-position:-288px 50%;}
.ui-icon-refresh{background-position:-324px 50%;}
.ui-icon-forward{background-position:-360px 50%;}
.ui-icon-back{background-position:-396px 50%;}
.ui-icon-grid{background-position:-432px 50%;}
.ui-icon-star{background-position:-468px 50%;}
.ui-icon-alert{background-position:-504px 50%;}
.ui-icon-info{background-position:-540px 50%;}
.ui-icon-home{background-position:-576px 50%;}
.ui-icon-search{background-position:-612px 50%;}
.ui-icon-checkbox{background-position:-684px 50%;}
.ui-state-active .ui-icon-checkbox{background-position:-648px 50%;}
.ui-icon-checkbox-off{background-position:-684px 50%;}
.ui-icon-checkbox-on{background-position:-648px 50%;}
.ui-icon-radio{background-position:-756px 50%;}
.ui-state-active .ui-icon-radio{background-position:-720px 50%;}
.ui-icon-radio-off{background-position:-756px 50%;}
.ui-icon-radio-on{background-position:-720px 50%;}

附件:下载该文件资源,减少时间成本(增值服务)