文档章节

Span模拟单选按钮Radio

高处胜寒
 高处胜寒
发布于 2017/10/17 15:13
字数 1336
阅读 12
收藏 0
<!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>【购物颜色、尺寸选择】Span模拟单选按钮Radio</title>


    <style type="text/css">
        .unchecked {
            border: 1px solid gray;
            padding: 6px 6px 6px 6px;
            cursor: pointer;
        }

        .checked {
            border: 2px solid #c00;
            padding: 6px 6px 6px 6px;
            cursor: pointer;
        }
    </style>


</head>

<body>
</body>


<script type="text/javascript" src="../js/chapterlist/jquery-1.7.1.min.js"></script>





<script type="text/javascript">




    var obj = {
        colorSpan: "",
        sizeSpan: "",
        chandi:""
    };



    function change(span) {
        $('span[name="' + $(span).attr('name') + '"]').each(function () {
            if (this.checked && this != span) {
                this.className = "unchecked";
                this.checked = false;
            }
        });
        obj[$(span).attr('name')] = span.innerHTML;
        span.className = "checked";
        span.checked = true;
        select();
    }



    function select() {
        var html = '';
        for (var i in obj) {
            if (obj[i] != '') {
                html += '<font color=orange>"' + obj[i] + '"</font> 、';
            }
        }
        html = '<b>已选择:</b> ' + html.slice(0, html.length - 1);
        $('#resultSpan').html(html);

    }


</script>


<div>
    颜色:
    <span class='unchecked' name='colorSpan' checked='false' onclick='change(this);'>卡其格</span>
    <span class='unchecked' name='colorSpan' checked='false' onclick='change(this);'>黑白格</span>
</div>


<br/>
<br/>



<div>
    尺码:
    <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);'>S</span>
    <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);'>M</span>
    <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);'>L</span>
</div>




<br/>
<br/>





<div>
    产地:
    <span class='unchecked' name='chandi' checked='false' onclick='change(this);'>北京</span>
    <span class='unchecked' name='chandi' checked='false' onclick='change(this);'>上海</span>
    <span class='unchecked' name='chandi' checked='false' onclick='change(this);'>陕西</span>
</div>







<br/>
<br/>




<div>
    <b>提示:</b>
    <span id='resultSpan'></span>
</div>



</html>

 

应用如下:

<?php

session_start();

!empty($_SESSION["sc"]) ? $sc = $_SESSION["sc"] : $sc = 0;//星数
!empty($_SESSION["exp"]) ? $exp = $_SESSION["exp"] : $exp = 0; //经验值
!empty($_SESSION["nickname"]) ? $nickname = $_SESSION["nickname"] : $nickname = "游客"; //昵称
!empty($_SESSION["avatar"]) ? $avatarUrl = $_SESSION["avatar"] : $avatarUrl = "./images/anony2.png"; //缩略图
isset($_SESSION["is_login"]) ? $is_login = $_SESSION["is_login"] : $is_login = null; //登陆标志位

/*
$sc = $_SESSION["sc"];
$exp = $_SESSION["exp"];
$nickname = $_SESSION["nickname"];
$avatarUrl = $_SESSION["avatar"];
$is_login = $_SESSION["is_login"];*/


/**
 * @param $sc
 * @param $avatarUrl
 * @param $nickname
 * @param $exp
 * @return string
 */

function isLoginText($sc = 0, $avatarUrl = "./images/anony2.png", $nickname = "游客", $exp = 0)
{

    $temp = <<< EOF
            <div class="user_record clearfix">
                <a id="my_news" target="_blank" href="./myhome.php"></a>
                <a class="user_avator" target="_blank" href="./myhome.php">
                    <img src="{$avatarUrl}"/>
                    <span class="name_in_banji ellipsis" title=""></span>
                </a>
                <div class="user_info">
                    <div class="user_nickname ellipsis" title="{$nickname}>"><a target="_blank" href="./myhome.php">$nickname</a>
                    </div>
                    <div class="user_exp">
                        <div class="user_exp_progress" id="exp" style="width:0px" data-number="70">
                            <span class="user_exp_star">$sc</span>
                            <span class="user_exp_num" id="exp_num" data-number="{$exp}">$exp</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="last_records_title">
                <div class="last_records_item">
                    <div class="num">0</div>
                    <div>今日做题数</div>
                </div>
                <div class="last_records_item">
                    <div class="num">0</div>
                    <div>坚持天数</div>
                </div>
                <div class="last_records_item">
                    <div class="num">0</div>
                    <div>总做题数</div>
                </div>
            </div>
EOF;

    return $temp;

}


?>


<!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>


    <script type="text/javascript" src="./js/index/12ArWF.js?t=1441100803"></script>
    <script type="text/javascript" src="js/index/index_diy.js?t=1460702878"></script>
    <script type="text/javascript" src="http://test.91xiaoyu.com/plus/layer/layer.js"></script>


    <link href="./css/index/9Gkmx-rq1yM.css?t=1459938934" rel="stylesheet" type="text/css"/>
    <link href="./css/index/crFms-mfd7J-9p19o.css?t=1501238479" rel="stylesheet" type="text/css"/>


    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>韩教授难题训练-小雨在线-云课堂</title>
    <meta name="applicable-device" content="pc"/>


    <style type="text/css">
        .unchecked {
            border: 1px solid #ccc;
            padding: 8px;
            cursor: pointer;
            margin: 0 16px 16px 0;
            border-radius: 5px;
        }

        .checked {
            cursor: pointer;
            background-color: #4FD768;
            color: #FFF;
            padding: 8px;
            border-color: #4FD768;
            margin: 0 16px 16px 0;
            border-radius: 5px;
        }
    </style>

</head>
<body>

<div class="global_canvas" style="background-image:url(./images/default3.jpg)"></div>

<script>

    var width = window.screen.availWidth;
    var height = window.screen.availHeight;
    if (typeof window.orientation == 'number') {
        if (window.orientation == 0 || window.orientation == 180) {
        } else {
            height = window.screen.availWidth;
            width = window.screen.availHeight;
        }
    }

    if (width > 1.77 * height) {
        $(".global_canvas").css("background-size", width + "px");
    } else {
        $(".global_canvas").css("background-size", "auto " + height + "px");
    }

</script>


<div class="wrapper clearfix">
    <div class="wrapper_left">
        <div class="side_bar">
            <a class="sb_item sb_set_grade ">
                请选年级
                <div class="sb_set_grade_arrow"></div>
            </a>
            <div class="grades">
                <a class="sb_item sb_grade grade_10 " href="javascript:;">小学</a>
                <a class="sb_item sb_grade grade_20 selected hjs_chuzhu" href="javascript:;">初中</a>
                <a class="sb_item sb_grade grade_30" href="javascript:;">高中</a>
            </div>
            <div class="sb_item sb_item_qr">
                <img src="./images/qr.png" style="width:98px;">
                <div>
                    <div style="font-size: 14px;margin-top: 6px;">
                        扫码下载APP
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="wrapper_right2 clearfix">
        <div class="courses">
            <div class="course course_1" style="top:110px;margin-left:-74px">
                <div class="course_img">
                    语文
                </div>
                <a class="course_href" href="javascript:;"></a>
            </div>


            <div class="course course_2" style="top:202px;margin-left:-166px">
                <div class="course_img">
                    数学
                </div>
                <a class="course_href" id="shuxue1" href="javascript:;"></a>
            </div>


            <div class="course course_4" style="top:202px;margin-left:18px">
                <div class="course_img">
                    物理
                </div>
                <a class="course_href" href="javascript:;"></a>
            </div>


            <div class="course course_5" style="top:294px;margin-left:-74px">
                <div class="course_img">
                    化学
                </div>
                <a class="course_href" href="javascript:;"></a>

            </div>


        </div>


        <!--右侧信息-->
        <div class="last_records">


            <?php

            if ($is_login === "bl4ctruxojGx3C5Y") {

                echo isLoginText($sc, $avatarUrl, $nickname, $exp);
            } else {
                echo isLoginText();
            }


            ?>


            <!--历史记录-->

            <div class="last_records_course">
                <div class="last_records_course_items">

                </div>
            </div>

            <!--历史记录结束-->


        </div>
    </div>


</div>


<div class="wrapper_versions">
    <div class="select_versions">

        <div class="versions_title clearfix">
            <div class="vt_text">请选择-年级/学期</div>
            <div class="vt_close"></div>
        </div>


        <div class="version_container clearfix">


            <div>
                年级:
                <span class='unchecked' name='grade' data-attr="211" checked='false' onclick='change(this);'>初一</span>
                <span class='unchecked' name='grade' data-attr="212" checked='false' onclick='change(this);'>初二</span>
                <span class='unchecked' name='grade' data-attr="213" checked='false' onclick='change(this);'>初三</span>
                <span class='unchecked' name='grade' data-attr="231" checked='false' onclick='change(this);'>中考</span>
            </div>

            <br><br>


            <div>
                学期:
                <span class='unchecked' name='xueqi' data-attr="0" checked='false' onclick='change(this);'>上学期</span>
                <span class='unchecked' name='xueqi' data-attr="1" checked='false' onclick='change(this);'>下学期</span>
            </div>


            <br><br>

            <div>
                <b>提示:</b>
                <span id='resultSpan'></span>
            </div>


        </div>

        <div class="version_options">
            <div class="version_cancel">取消</div>
            <div class="version_confirm" data-grade="213" data-xueqi="0">确认</div>
        </div>


    </div>
</div>


<script>
    $(document).ready(function () {

        //test
        layer.msg('目前还在开发中...');


        $(".sb_set_grade").bind("click", function () { //控制左侧年级显示隐藏
            $(".grades").toggle();
            $(".sb_set_grade").toggleClass('down');
        });

        num_animation();//数字加载动画

        $('.vt_close,.version_cancel').click(function () { //弹窗取消隐藏
            $('.version_name').removeClass('selected');
            $('.v_original').addClass('selected');
            $('.wrapper_versions').hide();
            $('.version_name').hide();
        });


        //修改2017-10-17

        $('.hjs_chuzhu').click(function () { //弹窗显示


            $('.vc_3').show();

            $('.wrapper_versions').show();


        });



        //新增提示2017-09-29
        $(".course_href,.grade_10,.grade_30").click(function (event) {

            if (event.target.id === "shuxue") {
                window.location.href = "./chapterlist.php?course_id=2";
            } else {
                event.preventDefault();
                layer.msg('目前只开通数学模块!', function () {
                    return false;
                });
            }

        });


    });
</script>


<script type="text/javascript">


    var obj = {
        grade: "",
        xueqi: ""
    };

    function change(span) {
        $('span[name="' + $(span).attr('name') + '"]').each(function () {
            if (this.checked && this != span) {
                this.className = "unchecked";
                this.checked = false;
            }
        });
        obj[$(span).attr('name')] = span.dataset.attr;
        span.className = "checked";
        span.checked = true;
        select();
    }


    function select() {
        var html = '';
        for (var i in obj) {
            if (obj[i] != '') {

                html += obj[i]+"@";
            }
        }
        html = html.slice(0, html.length - 1);

        $('#resultSpan').html(html);

    }


</script>


</body>
</html>

 

© 著作权归作者所有

高处胜寒

高处胜寒

粉丝 9
博文 215
码字总数 148558
作品 0
西安
程序员
私信 提问
拜读及分析Element源码-radio组件篇

element-ui 单选框radio组件源码分析,也是很常用的一个 radio-group: 单选组,适用于多个互斥的选项中选择的场景 radio: 单选 radio-button: 按钮样式的单选 2可以单独使用,也可与1组合使...

hollyDysania
2018/09/11
0
0
Element源码分析系列4-Radio(单选框)

简介 单选框这个组件看似简单,实则知识点众多,较为复杂,如果写一个html的原生单选框,那确实很简单,但是封装一个完整的单选组件就不那么简单了,接下来我们先介绍Vue的单选框的一些原理,...

超级索尼子
2018/08/21
0
0
element源码分析系列4--Radio巧夺天公的设计思想

前言 学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会更加深刻。一千个读...

hello等风来
06/06
0
0
jquery获取表单值的一些简单操作汇总

var mykindtxt=$("#kind option:selected").text();//获取表单selected 选中文本内容 jquery如何取得text,areatext,radio,checkbox,select的值,以及其他一些操作;假如我们有如下页面: <inpu......

小样
2012/02/17
1K
0
AmazeUI HTML元素

 按钮Button   am-btn-xx(default、primary、secondary、success、warning、danger、link)   am-radius 圆角按钮   am-round 椭圆形按钮   am-active 激活状态   am-disabled 禁用...

扎西多顿
2016/10/26
51
0

没有更多内容

加载失败,请刷新页面

加载更多

学习记录 java面试题(一)

1. JDK和JRE的区别 JDK是整个JAVA的核心,包括了Java运行环境JRE,一堆Java工具和Java基础的类库。通过JDK开发人员将源码 文件(java文件)编译成字节码文件(class文件)。 JRE是Java运行环境,...

Pole丶逐
22分钟前
5
0
springboot 部署到外部tomcat

入口类继承SpringBootServletInitializer 并重写protected SpringApplicationBuilder configure(SpringApplicationBuilder builder)方法 如下 import org.springframework.boot.SpringApplic......

雷开你的门
28分钟前
3
0
hashCode和equals方法的关系

equals相等,hashcode必相等; hashCode()在哈希表中起作用,如HashSet、HashMap等。 当我们向哈希表(如HashSet、HashMap等)中添加对象object时,首先调用hashCode()方法计算object的哈希码,...

无名氏的程序员
32分钟前
2
0
技术分享 | MySQL 慢查询记录原理和内容解析

作者:高鹏 文章末尾有他著作的《深入理解 MySQL 主从原理 32 讲》,深入透彻理解 MySQL 主从,GTID 相关技术知识。 源码版本:percona 5.7.14 本文为学习记录,可能有误请谅解,也提供了一些...

爱可生
40分钟前
3
0
elementui 树型节点

节点选择时,勾选节点。 提交给后端时,传递 this.$refs.menuTree.getCheckedKeys(); 半选父节点 getHalfCheckedKeys() 不需要提交。...

东东笔记
41分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部