Javascript 光标位于按钮上时显示消息（并禁用单击）_Javascript_Html_Django

Javascript 光标位于按钮上时显示消息（并禁用单击）

javascript html django

Javascript 光标位于按钮上时显示消息（并禁用单击）,javascript,html,django,Javascript,Html,Django,JavaScript HTML 此代码的目的是创建一个按钮，该按钮将在特定条件下发送电子邮件。我的缺点可能是HTML和jS部分。一旦用户单击按钮，我希望在他再次发送消息之前延迟五分钟。因此，一旦按钮被使用，我必须将其停用五分钟，并显示消息：“消息已发送到客户端。”。请等待5分钟，然后再次发送消息。'当光标位于按钮上时。我怎样才能修改JS部件，使它可以做我想做的事情使现代化 CSS 您需要对代码进行大量更改。假设只有一个id=message的元素从JQuery代码开始 $(function()

JavaScript

HTML 此代码的目的是创建一个按钮，该按钮将在特定条件下发送电子邮件。我的缺点可能是HTML和jS部分。一旦用户单击按钮，我希望在他再次发送消息之前延迟五分钟。因此，一旦按钮被使用，我必须将其停用五分钟，并显示消息：“消息已发送到客户端。”。请等待5分钟，然后再次发送消息。'当光标位于按钮上时。我怎样才能修改JS部件，使它可以做我想做的事情

使现代化 CSS

您需要对代码进行大量更改。假设只有一个id=message的元素

从JQuery代码开始

$(function(){
  $('.select-another-button').each(function(){
    $(this).bind('click', function(e) {
      $(this).attr('disabled','true'); //disables the button
      $('#overlay').show(); //after disabling show the overlay for hover
      setTimeout(function(){ 
        $(this).attr('disabled','false'); //enables after 5mins
        $('#overlay').hide(); //hide the overlay
      }, 300000);
      e.preventDefault();
      fileBrowser(this);
      return false;
    });
  });
});

$("#overlay").hover(function(){
    $('#message').show();
},function(){
    $('#message').hide();
});

由于禁用的按钮上不能有悬停事件，因此需要在按钮上放置一个透明的覆盖层，并在悬停时显示消息

HTML

$function{ $。选择另一个按钮。每个功能{ $this.bind'click'，函数e{ $this.attr'disabled'，'true'； $‘叠加’。显示； setTimeoutfunction{ $this.attr'disabled'，'false'； $'overlay'。隐藏； }, 300000; e、防止违约；文件浏览器；返回false； }; }; }; $overlay.hover函数{ $'message'.show； }，功能{ $'message'。隐藏； }; .包装纸{ 位置：相对位置；显示：内联块； } 覆盖层{ 显示：无；位置：绝对位置；排名：0；左：0；不透明度：.1；身高：100%；宽度：100%； }

您需要对代码进行大量更改。假设只有一个id=message的元素

从JQuery代码开始

$(function(){
  $('.select-another-button').each(function(){
    $(this).bind('click', function(e) {
      $(this).attr('disabled','true'); //disables the button
      $('#overlay').show(); //after disabling show the overlay for hover
      setTimeout(function(){ 
        $(this).attr('disabled','false'); //enables after 5mins
        $('#overlay').hide(); //hide the overlay
      }, 300000);
      e.preventDefault();
      fileBrowser(this);
      return false;
    });
  });
});

$("#overlay").hover(function(){
    $('#message').show();
},function(){
    $('#message').hide();
});

由于禁用的按钮上不能有悬停事件，因此需要在按钮上放置一个透明的覆盖层，并在悬停时显示消息

HTML

那么，你面临的问题是什么？@NikhilNanjappa首先，我只是不知道如何关闭按钮。第二，当光标在按钮上并且已经被点击时，我甚至不知道如何显示我的消息。老实说，我不知道我能比这更准确。到目前为止，我还不知道有足够的工具来做这样的事情。因此，禁用后，每次用户悬停在您希望弹出消息的按钮上时？@NikhilNanjappa是的，这是正确的。一个例子或重复使用相同的代码将非常感激。我对这个问题已经有一段时间了。好吧，我假设你有多个。在那个页面上选择另一个按钮？那么，你面临什么问题？@NikhilNanjappa首先，我不知道如何停用按钮。第二，当光标在按钮上并且已经被点击时，我甚至不知道如何显示我的消息。老实说，我不知道我能比这更准确。到目前为止，我还不知道有足够的工具来做这样的事情。因此，禁用后，每次用户悬停在您希望弹出消息的按钮上时？@NikhilNanjappa是的，这是正确的。一个例子或重复使用相同的代码将非常感激。我对这个问题已经有一段时间了。好吧，我假设你有多个。在那个页面上选择另一个按钮？谢谢你的回答，但我有一个小问题。你能帮我一下吗？我会用你能更好理解的方式修改我的问题。好吧，我会试试。你忘记我了吗？@J.Doe-我明白了，这是CSS问题。似乎已经有一些样式应用于内部class=title操作。现在，我们在最后一个图标外添加了一个div.wrapper，这就是原因。你能显示所有与里面的图标相关的CSS吗。标题动作。我已经修改了我的问题。你可以在页面底部看到它。谢谢你的回答，但我有一个小问题。你能帮我一下吗？我会用你能更好理解的方式修改我的问题。好吧，我会试试。你忘记我了吗？@J.Doe-我明白了，这是CSS问题。似乎已经有一些样式应用于内部class=title操作。现在，我们在最后一个图标外添加了一个div.wrapper，这就是原因。你能显示所有与里面的图标相关的CSS吗。标题动作。我已经修改了我的问题。你可以在页面底部看到它。

app_name = 'messaging'
urlpatterns = [
    ...

    url(r'^send/(?P<request_id>[0-9]+)/$',
        send, name='send'),
]

@staff_member_required
@csrf_exempt
def send(request, request_id=None):
    req= Request.objects.get(pk=request_id)
    request_folders = req.folder.all_files.all()
    context = []

    for doc in request_folders:
        if doc.meta.state == u'rejected':
            context.append(doc)

    if context:
        ctx = {'request': req}
        EmailFromTemplate('document-refusal', extra_context=ctx)\
            .send_to(req.customer.user)

    return HttpResponse('')

      <div class="title-actions">
        {% if not object.is_readonly %}
        {# TODO: apply perms #}
        <a href="#"
          id="id_select_request_document"
          title="{% trans "Select file(s)" %}"
          class="btn btn-icon select-button"
          data-turbolinks="false"
          data-save-label="{% trans "Ok" %}"
          data-close-label="{% trans "Cancel" %}"
          data-copy-to="{{ folder.pk }}"
          data-reload="true"
          data-url="{% url "documents:ajax-select" folder_id=object.customer.folder.pk %}">
          <i class="material-icons">folder</i>
        </a>
        {# TODO: apply perms #}
        {# if permissions.has_add_children_permission and not folder.is_root #}
        <a href="#"
          id="id_upload_request_document"
          title="{% trans "Upload file(s)" %}"
          class="btn btn-icon upload-button"
          data-turbolinks="false"
          data-url="{% url "documents:ajax-upload" folder_id=folder.pk %}"
          data-complete-post="{% url "requests:validate-requirements" pk=object.pk %}"
          data-max-uploader-connections="1">
          <i class="material-icons">cloud_upload</i>
        </a>
        <div class="wrapper">
            <div id="overlay"></div>
            <a href="#"
               title="{% trans "Send email - rejected file(s)" %}"
               class="btn btn-icon select-another-button"
               data-url="{% url "messaging:send" request_id=object.pk %}">
                <i class="material-icons">assignment_late</i>
                <div class='alert alert-success' id='send-message' style="display: none;">
                    <p>
                    The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
                    </p>
                </div>
            </a>
        </div>
        {% endif %}
        {% if request.user.is_superuser %}
        <a href="{{ folder.get_admin_directory_listing_url_path }}" class="btn-icon"><i class="material-icons">settings</i></a>
        {% endif %}
      </div>

<script type="text/css">

    .wrapper{
      position: relative;
      display: inline-block;
    }
    #overlay{
      display: none;
      position: absolute;       
      top: 0;
      left: 0;
      opacity: .1;
      background-color: blue;
      height: 100%;
      width: 100%;
    }

.title-actions {
  float: right;
  height: 50px;
  margin-top: 13px; }
  .title-actions a {
    transition: background 0.3s ease; }
    .title-actions a.btn {
      padding: 2px 14px;
      line-height: 26px;
      max-height: 28px;
      position: relative;
      top: -1px;
      margin-left: 8px; }
    .title-actions a:hover {
      background: #4382b5; }
  .title-actions span {
    color: #444;
    background: #e6e6e6;
    padding: 6px 10px;
    border-radius: 3px;
    float: none;
    position: relative;
    margin-left: 6px; }
  .title-actions .btn {
    padding: 2px 14px;
    line-height: 26px;
    max-height: 28px;
    position: relative;
    top: -1px;
    margin-left: 8px; }
  .title-actions .btn-icon {
    background: transparent;
    position: relative;
    color: #3e5366;
    text-align: center;
    display: inline-block;
    padding: 0 !important;
    transition: color 0.3s ease;
    box-shadow: none !important;
    margin-top: -16px;
    margin-left: 6px; }
    .title-actions .btn-icon i {
      font-size: 35px;
      line-height: 20px;
      position: relative;
      top: 12px; }
    .title-actions .btn-icon:hover {
      color: #4382b5;
      background: transparent; }
  .title-actions .badge .material-icons {
    font-size: 1.2em;
    line-height: 0;
    position: relative;
    top: 4px; }

$(function(){
  $('.select-another-button').each(function(){
    $(this).bind('click', function(e) {
      $(this).attr('disabled','true'); //disables the button
      $('#overlay').show(); //after disabling show the overlay for hover
      setTimeout(function(){ 
        $(this).attr('disabled','false'); //enables after 5mins
        $('#overlay').hide(); //hide the overlay
      }, 300000);
      e.preventDefault();
      fileBrowser(this);
      return false;
    });
  });
});

$("#overlay").hover(function(){
    $('#message').show();
},function(){
    $('#message').hide();
});

<div class="wrapper">
  <div id="overlay"></div>
  <a href="#"
     title="{% trans "Send email - rejected file(s)" %}"
     class="btn btn-icon select-another-button"
     data-url="{% url "messaging:send" request_id=object.pk %}">
    <i class="material-icons">assignment_late</i>
    <div class='alert alert-success' id='message' style="display: none;">
    The message was sent to the client. Please wait 5 minutes before sending the message again.
    </div>
  </a>
</div>

.wrapper{
  position: relative;
  display: inline-block;
}
#overlay{
  display: none;
  position: absolute;       
  top: 0;
  left: 0;
  opacity: .1;
  height: 100%;
  width: 100%;
}