Question

我们正在工作中使用jquery mobile开发聊天应用程序。

在该应用程序中，我们正在显示消息，图像和语音记录。所以我想做什么当举行任何事情，如消息，图像，语音记录文件在该div我需要显示复制和清除/删除选项，如果选择删除或选项我想要做的功能，如果它是副本我想做那个功能。

但是我试图从jquery mobile中标记hold事件，但它无效。请告诉我如何处理我的要求。

＆＃13;

$(document).on("pagecreate","#chat",function(){
	  $(".clear").on("taphold",function(){
		  alert("jf")
		  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>"
		    });
		  
	  });                       
	});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 1

所有代码似乎都很好。您能否确认是否包含了simpledialog脚本。添加jquery.mobile.simpledialog2.min.js。这可能是唯一的原因。

<!DOCTYPE html>
<html>
<head>
	<title>Touch issue SO </title>
	<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>
	<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;
}

	 </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>
	$(".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

如何使用jquery mobile保持隐藏/删除并复制div

1 个答案: