JQ加mui的样式的类似淘宝购物车的整套功能

微信截图_20190110113504.png
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="{MODULE_URL}template/mobile/style/index/css/mui.min.css" rel="stylesheet" />
    <script src="{MODULE_URL}template/mobile/style/index/js/jquery-1.7.2.min.js"></script>
    <script src="{MODULE_URL}template/mobile/style/index/js/mui.min.js "></script>
    <link rel="stylesheet" type="text/css" href="{MODULE_URL}template/mobile/style/index/css/zjm-golbal.css" />
    <style>
         /*  改变默认checkbox 样式*/
        .mui-checkbox input[type=checkbox]:before {
            content: '\e411';
        }
        
        .mui-checkbox input[type=checkbox]:before {
            font-size: 20px;
            font-weight: 400;
            line-height: 1;
            text-decoration: none;
            color: #aaa;
            border-radius: 0;
            background: 0 0;
            -webkit-font-smoothing: antialiased;
        }
        
        .mui-checkbox.mui-left input[type=checkbox],
        .mui-radio.mui-left input[type=radio] {
            left: 20px;
        }
        
        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            position: static!important;
            top: 0px;
            right: 0px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 0;
            outline: 0!important;
            background-color: transparent;
            -webkit-appearance: none;
        }
        
        input[type=checkbox],
        input[type=radio] {
            box-sizing: border-box;
            padding: 0;
        }
    </style>
</head>

<body>
    <!--课程推荐的头部开始-->
    <header class="mui-bar mui-bar-nav curriculum-header mui-clearfix" style="border-bottom:1px solid whitesmoke; ">
        <h1 class="mui-title curriculum-block">购物车</h1>
        <span class="mui-pull-right guanli">管理</span>
    </header>
    <!--课程推荐的头部结束-->

    <!--内容加载区 开始-->
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper mui-clearfi" style="background: #fff;overflow-x:hidden;overflow-y: scroll; height: 100%;padding-top: 48px;">
        <div class="mui-scroll">
            <div class="mui-table-view mui-table-view-chevron table-view" style="margin-bottom: 200px;">
                <!--<?php $q = 0;for($i=0;$i<count($shops);$i++){?>-->
                <div class="teacher-kes mui-clearfix">
                    <div class="teacher-ke mui-input-row mui-checkbox mui-left">
                        <input name="checkbox1" value="Item 1" type="checkbox" class="shou-spanss shou-huiss1 mui-pull-left ">
                        <span class="teacher-ke-name"> 老师名字<!--<?php echo $shops[$i]['teacher']?>--> </span>
                    </div>
                    <!--<?php for($f=0;$f<count($shops[$i]['lesson']);$f++){?>-->
                    <div class="hot-div mui-clearfix hot-checked mui-input-row mui-checkbox mui-left" style="height: 104px!important;">
                        <input name="checkbox1" value="Item 1" type="checkbox" class="shou-spanss shou-huiss mui-pull-left ">
                        <a href=" url " class="mui-pull-left" style="padding: 15px 0px;width:90%;">
                            <img src="img" class="Hot-div-img mui-pull-left" />
                            <div class="Hot-div-shop mui-pull-right" style="padding: 4px 0px;">
                                <p class="hot-price-title mui-ellipsis" style="color: #333333;">课程名称</p>
                                <p class="shou-word mui-ellipsis" style="margin-top: 6px;">课程规格:几节课</p>
                                <p class="order-red" style="margin-top: 4px;">&yen;<span>价格</span></p>
                            </div>
                            <input type="hidden" name="zjid" value="<?php echo $shops[$i]['lesson'][$q]['zjid']?>"/>
                            <input type="hidden" name="lid" value="<?php echo $shops[$i]['lesson'][$q]['lessonid']?>"/>
                            <input type="hidden" name="id" value="<?php echo $shops[$i]['lesson'][$q]['id']?>"/>
                        </a>
                    </div>
                    <?php $q++;}?>
                </div>
                <?php }?>
            </div>
        </div>
    </div>
    <!--内容加载区 结束-->
    <div class="shop-check mui-input-row mui-checkbox mui-left">
        <input name="checkbox1" value="Item 1" type="checkbox" id="checkAll" class="shou-spansss shou-huisss mui-pull-left">
        <span class="mui-pull-left">全选</span>
        <div class="shop-check-right mui-pull-right">
            <div class="mui-pull-left shop-check-he">
                合计:<span>&yen; 0</span>
            </div>
            <a class="mui-pull-right shop-check-jie">结算(0)</a>
            <div class="mui-pull-right shop-check-jies">
                删除
            </div>
        </div>
    </div>
</body>
<script>
        //上拉加载
        mui.init({});
        $(function(){
            //选中的  价格函数
            function price(){
                var checks = $(".shou-huiss:checked");
                $(".shop-check-jie").html("结算(" + checks.length + ")");
                var Prices=0;
                var price = checks.siblings("a").children().children().find("span");
                for(var i = 0; i < price.length; i++) {
                    Prices += Number(price[i].innerHTML);
                }
                var Pr = Prices.toFixed(2);
                $(".shop-check-he span").html("¥"+Pr)
            }
            
            //二级  和  一级  取消选中  时的价格
            function pr(){
                $(".shop-check-jie").html("结算(0)");
                $(".shop-check-he span").html("¥ 0.00");
            }
            
            //一级   点击全选
            $(".shou-huisss").click(function() {
                var index = $(this)[0].checked;
                if(index == true) {
                    $(".shou-huiss").attr("checked", "checked");
                    $(".shou-huiss1").attr("checked", "checked");
                    price();
                }
                if(index == false) {
                    $(".shou-huiss").removeAttr("checked", "checked");
                    $(".shou-huiss1").removeAttr("checked", "checked");
                    pr();
                }
            });
            
            //二级  复选框 控制三级
            $(".shou-huiss1").each(function(i,v){
                 $(this).change(function(){
                     var index = $(this)[0].checked;
                     if(index==true) {
                        $(this).parent().siblings(".hot-div").find(".shou-huiss").attr("checked", true);
                        price();
                        if($(".shou-huiss1").not(".shou-huiss1:checked").size() <= 0) {
                            $(".shou-huisss").attr("checked", true);
                        } 
                     } else {
                        $(this).parent().siblings(".hot-div").find(".shou-huiss").attr("checked", false);
                        pr();
                        if($(".shou-huiss1").not(".shou-huiss1:checked").size() >0){
                            $(".shou-huisss").attr("checked", false);
                        }
                     }
                 });
            });
        
            //三级 复选框
            $(".teacher-kes").each(function(i,v){
                var that=$(".teacher-kes").eq(i).find(".hot-div>.shou-huiss");
                var s=$(".teacher-kes").eq(i).find(".teacher-ke>.shou-huiss1");
                that.change(function() {
                    if(that.not(".shou-huiss:checked").size() <= 0) {
                        s.attr("checked", true);
                        if($(".shou-huiss").not(".shou-huiss:checked").size() <= 0) {
                            $(".shou-huisss").attr("checked", true);
                        }
                    } else {
                        s.attr("checked", false);
                        if($(".shou-huiss").not(".shou-huiss:checked").size() >0) {
                            $(".shou-huisss").attr("checked", false);
                        }
                    }
                    
                    var checks = $(".shou-huiss:checked");
                    if(checks.length != '0') {
                        $(".shop-check-jie").html("结算(" + checks.length + ")");
                        var Prices=0;
                        var price = $(".shou-huiss:checked").siblings("a").children(".Hot-div-shop").find(".order-red").find("span");
                        for(var i=0;i<price.length;i++){
                            Prices += Number(price[i].innerHTML);
                        }
                        var Pr= Prices.toFixed(2);
                        $(".shop-check-he span").html("¥"+Pr)
                    }
                    if(checks.length == 0) {
                        pr();
                    }
                });
            });
            
            //控制  购物车的数量
            var count=$(".about-navs-span").html();
            if(count==0){
                $(".about-navs-span").hide();
            }else{
                $(".about-navs-span").show();
            }
            /* $(".shou-huiss").change(function() {
                if($(".shou-huiss").not(".shou-huiss:checked").size() <= 0) {
                    $(".shou-huisss").attr("checked", true);
                    $(".shou-huiss1").attr("checked", true);
                } else {
                    $(".shou-huisss").attr("checked", false);
                    $(".shou-huiss1").attr("checked", false);
                }
                var checks = $(".shou-huiss:checked");
                if(checks.length != '0') {
                    $(".shop-check-jie").html("结算(" + checks.length + ")");
                    var Prices=0;
                    var price = $(".shou-huiss:checked").siblings("a").children(".Hot-div-shop").find(".order-red").find("span");
                    for(var i=0;i<price.length;i++){
                        Prices += Number(price[i].innerHTML);
                    }
                    var Pr= Prices.toFixed(2);
                    $(".shop-check-he span").html("¥"+Pr)
                }
                if(checks.length == 0) {
                    pr();
                }
            }); */

            
            //点击管理
            $(".guanli").click(function() {
                var html = $(this).html();
                if(html == "管理") {
                    $(".shop-check-jies").show();
                    $(".shop-check-jie").hide();
                    $(this).html("编辑")
                } else if(html == "编辑") {
                    $(".shop-check-jies").hide();
                    $(".shop-check-jie").show();
                    $(this).html("管理");
                }
            });
            
            //选中删除
            $(".shop-check-jies").click(function() {
                var checks = $(".shou-huiss:checked");
                if(checks.length == 0) {
                    mui.toast('请选择您要删除的课程', {
                        duration: 'long',
                        type: 'div'
                    });
                    return false;
                }
                if(checks.length != 0) {
                 var btnArray = ['否', '是'];
                    mui.confirm('确定要删除所选的课程吗?',"",btnArray, function(e) {
                        if (e.index == 1) {
                            var id=[];
                            var ids=$(".shou-huiss:checked").siblings("a").find("input[name='id']");
                            for(var i=0;i<ids.length;i++){
                                var val=ids[i].value;
                                id.push(val);
                            }
                            var uid = '{$uid}';
                            $.ajax({
                                url:"{php echo $this->createMobileUrl('shopcart', array('op' => 'dsc'))}",
                                dataType:'json',
                                type:'POST',
                                data:{uid:uid,id:id},
                                success:function(msg){
                                    if(msg==1){
                                        var erji=$(".shou-huiss1:checked");
                                        $(".shou-huiss1:checked").parent().parent().remove();
                                        checks.parent().remove();
                                        $(".shou-huisss").attr("checked", false);
                                        pr();
                                        window.location.reload();
                                    }
                                }
                             });
                        } 
                    });
                }
            });

            //点击结算
            $(".shop-check-jie").click(function() {
                var checks = $(".shou-huiss:checked");
                if(checks.length == 0) {
                    mui.toast('请选择您要购买的课程', {
                        duration: 'long',
                        type: 'div'
                    });
                    return false;
                }
                if(checks.length != 0) {
                    var id=[];
                    var ids=$(".shou-huiss:checked").siblings("a").find("input[name='id']");
                    for(var i=0;i<ids.length;i++){
                        var val=ids[i].value;
                        id.push(val);
                    }
                    var idss=id.join(",");
                    var uid = '{$uid}';
                    window.top.location.href ='./index.php?i=1&c=entry&op=confirm&id='+idss+'&do=shopcart&m=fy_lessonv2';
                    $(".shou-huiss").attr("checked", false);
                    $(".shou-huiss1").attr("checked", false);
                    $(".shou-huisss").attr("checked", false);
                    pr();
                }
            });
        });
        
    </script>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容