du7133 2016-08-12 17:51
浏览 59

JavaScript打印功能问题

When I clicked Ön Izleme (Span/Button) , i come the back i cant use my JavaScript Function Like Draggable Resize method on my divs. Do anyone can help me ? Önizleme Button job is print When i back to from print screen i cant use my JavaScript function Like Draggable and resize. What is the my fault do anyone can help me?

<!DOCTYPE html>
<html>
<head>
<style>
.divKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; background-color: #E98A7E;float:left;}
.divKolon-resizable-e{
    height: 50px !important;
}
.divUstKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39;  text-align:center;float:left;margin-right:20px;}

.shadow(@shadow){
  -webkit-box-shadow:@shadow;
  -mox-box-shadow:@shadow;
  box-shadow:@shadow;
}


.label-danger{

    margin-left:10px;
    margin-top:10px;

}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>

var Bosluk=0;
var SecilenItem;
var VTBilgileri=[];
var YaziFont;
var YaziBoyutu;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    //console.log(ev.target);
}

function drop(ev) {

    ev.stopPropagation()
    var EklenecekDiv=ev.target;
    var data = ev.dataTransfer.getData("text");
    //console.log(ev.target);
    console.log($(ev.target).parent());


    var divim=ev.target;

        var c = divim.children;
        console.log(c.lenght);
            /*if(c[2]==null)
            {
                 EklenecekDiv=$($(ev.target).parent());
                 EklenecekDiv.append()
                var label1=document.getElementById(data);

                var MyLabelAdd1=document.createElement("div");
                MyLabelAdd1.appendChild(document.createTextNode($(label1).html()));
                $(MyLabelAdd1).attr("name","KolonAdi");
                EklenecekDiv.append(MyLabelAdd1);
                divim.remove();
                label1.remove();
                return;
                console.log(EklenecekDiv);
            }




        if(c[3]!=null)
        {
            c[3].remove();

        }*/




    var label=document.getElementById(data);

    var MyLabelAdd=document.createElement("div");

    MyLabelAdd.appendChild(document.createTextNode($(label).html()));
        $(MyLabelAdd).attr("name","KolonAdi");
        if(YaziFont!=null&&YaziBoyutu!=null){MyLabelAdd.style.fontFamily=YaziFont; }
        if(YaziBoyutu!=null){alert(YaziBoyutu); MyLabelAdd.style.fontSize =YaziBoyutu+"px"; }

    EklenecekDiv.appendChild(MyLabelAdd);
    label.remove();
}
function tiklandi()
{

    alert("Okey");
}
function Click(e){
    if(SecilenItem==null)
    {
        alert("Lütfen Alan Seçiniz");
        return;
    }

    var item=SecilenItem;
    var div=document.getElementById("Itemler");
    var label=document.createElement("span");
    $(label).addClass("label label-danger col-xs-1");
    $(label).attr("id","drag");
    $(label).attr("draggable","true");
    $(label).attr("ondragstart","drag(event)");

    $(label).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 


    label.appendChild(document.createTextNode(item));
    div.appendChild(label);
    //console.log($(label).html());


    var KolonDiv=document.createElement("div");
    $(KolonDiv).attr("ondrop","drop(event)")
    $(KolonDiv).attr("ondragover","allowDrop(event)");
    $(KolonDiv).addClass("divKolon");
    KolonDiv.style.marginLeft=Bosluk+"px";
    $(KolonDiv).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 

    $(KolonDiv).resizable();
    $(KolonDiv).draggable();

    var Kolonlar=document.getElementById("Kolonlar");
    Kolonlar.appendChild(KolonDiv);





};

function CiktiGetir(e){
    var KolonlarinChildren=document.getElementsByClassName("divKolon");
    var printContents = document.getElementById("Kolonlar");
     var originalContents = document.body.innerHTML;

    printContents=printContents.innerHTML;



     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;


}
function TabloAlanTiklandi (e){



     SecilenItem=$(e).text();
     $(e).parents(".dropdown").find('.btn').html( $(e).text()  );
    //e.remove();
}

function FontLi(e)
{
    YaziFont=$(e).text();
     $(e).parents(".dropdown").find('.btn').html( $(e).text()  );
}

function StilDegistir(e)
{

}

function EkAlanClick(e){
    if($("#EkAlan").val()==null)
    {
        alert("Lütfen Alan Giriniz");
        return;
    }
    var h1=document.createElement("h1");
    var item=$("#EkAlan").val();
    var div=document.getElementById("Itemler");
    var label=document.createElement("span");
    $(label).addClass("label label-danger col-xs-1");
    $(label).attr("id","drag");
    $(label).attr("draggable","true");
    $(label).attr("ondragstart","drag(event)");

    $(label).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 


    label.appendChild(document.createTextNode(item));
    div.appendChild(label);
    //console.log($(label).html());


    var KolonDiv=document.createElement("div");
    $(KolonDiv).attr("ondrop","drop(event)")
    $(KolonDiv).attr("ondragover","allowDrop(event)");
    $(KolonDiv).addClass("divKolon");
    $(KolonDiv).mousedown(function(e){ 
    if( e.button == 2 ) { 
      $(this).remove();
      return false; 
    } 
    return true; 
  }); 

    $(KolonDiv).resizable();
    $(KolonDiv).draggable();

    var Kolonlar=document.getElementById("Kolonlar");
    Kolonlar.appendChild(KolonDiv);


$("#EkAlan").val("");



}

function BoslukEkle(e)
{
    if($("#Aralik").val().lenght==0)
    {
        alert("Aralik Degeri Giriniz");
        return;
    }
    Bosluk=$("#Aralik").val();
    alert(Bosluk);
    $("#Aralik").val("");
}

function BoyutEkle(e)
{
    if($("#YaziBoyutu").val().lenght==0)
    {
        alert("Boyut Degeri Giriniz");
        return;
    }
YaziBoyutu=$("#YaziBoyutu").val();
$("#YaziBoyutu").val("");   

}


</script>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Calendar</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->

  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">



  <!-- Left side column. contains the logo and sidebar -->


  <!-- Content Wrapper. Contains page content -->

    <!-- Content Header (Page header) -->


    <!-- Main content -->
   <div class="divUstKolon col-xs-12" id="Itemler" style="height:50px"></div>
   <div class=" col-xs-12" style="margin-top:20px" >
<div class="dropdown col-xs-1" style="height:32px " >
    <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Alan Ekle
    <span class="caret"></span></button>

    <ul id="Secenekler" class="dropdown-menu">
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Isim</a></li>
      <li><a onClick="TabloAlanTiklandi(this)"href="#">SoyIsim</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Adress</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Numara</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Yaş</a></li>
      <li><a onClick="TabloAlanTiklandi(this)" href="#">Tanıdık 1</a></li>
    </ul>
  </div>
<label class="btn btn-default col-xs-1" style="margin-left :10px ; height:32px " id="Ekle" onClick="Click(this)"> Ekle </label>

    <div class="col-xs-1"></div>
      <input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="EkAlan">

      <label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="EkAlanClick(this)"> Ek Alan Ekle </label>

      <div class="col-xs-4" ></div>
    <label class="btn btn-danger col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ön İzleme</label>
    <label class="btn btn-primary col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ana Sayfa</label>
</div>
<div class="col-xs-12" style="margin-top:10px">

<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="YaziBoyutu" placeholder="Yazı Boyutu">

<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1"  onClick="BoyutEkle(this)"> Değiştir</label>
<div class="col-xs-1" ></div>
<div class="dropdown col-xs-2" style="height:32px " >
    <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Yazı Font
    <span class="caret"></span></button>

    <ul id="Fontlar" class="dropdown-menu">
      <li><a onClick="FontLi(this)" href="#">Georgia</a></li>
      <li><a onClick="FontLi(this)"href="#">Palatino Linotype</a></li>
      <li><a onClick="FontLi(this)" href="#">Book Antiqua</a></li>
      <li><a onClick="FontLi(this)" href="#">Times New Roman</a></li>
      <li><a onClick="FontLi(this)" href="#">Arial</a></li>
      <li><a onClick="FontLi(this)" href="#">Helvetica</a></li>
      <li><a onClick="FontLi(this)" href="#">Arial Black</a></li>
      <li><a onClick="FontLi(this)" href="#">Impact</a></li>
      <li><a onClick="FontLi(this)" href="#">Lucida Sans Unicode</a></li>
      <li><a onClick="FontLi(this)" href="#">Tahoma</a></li>
      <li><a onClick="FontLi(this)" href="#">Verdana</a></li>
      <li><a onClick="FontLi(this)" href="#">Courier New</a></li>
      <li><a onClick="FontLi(this)" href="#">Lucida Console</a></li>
    </ul>
  </div>

<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="StilDegistir(this)"> Yazi Stil Değiştir</label>
<div class="col-xs-1" ></div>

</div>


<div class="col-xs-12" id="Kolonlar" style="margin-top :10px"> </div>






    <!-- /.content -->

  <!-- /.content-wrapper -->



  <!-- Control Sidebar -->

  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>

<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="plugins/fullcalendar/fullcalendar.min.js"></script>
<!-- Page specific script -->

</body>
</html>
  • 写回答

3条回答 默认 最新

  • duannao3819 2016-08-12 17:58
    关注

    You are replacing the body HTML

    document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;

    So you will need to reatach the events.

    Try the "on" jquery method. Something like

    $(document).on('click', '#CiktiGetir', function() { CiktiGetir(); });
    评论

报告相同问题？

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题