页面 笔记

Posted 2020-09-23 margin_gu

1.样式切换

<style type="text/css">
tr.detail-row {
    display: none
}

tr.detail-row.open {
    display: block;
    display: table-row
}
</style>

<tr><td><a href="#" class="show-details-btn"</a></div></td</tr>
<tr class="detail-row"><td></td</tr>

<script>
$(‘.show-details-btn‘).on( ‘click‘, function(e) {
    e.preventDefault();//取消事件的默认动作
    $(this).closest(‘tr‘).next().toggleClass(‘open‘);//该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
});
</script>

 2.日期插件

<input type="text" name="rq" id="rq"class="form-control date" value="<s:date name=‘rq‘ format=‘yyyy-MM-dd‘ />">

<script>
$("#rq").datepicker({
    language : ‘zh-CN‘,
    autoclose : true,
    pickDate : true,
    format : ‘yyyy-mm-dd‘,
    minView : ‘month‘,
    showMeridian : true
}).on(‘changeDate‘, function() {
    $(this).datepicker(‘hide‘);
});
</script>

3.douyu小窗口

function show(rid){
$("#flip12345").parent().remove();
$(‘body‘).append(‘<div style=" z-index:999;position: fixed;bottom: 0;right: 0;"><div id="flip12345" style="height:30px;cursor: pointer;">‘+rid+‘<div onclick="show(‘+rid+‘)" style="float: right;">刷新</div></div><embed width="500" height="333" id="panel12345" allownetworking="all" allowscriptaccess="always" src="https://staticlive.douyucdn.cn/common/share/play.swf?room_id=‘+rid+‘" quality="high" bgcolor="#000" wmode="window" allowfullscreen="true" allowFullScreenInteractive="true" type="application/x-shockwave-flash"><script>$("#flip12345").click(function(){if($("#panel12345").css("visibility")!="hidden"){$("#panel12345").css("visibility","hidden");}else{$("#panel12345").css("visibility","visible");}});</script></div>‘);
}

4.同步ajax

$.ajax({
   type:"GET",
　　async : false,
　　url:url,
　　success:function(msg){
　　　　
　　}
});