0
JavaScript
$(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
<div class="card-title">
<div class="title-actions">
<a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button"
data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9"
data-reload="true" data-url="/documents/select/8/">
<i class="material-icons">folder</i>
</a>
<a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button"
data-turbolinks="false" data-url="/documents/upload/9/"
data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1"
style="position: relative; overflow: visible; direction: ltr;">
<i class="material-icons">cloud_upload</i>
<i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"><input
multiple="multiple" type="file" name="file"
style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></i>
</a>
<div class="wrapper">
<div id="overlay"></div>
<a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button"
data-url="/messaging/send/2/">
<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>
<a href="/admin/filer/folder/9/list/" class="btn-icon"><i class="material-icons">settings</i></a>
</div>
<h5>Request documents</h5>
</div>
CSS
.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;
}
im HTML-Block, fügte ich dieRealign Tasten
<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>
Tatsächlich habe ich nicht alles hinzugefügt. Ich habe gerade die ersten zwei Div-Tags hinzugefügt, und ich habe ein kleines Problem mit der anderen Schaltfläche aus diesem Code. Es hat die alte Zeile von 
in die neue Zeile 
geändert, aber ich weiß nicht einmal, wie ich es beheben soll. Wie kann ich meinen Code ändern, um zwei der alten Schaltflächen wiederherzustellen? Ich denke, ich könnte mit css stylen, aber ich kann nicht sagen wie, weil ich nicht viel Erfahrung damit habe.