Многоразовые элементы веб-страницы

Question 1

Я создаю простую веб-страницу, которая будет своего рода «магазином приложений», который будет показывать пользователям список программного обеспечения, которое они могут загрузить. Я ограничен в том, что могу использовать, поскольку это будет сайт SharePoint, поэтому я ограничиваю его строго HTML, CSS и JavaScript. Поскольку мы будем регулярно получать одобрение нового программного обеспечения, сайт необходимо будет обновлять новыми элементами, что означает копирование и вставку кода, а не добавление информации о новом программном обеспечении.

Есть ли у кого-нибудь предложения по повторному использованию? Какие-либо предыдущие проекты, в которых вы как бы автоматизировали веб-страницу таким образом? Я очень открыт для предложений.

P.S Я не веб-разработчик, пожалуйста, не беспокойтесь о моем коде.

У меня есть базовый макет сайта, на котором я использую сетки для отображения «карточек». Каждая сетка содержит несколько сеток с уникальными элементами.

HTML

    <main class="grid">
        <article>
            <img src="Assets/bananatag.png" alt="Sample Photo">
            <div class="text">
                <h3>Bananatag</h3>
                <p>Bananatag is an email tracking software launched in 2011. 
                    It notifies users whether the emails sent are successfully delivered and opened. 
                    Bananatag is used in email marketing where mass emails are sent to millions of 
                    targeted customers are response awaited.
                </p>
                <button onclick="alerts()">Request Software</button>
                <!-- <button onclick="requestPOST" id="APIPOST"> Request Software</button> -->
            </div>
        </article>
        <article>
                <img src="Assets/avaya.png" alt="Sample Photo">
                <div class="text">
                    <h3>Avaya Equinox</h3>
                    <p>Avaya Equinox for Windows turns your Windows PC into a powerful communications and collaboration 
                        system that can work in conjunction with your Avaya deskphone or enable you 
                        to work without compromise from anywhere. It provides SIP-based Voice-over-IP, IM/presence, web 
                        conferencing and point-to-point and multiparty video and easy to use 
                        contact centric workflows with contextual controls.
                    </p>
                    <button onclick="GET()"> Request Software</button>
                </div>
        </article>

CSS

.stack{
    padding: 20em;
    overflow: auto;
}
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
    align-items: stretch;
    object-fit: cover;
    padding: 1em;
}
/*nested*/
.grid > article{
    display: grid;
    background: #eee;
    grid-template-columns: repeat(2, 20% 80%);
    grid-auto-rows: 80%;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px rgbs(0,0,0,0.3);
    padding: 1em;

}
.grid > article img{
    max-width: 75%;
    min-width: 70%;
    border: white;
    box-shadow: 2px 2px 6px 0px rgbs(0,0,0,0.3);
    grid-auto-rows: 70px;
}
.text{
    padding: 20px 20px;
}
.text > button{
    background: rgb(93, 84, 84);
    border: 0;
    color: white;
    padding: 10px;
    width: 100%;
}

javascript html css

0

binjamin 23 Окт 2019 в 22:33

1

"означает копирование и вставку кода, а не добавление новой информации о программном обеспечении". Если вы храните информацию об элементе в одной точке, например, в файле json, вы можете просто прочитать ее, и js заполнит ваши карточки. Тогда вы можете просто обновить файл json вместо того, чтобы постоянно создавать html.

–

Patrick Evans

23 Окт 2019 в 22:40

Это отличное предложение @PatrickEvans! Это может быть сложно с хранением изображений, но я уверен, что смогу это понять. Так можно ли создавать новую карту каждый раз, когда добавляется новая информация? Это то, чего я хочу добиться.

–

binjamin

23 Окт 2019 в 22:43

Answer

Вы можете создать фабрику товаров:

  function createObject() {
    var result = document.createElement("article");
    result.innerHTML = "<img><div class=\"text\"><h3></h3><p></p><button>Request Software</button></div>";
    return result;
  }

Затем вы можете добавлять содержимое к сборным объектам с помощью этой функции

  function setObject(imgsrc,h3,p,onclick) {
    this.querySelector("img").src = imgsrc;
    this.querySelector("h3").innerHTML = h3;
    this.querySelector("p").innerHTML = p;
    this.querySelector("button").onclick = onclick;
  }

И используйте это так:

<div id="contents"></div>

<script>
  var obj = createObject(); // later you can deep copy it, or just create a new object
  setObject.call(obj, "img.jpg", "Test object", "Description", ()=>alert('test'));
  contents.appendChild(obj);
</script>

2

Jan Turoň 23 Окт 2019 в 22:57

Вау, это больше, чем я когда-либо ожидал. Спасибо за это Ян! Я новичок в JavaScript, поэтому это очень полезно для меня.

–

binjamin

23 Окт 2019 в 23:16

Question 2

Вы можете создать фабрику товаров:

  function createObject() {
    var result = document.createElement("article");
    result.innerHTML = "<img><div class=\"text\"><h3></h3><p></p><button>Request Software</button></div>";
    return result;
  }

Затем вы можете добавлять содержимое к сборным объектам с помощью этой функции

  function setObject(imgsrc,h3,p,onclick) {
    this.querySelector("img").src = imgsrc;
    this.querySelector("h3").innerHTML = h3;
    this.querySelector("p").innerHTML = p;
    this.querySelector("button").onclick = onclick;
  }

И используйте это так:

<div id="contents"></div>

<script>
  var obj = createObject(); // later you can deep copy it, or just create a new object
  setObject.call(obj, "img.jpg", "Test object", "Description", ()=>alert('test'));
  contents.appendChild(obj);
</script>

2

Jan Turoň 23 Окт 2019 в 22:57

Вау, это больше, чем я когда-либо ожидал. Спасибо за это Ян! Я новичок в JavaScript, поэтому это очень полезно для меня.

–

binjamin

23 Окт 2019 в 23:16

Многоразовые элементы веб-страницы

1 ответ

Похожие вопросы

Новые вопросы

javascript