Форум

рони · #11 (**permalink**) 03.07.2014, 23:31

krakoss,
зарисовка на тему -- без кнопок удалить сохранить но функциональность сохранена

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li:first-child{
    font-size:0.9em;
    text-align:center;
    border-radius:8px;
    color:#FF0;
    border:#000000 1px solid;
    display:inline-block;
    background:#390;
    cursor:pointer;
  }

  li:first-child:hover{
    background:#000;
    color:#FFF;
  }

  li{
    list-style:none;
    padding:4px 6px;
    width:145px;
    text-align:right;
    border-radius:8px;
  }

  li:nth-child(2n +2){
    background:#6F6;
  }

  li:nth-child(2n +3){
    background:#6C3;
  }

  ul{
    margin-bottom:100px;
  }

  .border{
    border:#000000 3px solid;
    position:fixed;
    z-index:100;
    bottom:0px;
    padding:2px 4px;
    color:#FFF;
  }



  #cont{
    background:#0C0;
  }

  .num input{
    width:70px;
    height:80%;
    border-radius:8px;
    border:1px #000000 solid;
    outline:none;

  }



  .num{
    display:block;
    position:relative;
  }

  .num:hover:after{
    border-top:8px solid transparent;
    border-left:8px solid transparent;
    border-bottom:8px solid transparent;
    border-right:16px solid #006104;
    bottom:10px;
    content:"";
    height:0;
    width:0;
    left:152px;
    position:absolute;
  }

  .num:hover:before{
    text-align:center;
    background:#006104;
    background:hsla(110,100%,17%,.9);
    bottom:4px;
    color:#f6f6f6;
    content:'Кликните для редактирования, для удаления оставьте ноль или пусто и нажмите ввод';
    font:14px sans-serif;
    width:230px;
    left:168px;
    padding:5px 10px;
    position:absolute;
    text-shadow:0 1px 1px hsla(0,0%,0%,1);
    -o-border-radius:5px;
    border-radius:5px;
  }
  </style>
</head>

<body>
<ul id='fix'>
  <li>Добавить строчку</li>
  <li id='cont'>Итого: 0</li>
</ul>
<script>
  window.onload = window.onscroll = window.onresize = function () {
    var a = document.getElementById("cont"),
        b = document.getElementById("fix").getBoundingClientRect(),
        b = b.top + a.scrollHeight + 6 < document.documentElement.clientHeight && b.bottom + a.scrollHeight  > document.documentElement.clientHeight;
        a.classList[b ? "add" : "remove"]("border");
  };
var lis = document.getElementsByTagName("li"),
    elm = document.querySelector("ul"),
    add = document.querySelector("ul li:first-child");
add.onclick = function () {
    var a = document.createElement("li");
    a.innerHTML = 1000;
    a.className = "num";
    a.onclick = onclick;
    elm.insertBefore(a, elm.children[0].nextSibling);
    window.onscroll();
    a.onclick()
};
var sum = function () {
    var a = 0;
    Array.prototype.forEach.call(lis, function (b) {
        "num" == b.className && (a += +b.innerHTML.replace(/\D/g, "") || 0)
    });
    document.getElementById("cont").innerHTML = "Итого: " + space(a)
};

function space(a) {
    return ("" + a).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1 ")
}
var onclick = function () {
    var a = document.createElement("input");
    a.value = (this.innerText || this.textContent).replace(/\D/g, "") ;
    this.innerHTML = "";
    this.appendChild(a);
    moveCaretToEnd(a);
    a.onblur = function () {
        var a = +this.value.replace(/\D/g, "") || 0,
            a = space(a),
            c = this.parentNode;
        c.removeChild(this);
        c.appendChild(document.createTextNode(a));
        "0" == a && c.parentNode.removeChild(c);
        sum()
    };
    a.onkeyup = function (b) {
        b ? b.stopPropagation() : window.event.cancelBubble = !0;
        13 == b.which && a.onblur()
    };
    a.onclick = function (a) {
        a ? a.stopPropagation() : window.event.cancelBubble = !0
    }
};

function moveCaretToEnd(a) {
    if (a.selectionStart) {
        var b = a.value.length;
        a.setSelectionRange(b, b);
        a.focus()
    }
    a.createTextRange && (a = a.createTextRange(), a.collapse(!1), a.select())
};
</script>
</body>

</html>

krakoss · #12 (**permalink**) 04.07.2014, 14:50

рони,
Вам здесь надо работать СКБ Контур

Разработчик веб-интерфейсов (HTML, JS)
СКБ КонтурHRBrand
Уровень зарплаты
Город
Требуемый опыт работы
от 35 000 до 45 000 руб.
Екатеринбург
1–3 года
Мы, в СКБ Контур, занимаемся разработкой удобных веб-сервисов для бизнеса. Именно удобство, красота и качество интерфейса являются нашим приоритетом. Поэтому мы ищем опытных разработчиков интерфейсов, которые бы могли не просто реализовать идеи наших проектировщиков и дизайнеров, но и сделать их лучше.

Вам предстоит работать над клиентской частью одного из сервисов в одной из наших команд, бок о бок с дизайнерами, проектировщиками, юзабилити-специалистами, аналитиками и другими разработчиками.

Пишите нам, если вы:
знаете и понимаете HTML, CSS и модель отображения браузеров;
знаете возможности, особенности и проблемы браузеров.

Здорово, если вы:
слышали про БЭМ, OOCSS;
знаете и имеете опыт разработки на JavaScript;
знаете и имеете опыт разработки приложений, а особенно серверной части веб-приложений;
в курсе новых технологий и возможностей;
интересуетесь интерфейсами, юзабилити и не лишены чувства прекрасного.

Условия работы:
заработная плата в зависимости от профессионального уровня;
содействие в переезде в Екатеринбург (оплата проживания в первые 2 месяца работы).
Тип занятости

Полная занятость, полный день

Форум

Справочник

Discord чат

Курсы javascript