<!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;">¥<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>¥ 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>
JQ加mui的样式的类似淘宝购物车的整套功能
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 分离意识,自我意识,二元对立等等,大家目前所困扰的,我也曾经都经历过。 带着观察者输入的信念系统(心脏可以跳动50...
- PyCharm 2018.3.2版本,安装在mac os上,共享文件夹里还有linux版本,因为很少用window...
- 世间多少感情,都死在了沉默里。 很多人都是这样,生了气不知道怎么说,吵了架不知道如何缓和,明明想抱住ta说我们和好...