【原创】工作积累功能块-JS+CSS

删除前提示

$(document).on("click",".panel .btn-del ",function(){
    if(confirm("确定删除？"))
    {
        $(this).parent().parent().parent().remove();
    }

})

swal提示框（ this特别注意）否则获取不到

$(document).on("click",".panel .btn-del",function(){
    var thisObj = $(this);  //在swal外面获取这个对象
    swal({
            title: "确定删除？",
            type: "warning",
            showCancelButton:true,
            confirmButtonText: '确认',
            cancelButtonText:"取消",
            closeOnConfirm: true
        },
        function(isConfirm){
            if(isConfirm)
            {

                $(thisObj).parent().parent().parent().remove();
            }
        }
    );
})

check勾选批量删除 

//前端批量删除
    $("#btn-purchase-del").click(function(){
        var checked = $(".otoc-table-checkall tbody input:checked")
        for(var i=0;i< checked.length;i++){
            var $delChecked = checked.eq(i).parent().parent().parent().parent();
            $delChecked.next(".tr-children").remove();
            $delChecked.remove();
        }
        $(".j-parts-quantity").blur();
    })

门店系统-全选-与父子表格行的样式操作（在模态窗里的全选表格，需要页面加载完毕后，才能获取到）

//checkbox 全选，单择与tr行样式改变
$(document).on('change',".table-check :checkbox:first",function(){
    $(this).closest("table")
        .find(":checkbox:not(:first)")
        .prop("checked", this.checked);

    if($(".table-check :checkbox").is(':checked'))
    {
        $(".table-check tr").addClass("tr_selected");
    }
    else{
        $(".table-check tr").removeClass("tr_selected");
    }
});

$(document).on('change',".table-check tbody :checkbox",function(){
    if($(this).is(':checked'))
    {
        $(this).parent().parent().parent("tr").addClass("tr_selected");

        //含有父子tr行
        var this_tr = $(this).parent().parent().parent("tr.tr-parent");
        if (this_tr.next("tr.tr-children").length !==0)
        {
            alert("有孩子！")
            this_tr.next("tr.tr-children").addClass("tr_selected");
        }
        else{
            alert("没有孩子")
        }

    }
    else
    {
        $(this).parent().parent().parent("tr").removeClass("tr_selected");
        
        //含有父子tr行
        var this_tr = $(this).parent().parent().parent("tr.tr-parent");
        if (this_tr.next("tr.tr-children").length !==0)
        {
            this_tr.next("tr.tr-children").removeClass("tr_selected");
        }
    }

});

---------------------------------选择金额，对应的按钮变化  开始--------------------------------------

			//选择金额
	 	  var all_money_box = $(".row-list .otoc-box-money")
	 	  all_money_box.click(function(){
	 	  	
				//选定样式	 	  	
		 	 	all_money_box.removeClass("otoc-box-money-selected")
		 	 	$(this).addClass("otoc-box-money-selected");
		 	 	
				//状态判断
		 	 	if (all_money_box.hasClass("otoc-box-money-selected"))
		 	 	{
		 	 		$(".selectMoney-status-ok").show();
		 	 		$(".selectMoney-status-Initialization").hide()
		 	 	}
		 	 	else
		 	 	{
		 	 		$(".selectMoney-status-ok").hide();
		 	 		$(".selectMoney-status-Initialization").show()
		 	 	}
	 	 	})

<!--btn-->
<nav class="bar bar-tab otoc-bg-white">
	<!--状态-OK-->
	<span class="selectMoney-status-ok">
		<p class="btn-text otoc-p-a"><a href="Add-MbNum.html" class="external">赠送他人 </a></p>
		<a href="#" class="button button-fill button-big button-otoc" id="btn-next">充值</a> <!--订单确认-->
	</span>
	<!--状态-初始化-->
	<span class="selectMoney-status-Initialization">
		<p class="btn-text-disable otoc-p-a">赠送他人 </p>
		<a href="#" class="button button-fill button-big disabled">充值</a>
	</span>
</nav>

---------------------------------选择金额，对应的按钮变化  结束--------------------------------------

----------------------------评价-满意-不满意----开始------------------------------------------

HTML

<!--icon-->
<div class="row row-comment">
	<div class="col-50">
		<div class="comment-img"><img src="img/good-default.png"/></div>
		<div class="comment-text">满意</div>
	</div>
	<div class="col-50">
		<div class="comment-img"><img src="img/bad-default.png"/></div>
		<div class="comment-text">不满意</div>
	</div>
</div>

JS

//满意
$(".row-comment > div").eq(0).click(function(){
	var this_src = $(this).find("img").attr("src")
	if (this_src=="img/good-default.png")
	{
		$(this).find("img").attr("src","img/good-selected.png");
		$(".row-comment > div").eq(1).find("img").attr("src","img/bad-default.png"); //另一个也做改变
	}
	else{
		$(this).find("img").attr("src","img/good-default.png");
		
	}
})

//不满意
$(".row-comment > div").eq(1).click(function(){
	var this_src = $(this).find("img").attr("src")
	if (this_src=="img/bad-default.png")
	{
		$(this).find("img").attr("src","img/bad-selected.png");
		$(".row-comment > div").eq(0).find("img").attr("src","img/good-default.png");//另一个也做改变
	}
	else{
		$(this).find("img").attr("src","img/bad-default.png");
	}
})

----------------------------评价-满意-不满意----结束------------------------------------------

--------------------------------------------OEM码逗号  开始------------------------------------------

特点：

1. 后端循环便捷，无需判断最后一个项不要逗号的特殊性；
2. 前端无js，纯css。
3. 此项较为通用，建议放到组件css中。

html如下

<span class="otoc-dot-box">
  <i>77890000</i>
  <i>77890000</i>
  <i>77890000</i>
</span>

css如下

/*点循环*/
/*适用：OEM码循环*/
.otoc-dot-box > i{ padding-right: 15px; font-style: normal;}
.otoc-dot-box > i:after{
  content:","
}
.otoc-dot-box > i:nth-last-child(1):after{
  content:""
}

--------------------------------------------OEM码逗号  结束------------------------------------------

-----------------------------------------------勾选行  开始----------------------------------------

COS公司系统-行驶证预览

截图如下：

html如下：

<div class="col-md-12 otoc-m-b-0 carBox">
	<div>
	  <i class="fa fa-check" aria-hidden="true"></i> 宝马310i 激情版
	</div>
	<div>
	  <i class="fa fa-check" aria-hidden="true"></i> 宝马310i 燃情版
	</div>
	<div>
	   <i class="fa fa-check" aria-hidden="true"></i> 宝马310i 尊贵版
	</div>
</div>   

css如下：

.carBox > div{ margin-bottom: 15px; padding: 8px 15px; border:1px solid #eeeeee; transition: all 0.3s; cursor: pointer;}
.carBox > div:hover{ transform:scale(0.98);}
.carBox > div.selected{ color:#32c5d2; background: #F7FEFF; border:1px solid #32c5d2;}
.carBox > div > i{ display: none !important;}
.carBox > div.selected > i{ display:inline-block !important;}

js如下：

$(function(){
    $(".carBox > div").click(function(){
       $(this).addClass("selected").siblings().removeClass("selected")
    })
})

-----------------------------------------------勾选行  结束----------------------------------------

-------------------------解决：二级弹窗关闭带走一级弹窗滚动条   开始---------------------------

在 add-base.js

/*

备注：多窗口，

需要在模态窗父级窗口，新增自定义属性：modal="father"，

子窗口，新增自定义属性：modal="children"

---chai

*/

$("div[modal='children']").on('hide.bs.modal', function () {

$("div[modal='father']").css("overflow-y","auto");

})

------------------------解决：二级弹窗关闭带走一级弹窗滚动条   结束----------------------------

-------------------------解决：门店系统-数据表格初始化层   开始---------------------------

js如下

/*
 * 组件名称：数据表格的初始化处理
 * 功能实现：数据表为空时，表格tbody撑起，上面赋层给出提示
 * 使用备忘：
 *        ① 需要在数据表给.otoc-table-initialize类；
 *        ② 依赖样式，otoc-components.css中的.div_layer类，
 *        ③ container类加上.otoc-p-r类用于.div_layer相对定位；
 *        ④ 在该页面查询条件的提交按钮上加上，$(".div_layer").hide();
 *        -----Chai 2018/2/2
 */
$(function(){
    setTimeout(function () { //设个时间再执行，是为了等待后端拉数据的时间后，去执行！这样比较准确。
        //初始化配置
        var otoc_table_init={
            height:"300px",
            text:"请选择查询条件"
        }

        var tbody_content = $(".otoc-table-initialize").find("tbody").children().length;
        var tbody_initialize= $(".otoc-table-initialize tbody");
        var page_width = $(".container").width();

        if(tbody_content === 0){

            //tr高度
            var tbody_html = $(
                '<tr>'+
                '<td></td>'+
                '</tr>'
            );

            tbody_html.appendTo(tbody_initialize);
            $(".otoc-table-initialize tbody").find("td").css("height",otoc_table_init.height);

            //div浮层
            var layer_html = $(
                '<div class="div_layer">'+
                otoc_table_init.text+
                '</div>'
            );

            //如果是带有滚动条的，则dom塞到外面,解决层级被压住的BUG，eq(0)是如果有固定列双表格情况下，默认找第一个
            if( $("body .otoc-table-initialize").eq(0).parent().hasClass("table-responsive") )
            {
                $("body .otoc-table-initialize").eq(0).parent().before(layer_html)
            }
            else{
                $("body .otoc-table-initialize").eq(0).before(layer_html)
            }

            //浮层宽高样式
            $(".div_layer").css({height:otoc_table_init.height,lineHeight:otoc_table_init.height,width:page_width});

            //头部切换按钮动态改变时
            $('body').on('change', '#toggle-width input:checkbox', function () {
                setTimeout(function () {
                    var page_width = $(".container ").width();
                    $(".div_layer").width(page_width);
                }, 250);
            });

            //缩放页面时
            $(window).resize(function(){
                var page_width = $(".container ").width();
                $(".div_layer").width(page_width);
            })
        }
    }, 1000);
})

css如下 

/*
  组件名称：数据表格的初始化处理
*/
.div_layer{
  position: absolute;
  left:0px;
  bottom:70px;
  z-index: 2;
  height: 300px;
  line-height:300px;
  text-align: center;
  background: #fff;
}

-------------------------解决：门店系统-数据表格初始化层   结束---------------------------