jQuery滑动开关按钮效果

最新推荐文章于 2021-11-13 22:28:23 发布

weixin_30741653

最新推荐文章于 2021-11-13 22:28:23 发布

阅读量494

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/GeniusLyzh/p/4089504.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=utf-8" /> <title>sitchBox</title> <style> /* -- Version: 1.0 Description: System Style Author: linux -- */ /*-- Styles Index ======= 1.0 Reset 2.0 Common style 3.0 Main structure 3.1 Wrapper 3.2 Header 3.3 Containter 3.4 Footer 4.0 Clear --*/ /* -- 1.0 Reset -- */ body,ul,dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;padding:0;font:12px "宋体",'Microsoft YaHei',Arial,Helvetica,sans-serif;} ul,ol{padding-left:0;list-style-type:none;} img{border:0 none;} em,i{font-style:normal;} input,textarea,select{font-size:12px;font-size:100%;font-family:inherit;} a:link{color:#4F14F7; text-decoration:none;} a:hover{color:#FF9900; text-decoration:underline;} a:visited{color:#551a8b; text-decoration:none;} a:active{color: #cc0000;text-decoration:none;} input[type="text"]{border:1px solid #c7c7c7; outline: 0 none;} input[type="text"]:focus{border:1px solid #f6ca1c;} /* -- 2.0 Common style -- */ /* -- display && float -- */ .dn{display:none;} .db{display:block;} .fl{float:left;} .fr{float:right;} /* -- position -- */ .rel{position: relative;} .abs{position: absolute;} /* -- 3.0 Main structure -- */ .main-wraper{padding: 5px;} .switchBox{margin-right: 10px;} .switch_box_l{width: 9px;height: 21px;background: url(http://files.cnblogs.com/bigboyLin/switch_box_l.gif) no-repeat;} .switch_box_r{width: 9px;height: 21px;background: url(http://files.cnblogs.com/bigboyLin/switch_box_r.gif) no-repeat;} .switch_box_c{height: 21px;background: url(http://files.cnblogs.com/bigboyLin/switch_box_c.gif) repeat-x;} .switchBtn{width:60px;height: 20px;line-height:20px; text-align:center;color:#fff;font-family:'Microsoft YaHei';background: url(http://files.cnblogs.com/bigboyLin/btnSwitch_c.gif) repeat-x;top: 0px;left: 0px;cursor: pointer;z-index: 999;} .switchBox .swichTxt{padding:0 8px;height: 20px;line-height:22px;text-align:center;font-family:'Microsoft YaHei';color: #797e81;text-decoration: none;} .switchBtn-l{width: 8px;height: 20px;line-height:20px; text-align:center;color:#fff;font-family:'Microsoft YaHei';background: url(http://files.cnblogs.com/bigboyLin/btnSwitch_l.gif) no-repeat;position:absolute;top: 0px;left: -6px;cursor: pointer;} .switchBtn-r{width: 8px;height: 20px;line-height:20px; text-align:center;color:#fff;font-family:'Microsoft YaHei';background: url(http://files.cnblogs.com/bigboyLin/btnSwitch_r.gif) no-repeat;position:absolute;top: 0px;right: -6px;cursor: pointer;} /* -- 4.0 Clear -- */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { clear: both } .clearfix { zoom: 1 } /*topbar*/ .topbar{background:#ceeeff;padding:10px 5px;border:1px solid #A6D4EA;margin-top:5px;} .topbar .tit{color: #00578F;font-size: 14px;font-weight: bold;} </style> </head> <body> <div class="main-wraper">  <div class="topbar clearfix"> <div class="boxwrap fr"> <div class="switchBox fl" id="timeList" style="width:300px;" typeId="time"> <table cellpadding="0" cellspacing="0"> <tr> <td class="switch_box_l"></td> <td class="switch_box_c rel"> <span class="abs switchBtn" > <i class="switchBtn-l"></i> <i class="switchBtn-r"></i> <span class="curTxt">24小时</span> </span> <a href="javascript:void(0);" class="swichTxt" id="24" >24小时</a> <a href="javascript:void(0);" class="swichTxt" id="48">48小时</a> <a href="javascript:void(0);" class="swichTxt" id="72">72小时</a> </td> <td class="switch_box_r"></td> </tr> </table> </div> <div class="switchBox fl" id="cityList" typeId="city"> <table cellpadding="0" cellspacing="0"> <tr> <td class="switch_box_l"></td> <td class="switch_box_c rel"> <span class="abs switchBtn" > <i class="switchBtn-l"></i> <i class="switchBtn-r"></i> <span class="curTxt">城市</span> </span> <a href="javascript:void(0);" class="swichTxt" id="city">城市</a> <a href="javascript:void(0);" class="swichTxt" id="station">站点</a> </td> <td class="switch_box_r"></td> </tr> </table> </div> </div> </div>  </div> </div> <script type="text/javascript" src="http://files.cnblogs.com/bigboyLin/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://files.cnblogs.com/bigboyLin/switchbox.js"></script> <script type="text/javascript"> $(function(){ //初始化滑动div loadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html'); //点击回调函数 function loadData(){ } }); </script> </body> </html>

HTML结构：

<div class="boxwrap fr"><!--容器 开始-->
            <div class="switchBox fl" id="timeList" typeId="time">
            <table  cellpadding="0" cellspacing="0">
                <tr>
                    <td class="switch_box_l"></td>
                    <td class="switch_box_c rel">
                            <span class="abs switchBtn" >
                                <i class="switchBtn-l"></i>
                                <i class="switchBtn-r"></i>
                                <span class="curTxt">24小时</span>
                            </span>
                            <a href="javascript:void(0);" class="swichTxt" id="24" >24小时</a>
                            <a href="javascript:void(0);" class="swichTxt" id="48">48小时</a>
                            <a href="javascript:void(0);" class="swichTxt" id="72">72小时</a>
                    </td>
                    <td class="switch_box_r"></td>
                </tr>
            </table>
        </div>
        <div class="switchBox fl" id="cityList" typeId="city">
            <table  cellpadding="0" cellspacing="0">
                <tr>
                    <td class="switch_box_l"></td>
                    <td class="switch_box_c rel">
                            <span class="abs switchBtn" >
                                <i class="switchBtn-l"></i>
                                <i class="switchBtn-r"></i>
                                <span class="curTxt">城市</span>
                            </span>
                            <a href="javascript:void(0);" class="swichTxt" id="city">城市</a>
                            <a href="javascript:void(0);" class="swichTxt" id="station">站点</a>
                    </td>
                    <td class="switch_box_r"></td>
                </tr>
            </table>
        </div>
        </div><!--容器 结束-->

初始化函数：

/*@.boxwrap :滑动按钮父容器，同一界别的滑动按钮必须包含在同一个容器中
 *@loadData :点击按钮后回调函数
 *@#frameMain : 加载内容的iframe Id
 *@tab.html : 提交参数的页面
 */
loadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html');

完整demo：

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=utf-8" />
<title>sitchBox</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main-wraper">
    <!--BEGIN topbar  -->
    <div class="topbar clearfix">
        <div class="boxwrap fr">
            <div class="switchBox fl" id="timeList" typeId="time">
            <table  cellpadding="0" cellspacing="0">
                <tr>
                    <td class="switch_box_l"></td>
                    <td class="switch_box_c rel">
                            <span class="abs switchBtn" >
                                <i class="switchBtn-l"></i>
                                <i class="switchBtn-r"></i>
                                <span class="curTxt">24小时</span>
                            </span>
                            <a href="javascript:void(0);" class="swichTxt" id="24" >24小时</a>
                            <a href="javascript:void(0);" class="swichTxt" id="48">48小时</a>
                            <a href="javascript:void(0);" class="swichTxt" id="72">72小时</a>
                    </td>
                    <td class="switch_box_r"></td>
                </tr>
            </table>
        </div>
        <div class="switchBox fl" id="cityList" typeId="city">
            <table  cellpadding="0" cellspacing="0">
                <tr>
                    <td class="switch_box_l"></td>
                    <td class="switch_box_c rel">
                            <span class="abs switchBtn" >
                                <i class="switchBtn-l"></i>
                                <i class="switchBtn-r"></i>
                                <span class="curTxt">城市</span>
                            </span>
                            <a href="javascript:void(0);" class="swichTxt" id="city">城市</a>
                            <a href="javascript:void(0);" class="swichTxt" id="station">站点</a>
                    </td>
                    <td class="switch_box_r"></td>
                </tr>
            </table>
        </div>
        </div>
    </div>
    <!-- END topbar -->
    <div class="main-conent">
        <iframe src="tab.html" frameborder="0" width="100%" frameborder="0" height="500" id="frameMain"></iframe>
    </div>
    </div>
    <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="script/switchbox.js"></script>
    <script type="text/javascript">
    $(function(){
        //初始化滑动div
        loadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html');
    });
    //点击回调函数
    function loadData(){
        var obj = arguments[0];
        var params = "";
        var url ="tab.html?";
        if(typeof obj !="undefined" && obj !=null){
            var value = obj.value;
            var type  = obj.type;
            var param =type+"="+value;
            params = param+"&";
            $('[typeId="'+type+'"]').siblings().each(function(k){
                var param = $(this).attr('typeId')+"="+$(this).attr('selVal');
                params+=param+"&";
            });
            params = params.substring(0,params.length-1);
            url = url + params;
            alert("切换到..."+url);
            loadUrl('#frameMain', url);
        }
    }
    </script>
</body>
</html>

View Code

JS:

/**
 * 滑动div初始化函数
 * @wrap 所属顶层容器
 * @fn 点击后回调函数
 * @iframe 子页面加载
 * @url 提交的页面
 */
function loadSwitchBox(wrap, fn, iframe, url) {
    $(".switchBox").each(function() {
        var id = $(this).attr("id");
        var type = $(this).attr("typeId");
        createSlideDiv(id, type, fn);
    });
    loadDataInit(wrap, url, iframe);
}
/**
 *初始化数据
 *@wrap 顶层容器
 *@url 提交的页面
 *@iframe 加载子页面
 */
function loadDataInit(wrap, url, iframe) {
    var params = "";
    var url = url + "?";
    $(wrap).find('div[typeId]').each(function() {
        var param = $(this).attr('typeId') + "=" + $(this).attr('selVal');
        params += param + "&";
    });
    params = params.substring(0,params.length-1);
    url = url + params;
    alert("初始化.."+ url);
    loadUrl(iframe, url);
}

/**
 *@iframe 加载内容页面
 *@url url
 */
function loadUrl(iframe, url) {
    $(iframe).attr('src', url);
}

/**
 * 创建一个滑动div容器
 * @wrapperId 容器ID
 * @type 切换标签的类型
 * @fnCallBack 回调函数
 */
function createSlideDiv(wrapperId, type, fnCallBack) {
    calTabWidth(wrapperId); //初始化容器宽度
    var $wraper = $('#' + wrapperId);
    //默认选中第一项
    var default_padding = 5;
    var default_BtnWidth = $wraper.find('.swichTxt').eq(0).width() + default_padding;
    var $switchBtn = $wraper.find('.switchBtn');
    $switchBtn.width(default_BtnWidth); //浮动按钮宽度
    $wraper.find('.swichTxt').eq(0).addClass('cur'); //设置选中选项
    $wraper.attr('selVal', $wraper.find('.swichTxt').eq(0).attr('id'));

    //添加click事件
    $wraper.find('.swichTxt').click(function() {
        var default_padding = 5;
        var newIndex = $(this).index(),
            oldIndex = $wraper.find('.cur').index(),
            curTxt = $(this).html(),
            eleWidth = $(this).width() + default_padding,
            value = $(this).attr('id');
        distant = -1;
        $wraper.attr('selVal', value);
        distant = moveWidth(wrapperId, oldIndex, newIndex); //计算滑动距离
        //回调函数参数 点击标签的类型 和 值
        var obj = {
            type: type,
            value: value
        };

        //左移动
        if (newIndex > oldIndex) {
            $wraper.find(".switchBtn").animate({
                'left': '+=' + distant + 'px'
            }, function() {
                $wraper.find('.curTxt').html(curTxt);
                $wraper.find("#switchBtn").width(eleWidth);
                //执行回调函数
                if ($.isFunction(fnCallBack)) fnCallBack(obj);
            });
            oldIndex = newIndex;
        } else if (newIndex < oldIndex) { //右移动
            $wraper.find(".switchBtn").animate({
                'left': '-=' + distant + 'px'
            }, function() {
                $(this).find('.curTxt').html(curTxt);
                $wraper.find(".switchBtn").width(eleWidth);
                //执行回调函数
                if ($.isFunction(fnCallBack)) fnCallBack(obj);
            });
            oldIndex = newIndex;
        }
        $wraper.find('.cur').removeClass('cur');
        $(this).addClass('cur');
    });
}

/**
 *计算容器宽度
 * @wrapperId 容器id
 */
function calTabWidth(wrapperId) {
    var $wraper = $('#' + wrapperId);
    var wrapperWidth = 0;
    var tdSpace = 18; //左右圆角宽度
    var oPadding = 5; //元素默认间距
    $wraper.find('.swichTxt').each(function(i) {
        wrapperWidth += $(this).outerWidth() + oPadding;
    });
    wrapperWidth = wrapperWidth + tdSpace;
    $wraper.width(wrapperWidth);
}

/**
 *计算按钮移动距离
 * @wrapperId 容器id
 * @oldIndex 之前选中的选项索引
 * @newIndex 当前点击选项索引
 */
function moveWidth(wrapperId, oldIndex, newIndex) {
    var $wraper = $('#' + wrapperId);
    var width = 0;
    //向右移动
    if (oldIndex < newIndex) {
        var $s_btn = $wraper.find(".switchBtn");
        var $a_btn = $wraper.find('.swichTxt').eq(newIndex - 1);
        //当前span左侧位置离左边的距离
        var curBtn = $s_btn.offset().left;
        //目标标签左侧位置离左边的距离
        var einA = $a_btn.offset().left;
        width = parseInt(einA - curBtn + 9); //?
    } else { //向左移动
        var $s_btn = $wraper.find(".switchBtn");
        var $a_btn = $wraper.find('.swichTxt').eq(newIndex - 1);
        //当前span左侧位置离左边的距离
        var curBtn = $s_btn.offset().left;
        //目标标签左侧位置离左边的距离
        var einA = $a_btn.offset().left;
        width = parseInt(curBtn - einA);
    }
    return width;
}

View Code

实例下载：

jQuery实现按钮滑动切换.zip

转载于:https://www.cnblogs.com/GeniusLyzh/p/4089504.html

weixin_30741653

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery滑动开关按钮效果

效果图： <!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&...
复制链接

扫一扫