jquery mobileを使用してdivを保持しているときdivを非表示/削除してコピーする方法

jquery mobileを使用してチャットアプリケーションを開発中です。jquery mobileを使用してdivを保持しているときdivを非表示/削除してコピーする方法

このアプリケーションでは、メッセージ、画像、および音声レコードを表示しています。だから私は、メッセージ、画像、ボイスレコードファイルのようなdivを私はコピーを表示する必要があります/削除オプションを削除するか、削除またはオプションが選択されている必要があれば私はその機能をしたいとコピーしたい場合その機能を実行します。

しかし、私はjquery mobileからイベントを保留しようとしていますが、動作していません。どのように私の要件のために行うか教えてください。

$(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/

出典

2016-04-29 VK Chikkadamalla

すべてのコードは罰金です。あなたはsimpleedialogスクリプトが含まれているかどうかを確認できますか？ jquery.mobile.simpledialog2.min.jsを追加します。これが唯一の理由かもしれません。

<!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>

私はその作業罰金を検証しました。 -Anil

出典

2016-04-29 11:10:38 aberry

携帯電話やコンソールでも動作していません –

私はポップが欲しくないです。少なくともdivを保持したいのですか？https://jsfiddle.net/69ya1b1x/4/ –

jquery mobileを使用してdivを保持しているときdivを非表示/削除してコピーする方法

答えて

関連する問題