Практический опыт с помощью Дорожек?
- составляют столбцы.
.row {
display: flex;
}
.column {
flex: 50%;
}<div class="row">
<div class="column">A</div>
<div class="column">B</div>
</div>- Разбить счетчик, а затем вставить профиль в другой столбец.
let count = 1;
profiles.forEach(function(entry) {
let profilesDiv = document.getElementsByClassName('profiles')[Math.floor((count-1)/5)];
...
Полный фрагмент:
// this is the array that will hold all the profile objects
let profiles = [];
let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profile1.img = "https://randomuser.me/api/portraits/men/12.jpg"
profiles.push(profile1);
let profile2 = {};
profile2.name = "Jane tanha";
profile2.points = 2000;
profile2.img = "https://randomuser.me/api/portraits/women/22.jpg"
profiles.push(profile2);
let profile3 = {};
profile3.name = "Mike Jones";
profile3.points = 4000;
profile3.img = "https://randomuser.me/api/portraits/men/22.jpg"
profiles.push(profile3);
let profile4 = {};
profile4.name = "Sally Peterson";
profile4.points = 1900;
profile4.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile4);
let profile5 = {};
profile5.name = "Sally Peterson";
profile5.points = 1100;
profile5.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile5);
let profile6 = {};
profile6.name = "Sally Peterson";
profile6.points = 1400;
profile6.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile6);
let profile7 = {};
profile7.name = "Sally Peterson";
profile7.points = 1400;
profile7.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile7);
let profile8 = {};
profile8.name = "Sally Peterson";
profile8.points = 1400;
profile8.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile8);
let profile9 = {};
profile9.name = "Sally Peterson";
profile9.points = 1400;
profile9.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile9);
let profile10 = {};
profile10.name = "Sally Peterson";
profile10.points = 1500;
profile10.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile10);
// sort the array by points
// b - a will make highest first, swap them so a - b to make lowest first
profiles.sort(function(a, b) {
return b.points - a.points;
})
let count = 1;
profiles.forEach(function(entry) {
let profilesDiv = document.getElementsByClassName('profiles')[Math.floor((count-1)/5)];
let img = document.createElement('img');
img.className = "profilePic";
img.src = entry.img;
let profile = document.createElement('div');
profile.className = "profile";
profile.innerHTML = "<div class='name'>" + entry.name + "</div>";
let points = document.createElement('span');
points.className = "points";
points.textContent = entry.points;
profile.appendChild(points);
profile.prepend(img);
var span = document.createElement("span");
span.textContent = count + '. ';
span.className = "count";
profile.prepend(span);
profilesDiv.appendChild(profile);
count++;
});.row {
display: flex;
}
.column {
flex: 50%;
}
.profile {
padding: 10px;
margin: 100px 70px 0px 0px;
width: 50%;
height: 40px;
box-sizing: border-box;
}
.profile .name {
margin-right: 200px;
float: right;
width: 230px;
height: 50px;
}
.profile .count {
float: left;
margin-right: 5px;
font-family: "Helvetica Neue";
font-weight: 800;
src: url(helveticaneue-ultrathin.woff);
color: #b6cdea;
font-size: 45px;
}
.profile img {
position: absolute;
margin: -50px 70px 50px 90px;
background: #2f293d;
border: 1px solid #2f293d;
padding: 4px;
border-radius: 50%;
box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}
.points {
position: absolute;
margin: 0px 100px 100px 450px;
float: right;
font-family: "Helvetica Neue";
font-weight: 800;
src: url(helveticaneue-ultrathin.woff);
color: #008CBA;
}<div class="row">
<div class="column">
<div class="profiles"></div>
</div>
<div class="column">
<div class="profiles"></div>
</div>
</div>5 ответов
Мы используем дорожки теперь на всех наших местах производства и были приблизительно в течение года теперь. Это - потрясающий продукт по сравнению с распорками, которые мы раньше использовали перед этим. Просто то, что нет буквально никаких файлов конфигурации XML и что можно настроить все это с минимальной суммой классов и аннотаций, является потрясающим.
С точки зрения масштабирования & ускоритесь это на самом деле, кажется, лучше, чем распорки, и мое предположение было бы то, потому что существует меньше включенных слоев. Код, с которым Вы заканчиваете, является намного более чистым также, потому что Вы не должны уходить для разделения XML-файлов для обнаружения, куда перенаправления идут.
Мы используем его с бэкендом EJB3, и эти два, кажется, работают действительно хорошо вместе, потому что можно использовать POJO EJB в объекте actionBean, не нуждаясь в объекте формы как в распорках.
В нашей оценке мы рассмотрели альфа-версию распорок (который поддерживал аннотации), и много других платформ, но дорожки победили из-за, это - превосходящая документация, устойчивость и чистота.
не Мог выяснить, как оставить комментарий: таким образом для ответа на второй вопрос мы не встретились с единственной ошибкой в Дорожках, о которых я знаю. Это является довольно впечатляющим для платформы с открытым исходным кодом. Я еще не попробовал последнюю версию (1.5), но 1.4.x очень стабильно.
Мы преобразовали веб-платформу собственной разработки в дорожки приблизительно за неделю. Мы используем его в производстве в это время, и это - большая платформа. Сообщество чрезвычайно полезно, и платформа не стоит на пути. Это может быть расширено во многих местах для изменения поведения, как Вы считаете целесообразным. URL обязательная функция является потрясающим также. Мы реализовали платформу высокой безопасности с помощью аннотаций и перехватчиков. Мы используем, кидаются за внедрением зависимости, и дорожки имеет превосходную поддержку этого.
я определенно использовал бы новые 1,5 выпуска, если Вы собираетесь использовать их.
я - огромный поклонник платформы. Я произошел из среды распорок, и это - точная платформа, которую я искал. Другие разработчики в нашей команде действительно любят использовать платформу дорожек.
я просто купил бета книгу дорожек у сайта прагматически настроенного программиста. Это - большой ресурс на Дорожках 1.5.
Я также произошел из Struts и фона JSF в Дорожки. Я пошел от среды крупных предприятий, которая использовала главным образом распорки и JSF на более новых проектах к небольшой среде, которая сделала весь их J2EE в Дорожках.
Кажется, что Дорожки дают Вам, что Вы хотите в веб-Платформе, не мешая слишком много. Не много конфигурации необходимо, как другие уже упомянули. Очень быстрая разработка и позволяет Вам фокусироваться по представлении и т.д. вместо того, чтобы извести с платформой.
, Если бы я должен был запустить свежий новый проект и я высказался, я выбрал бы Stripes или JSF. Я, возможно, боялся далеко от Дорожек, если я должен был принять решение переключиться на него, потому что это отчасти смотрит/чувствует себя подобно проект подвала SourceForge вместо платформы корпоративного класса, но это, кажется, довольно твердо. Мы используем Stripernate для легкого ORM.
Однако это напоминает мне о Фруктовая резина Дорожки , который потерял ее разновидность СЛИШКОМ FAST.
Мы уже использовали Stripes в нескольких производственных проектах, и пока мы получили отличный опыт. Время установки невелико, и кажется, что проблем с управлением конфигурацией меньше. У нас есть веб-приложения, работающие с Stripes / Dojo / Hibernate и другие со смесью Stripes / Spring / JSP / Jquery и т. Д. Добавление Stripes в наши существующие проекты было довольно простым благодаря их поддержке интеграции существующих конфигураций Spring. Использование Stripes с JSP - это весело, хотя иногда вы чувствуете необходимость писать код на Java и не должны так часто использовать JSTL.
Примечание: Это старый вопрос, но, учитывая, что он появляется довольно быстро, когда вы ищете использование Stripes, я добавляю ответ на него.
Stripes - это вчерашняя технология, если вы можете выбрать что-то более современное, например GWT.