#74 fully adding tags
This commit is contained in:
ASH
parent
d6a11a5902
commit
1f36e04cd3
@ -1,24 +1,65 @@
|
||||
.bootstrap-tagsinput{
|
||||
|
||||
.tags-container {
|
||||
width: 100%;
|
||||
padding: .375rem .75rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
display: inline-block;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
line-height: 22px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.bootstrap-tagsinput .label{
|
||||
.input-tag-name {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
padding: 0 6px;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
display: inline;
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: .2em .6em .3em;
|
||||
background-color: orange;
|
||||
border-radius: .25em;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
font-size: 75%;
|
||||
font-weight: 700;
|
||||
line-height: 2.5;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tag-name span[data-role="remove"] {
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tag-name span[data-role="remove"]:after {
|
||||
content: "x";
|
||||
padding: 0px 2px;
|
||||
}
|
||||
|
||||
.tag-name input[type="text"] {
|
||||
background: transparent;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
font-size: 100%;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: .25em;
|
||||
}
|
||||
outline: none;
|
||||
cursor: default;
|
||||
|
||||
.bootstrap-tagsinput .label-info{
|
||||
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
@ -1,5 +1,75 @@
|
||||
/*<![CDATA[*/
|
||||
$(document).ready(function () {
|
||||
|
||||
$("#tags .tag .tag-name input[type=text]").each(function() {
|
||||
$(this).attr("size", $(this).val().length)
|
||||
});
|
||||
|
||||
|
||||
$("#task-form").keydown(function(event){
|
||||
if(event.keyCode == 13) {
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
function removeTag () {
|
||||
$(this).parent().parent().remove();
|
||||
}
|
||||
|
||||
|
||||
$("#input-tag").keyup(function (event) {
|
||||
if(event.keyCode == 13 || event.keyCode == 188) {
|
||||
var tagNumber = $("#tags .tag").length;
|
||||
var tagName = $.trim($(this).val());
|
||||
var addTag = true;
|
||||
// проверка, добавлен ли этот тег
|
||||
$("#tags .tag .tag-name input[type=text]").each(function() {
|
||||
if(tagName === $(this).val()) {
|
||||
addTag = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
// если тег не добавлен
|
||||
if(addTag) {
|
||||
// контейнер тега
|
||||
var newTagRow = $("<div/>")
|
||||
.attr("id", 'tags' + tagNumber)
|
||||
.addClass("tag");
|
||||
// контейнер id
|
||||
var idInput = $("<input/>")
|
||||
.attr("type", "hidden")
|
||||
.attr("id", "tags" + tagNumber + ".id")
|
||||
.attr("name", "tags[" + tagNumber + "].id")
|
||||
.attr("value", '');
|
||||
// контейнер текста
|
||||
var conDiv = $("<div/>")
|
||||
.addClass("tag-name");
|
||||
// текст тега
|
||||
var nameInput = $("<input/>")
|
||||
.attr("type", "text")
|
||||
.attr("id", "tags" + tagNumber + ".tagName")
|
||||
.attr("name", "tags[" + tagNumber + "].tagName")
|
||||
.attr("value", tagName)
|
||||
.attr("readonly", "true")
|
||||
.attr("size", tagName.length);
|
||||
// кнопка удалить тег
|
||||
var removeSpan = $("<span/>")
|
||||
.attr("data-role", "remove")
|
||||
.bind("click", removeTag);
|
||||
|
||||
conDiv.append(nameInput);
|
||||
conDiv.append(removeSpan);
|
||||
newTagRow.append(idInput);
|
||||
newTagRow.append(conDiv);
|
||||
$(this).before(newTagRow);
|
||||
}
|
||||
|
||||
$(this).val('');
|
||||
}
|
||||
});
|
||||
|
||||
$("span[data-role=remove]").click(removeTag);
|
||||
$(".task-row").mouseenter(function (event) {
|
||||
var taskRow = $(event.target).closest(".task-row");
|
||||
$(taskRow).css("background-color", "#f8f9fa");
|
||||
|
||||
@ -53,8 +53,18 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label for="tags">Теги:</label>
|
||||
<input class="form-control" placeholder="Теги задачи" data-role="tagsinput"
|
||||
id="tags" name="tags"/>
|
||||
<div class="tags-container" id="tags">
|
||||
<div class="tag" th:each="tag, rowStat : *{tags}">
|
||||
<input type="hidden" th:field="*{tags[__${rowStat.index}__].id}"/>
|
||||
<div class="tag-name">
|
||||
<input type="text" readonly="true"
|
||||
th:field="*{tags[__${rowStat.index}__].tagName}"/>
|
||||
<span data-role="remove"></span>
|
||||
</div>
|
||||
</div>
|
||||
<input class="input-tag-name" type="text" placeholder="Теги задачи"
|
||||
id="input-tag"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Дедлайны задачи:</label>
|
||||
@ -131,7 +141,6 @@
|
||||
</div>
|
||||
<script src="/js/tasks.js"></script>
|
||||
</section>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user