wie zu verbergen/zu löschen und kopieren Sie die div, wenn Sie an diesem div mit jquery mobile

Wir entwickeln Chat-Anwendung mit jquery mobile in worklight.wie zu verbergen/zu löschen und kopieren Sie die div, wenn Sie an diesem div mit jquery mobile

In dieser Anwendung zeigen wir die Nachricht, Bilder und Sprachaufzeichnung. so möchte ich tun, wenn irgendeine Sache wie Nachricht, Bild, Sprachaufzeichnungsdatei auf diesem div hält, muss ich Kopie anzeigen und lösche/lösche Option und wenn Löschung oder Wahl gewählt wird, möchte ich diese Funktionalität tun und wenn es Kopie ist, möchte ich Mach diese Funktionalität.

Aber ich versuche Tab Event von jquery Mobile zu halten, aber es funktioniert nicht. irgendjemand bitte sagen Sie mir, wie man für meine Anforderung tut.

$(document).on("pagecreate","#chat",function(){ 
 
\t $(".clear").on("taphold",function(){ 
 
\t \t alert("jf") 
 
\t \t e.stopPropagation(); 
 
\t \t $(this).simpledialog2({ 
 
\t \t   mode:"blank", 
 
\t \t   headerText:"Image Options", 
 
\t \t   showModal:false, 
 
\t \t   forceInput:true, 
 
\t \t   headerClose:true, 
 
\t \t   blankContent:"<ul data-role='listview'><li>Clear/Delete</li><li>Copy</li></ul>" 
 
\t \t  }); 
 
\t \t 
 
\t });      
 
\t });

.right { 
 
    position: relative; 
 
    background: #fff; 
 
    text-align: right; 
 
    padding: 25px 20px 25px 5px; 
 
    border-radius: 10px; 
 
    border: 1px solid #ccc; 
 
    float: right; 
 
    right: 20px; 
 
} 
 

 
.right::before { 
 
    content: ''; 
 
    position: absolute; 
 
    visibility: visible; 
 
    top: -1px; 
 
    right: -10px; 
 
    border: 10px solid transparent; 
 
    border-top: 12px solid #ccc; 
 
} 
 

 
.right::after { 
 
    content: ''; 
 
    position: absolute; 
 
    visibility: visible; 
 
    top: 0px; 
 
    right: -8px; 
 
    border: 10px solid transparent; 
 
    border-top: 12px solid #fff; 
 
    clear: both; 
 
} 
 

 
div{ 
 
    clear:right 
 
} 
 

 
.name, 
 
.time { 
 
    position: absolute; 
 
    font-size: 14px; 
 
} 
 

 
.name { 
 
    top: 2px; 
 
    color: #900; 
 
} 
 

 
.right .name { 
 
    right: 4px; 
 
} 
 

 
.time { 
 
    bottom: 2px; 
 
    color: #f60; 
 
} 
 

 
.right .time { 
 
    left: 4px; 
 
}

<div class="right"> 
 
    <div class="name">fsdfsfsfsdfdsfsdfsf</div> 
 
    <span>thanks</span> 
 
    <div class="time">time</div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="name">fsdfs</div> 
 
    <span>thanks</span> 
 
    <div class="time">time</div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="name">fsdfs</div> 
 
    <span>t</span> 
 
    <div class="time">time</div> 
 
</div>

https://jsfiddle.net/69ya1b1x/4/

Quelle

2016-04-29 VK Chikkadamalla

alle Code scheint in Ordnung. Können Sie bestätigen, ob Sie ein SimpleDialog-Skript hinzugefügt haben? Fügen Sie jquery.mobile.simplledialog2.min.js hinzu. Dies könnte der einzige Grund sein.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Touch issue SO </title> 
 
\t <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script> 
 
\t <style> 
 
.right { 
 
    position: relative; 
 
    background: #fff; 
 
    text-align: right; 
 
    padding: 25px 20px 25px 5px; 
 
    border-radius: 10px; 
 
    border: 1px solid #ccc; 
 
    float: right; 
 
    right: 20px; 
 
} 
 

 
.right::before { 
 
    content: ''; 
 
    position: absolute; 
 
    visibility: visible; 
 
    top: -1px; 
 
    right: -10px; 
 
    border: 10px solid transparent; 
 
    border-top: 12px solid #ccc; 
 
} 
 

 
.right::after { 
 
    content: ''; 
 
    position: absolute; 
 
    visibility: visible; 
 
    top: 0px; 
 
    right: -8px; 
 
    border: 10px solid transparent; 
 
    border-top: 12px solid #fff; 
 
    clear: both; 
 
} 
 

 
div{ 
 
    clear:right 
 
} 
 

 
.name, 
 
.time { 
 
    position: absolute; 
 
    font-size: 14px; 
 
} 
 

 
.name { 
 
    top: 2px; 
 
    color: #900; 
 
} 
 

 
.right .name { 
 
    right: 4px; 
 
} 
 

 
.time { 
 
    bottom: 2px; 
 
    color: #f60; 
 
} 
 

 
.right .time { 
 
    left: 4px; 
 
} 
 

 
\t </style> 
 

 

 

 
</head> 
 
<body> 
 

 
<div class="right"> 
 
    <div class="name">Demo</div> 
 
    <span>thanks</span> 
 
    <div class="time">time</div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="name">Demo2</div> 
 
    <span>thanks</span> 
 
    <div class="time">time</div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="name">Wow</div> 
 
    <span>t</span> 
 
    <div class="time">time</div> 
 
</div> 
 

 
<script> 
 
\t $(".right").on("taphold", function(e) { 
 
    e.stopPropagation(); 
 
    $(this).simpledialog2({ 
 
     mode:"blank", 
 
     headerText:"Image Options", 
 
     showModal:false, 
 
     forceInput:true, 
 
     headerClose:true, 
 
     blankContent:"<ul data-role='listview'><li>Clear/Delete</li><li>Copy</li></ul>" 
 
    }); 
 
}); 
 

 

 

 

 

 
</script> 
 
</body> 
 
</html>

ich seine adaequat verifiziert. -Anil

Quelle

2016-04-29 11:10:38 aberry

es funktioniert nicht in Mobile und Konsole auch –

Ich will nicht Pop zumindest ich will verstecken, die jemals die div halten https://jsfiddle.net/69ya1b1x/4/ –

wie zu verbergen/zu löschen und kopieren Sie die div, wenn Sie an diesem div mit jquery mobile

Antwort

Verwandte Themen