0

所以我正在设置一个可编辑的列表。我正在使用 jQuery 和 jQuery-UI。基本上我有一个可排序的列表，我可以从中添加和删除项目。我也已经设置好了，所以我可以点击一个项目的标题来编辑它。我在这里有一个 jsfiddle 设置。

HTML

<br />
<p>
    Click the "+" to add a new item. Click an item title to edit it. Add 3 items, edit item 1 and everything works, edit item 3 and you can't see what you are typing. This issue is only in Safari - 6.0.3 is my version. Chrome and Firefox seem to work properly.
</p>

<h2>Simple List<button id='add-section-2' class='addSimpleList'>+</button></h2>

<input type='hidden' id='section-2' />
<ul id='list-section-2' class='sortable simpleList'></ul>
</div>
<div id='tmpSimpleList' class='template'>
    <li data-can-delete='yes'>
        <input type='hidden' value='-' />
<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>

<span class='order'></span>

<span class='title'>Untitled</span>

<span class='editTitle'><input value='Untitled'/></span>

        <input type='hidden' value='' />
        <button>-</button>
    </li>
</div>

javascript

// Initilize order of sortables
UpdateListCounts();

// turn on sortable items
$(".sortable").sortable({
    placeholder: "ui-state-highlight",
    update: function (event, ui) {
        UpdateListCounts();
    }
});
$(".sortable").disableSelection();
$(document).on('change', '.sortable > li > select', function (e) {
    UpdateListCounts();
});


// Add to list buttons
$('.addSimpleList').on('click', function (e) {
    $('#tmpSimpleList li').clone().appendTo('#' + $(this).attr('id').replace('add-', 'list-'));
    UpdateListCounts();
    e.preventDefault();
});

// Delete
$(document).on('click', '.sortable > li > button', function (e) {
    if ($(this).parent().attr('data-can-delete') === 'yes') {
        $(this).parent().remove();
        UpdateListCounts();
    } else {
        alert('This item is in use by at least one page so it can not be removed.');
    }
    e.preventDefault();
});


// Edit
$(document).on('click', '.sortable > li > .title', function (e) {
    $(this).hide();
    $(this).parent().children('.editTitle').show().children('input').focus();
});
$(document).on('blur', '.sortable > li > .editTitle > input', function (e) {
    $(this).parent().hide();
    $(this).parent().parent().children('.title').show().html($(this).val());
    UpdateListCounts();
});

// Update the order values on the list and
// update the lists json data
function UpdateListCounts() {
    $(".sortable").each(function (index) {
        $(this).children("li").each(function (index) {
            $(this).children(".order").text(index + 1);
        });
    });
    UpdateSimpleListData();
}

// Store the sections list in json
function UpdateSimpleListData() {
    $(".simpleList").each(function (index) {
        var data = Array();
        $(this).children("li").each(function (index) {
            $(this).children(".order").text(index + 1);
            data[index] = Array(index,
            $(this).children("input").val(),
            $(this).children(".title").text());
        });
        var dataText = JSON.stringify(data, null, 2);
        $('#' + $(this).attr('id').replace('list-', '')).val(dataText);
    });
}

css

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #f6f6f6;
    font-size: 13px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

input,
select,
textarea,
button {
    outline: none;
    margin: 0px;
    padding: 2px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;
     border: 1px solid #ccc;
}

input {
    width: 100%;
    padding: 2px;
}

.smallColumns {
    -webkit-column-count: 3 !important;
    -moz-column-count: 3 !important;
    column-count: 3 !important;
}

.sortable {
    position: relative;
    list-style-type: none;
    margin: 0;
    margin-top: 5px;
    padding: 0;
    -webkit-column-count: 2;
    -webkit-column-gap: 5px;
    -moz-column-count: 2;
    -moz-column-gap: 5px;
    column-count: 2;
    column-gap: 5px;
    cursor:default;
 }

.sortable li {
    position: relative;
    display: inline-block;
    margin: 0px 0px 5px 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    font-size: 14px;
    height: 18px;
    width: 90%;
}

.sortable .ui-state-highlight {
    margin: 0px 0px 2px 0px !important;
}

.sortable li .ui-icon {
    position: absolute;
    margin-left: -1.3em;
}

.sortable li .order {
    margin-right: .5em;
}

.sortable li .title,
.sortable li .editTitle {
    position: absolute;
    display: block;
    top: 5px;
    bottom: 5px;
    left: 40px;
    right: 40px;
    z-index: 90;
}

.sortable li .editTitle {
    display: none;
}

.sortable li .editTitle input {
    width: 100%;
    height: 100%;
    color: black;
    font-size: 14px;
    padding: 0px;
    z-index: 100;
}

.sortable li button {
    position: absolute;
    right: 5px;
    padding: 2px;
    border: 1px solid #cccccc;
    background: #f6f6f6;
    font-weight: bold;
    width: 20px;
}

.sortable li select {
    position: absolute;
    right:30px;
}

h2 {
    margin-top: 25px;
    margin-bottom: 3px;
    font-size: 16px;
    border-bottom: 1px dotted #CCC;
}

h2 button {
    float: right;
    padding: 2px;
    border: 1px solid #cccccc;
    background: #f6f6f6;
    font-weight: bold;
    width: 20px;
}

.template {
    display: none;
}
4

0 回答 0