Thiết kế website dành cho điện thoại P2

Chúng tôi xin tiếp tục viết thiết kế website phần II , nếu ai chưa đọc phần một xin đọc bài này tại đây.

Thiết kế website dành cho điện thoại P1

Để hoàn thành các website free cho mobile cần có những đoạn code để thể thiết kế web miễn phí, trước đây chúng tôi đã viết đoạn code của của Ratchet.

Thiết kế website cho mobile

Tiếp theo là phần ….

Buttons

<a class="button">Button</a>
<a class="button-main">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>

Buttons with counts

<a class="button">Count button<span class="count">1</span></a>
<a class="button-main">Count button<span class="count">1</span></a>
<a class="button-positive">Count button<span class="count">1</span></a>
<a class="button-negative">Count button<span class="count">1</span></a>

Block buttons

<a class="button-block">Block button</a>
<a class="button-main button-block">Block button</a>
<a class="button-positive button-block">Block button</a>
<a class="button-negative button-block">Block button</a>

Segmented controller

<ul class="segmented-controller">
  <li class="active">
    <a href="#item1">Thing one</a>
  </li>
  <li>
    <a href="#item2">Thing two</a>
  </li>
  <li>
    <a href="#item3">Thing three</a>
  </li>
</ul>
<ul class="inset list">
  <li id="item1" class="segmented-controller-item active">
    Item 1
  </li>
  <li id="item2" class="segmented-controller-item">
    Item 2
  </li>
  <li id="item3" class="segmented-controller-item">
    Item 3
  </li>
</ul>

Counts

<span class="count">1</span>
<span class="count-main">2</span>
<span class="count-positive">3</span>
<span class="count-negative">4</span>

Forms

<form>
  <input type="text" placeholder="Full name">
  <input type="search" placeholder="Search">
  <textarea rows="5"></textarea>
  <a class="button button-block">Choose existing</a>
</form>

Form with input group

<form>
  <div class="input-group">
    <input type="text" placeholder="Full name">
    <input type="email" placeholder="Email">
    <input type="text" placeholder="Username">
  </div>
</form>

Form with input group and labels

<form>
  <div class="input-group">
    <div class="input-row">
      <label>Full name</label>
      <input type="text" placeholder="Mister Ratchet">
    </div>
    <div class="input-row">
      <label>Email</label>
      <input type="email" placeholder="ratchetframework@gmail.com">
    </div>
    <div class="input-row">
      <label>Username</label>
      <input type="text" placeholder="goRatchet">
    </div>
  </div>
</form>

Toggles

<div class="toggle active">
  <div class="toggle-handle"></div>
</div>
<div class="toggle">
  <div class="toggle-handle"></div>
</div>

File Toggles.js

Đoạn code sau
document
  .querySelector('#myToggle')
  .addEventListener('toggle', myFunction)

Popovers

 

<divid="myPopover"class="popover"><headerclass="popover-header"><aclass="button"href="#"> Left </a><h3class="title">Popover title</h3><aclass="button"href="#"> Right </a></header><ulclass="list"><li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li></ul></div>

Các bạn nên đặt đoạn code này ở phần tiêu đề sau phần Header
<header class="bar-title">
  <a href="#myPopover">
    <h1 class="title">Title</h1>
  </a>
</header>

Modals

<a href="#myModal" class="button">Open modal</a>

<div id="myModal" class="modal">
  <header class="bar-title">
    <h1 class="title">Modal</h1>
    <a class="button" href="#myModal">
      Close
    </a>
  </header>

  <div class="content content-padded">
    <p>The contents of my modal.</p>
  </div>
</div>

Sliders

<div class="slider">
  <ul>
    <li>
      <img src="img/slide-1.jpg">
      <span class="slide-text">← Slide me</span>
    </li>
    <li>
      <img src="img/slide-2.jpg">
    </li>
    <li>
      <img src="img/slide-3.jpg">
    </li>
  </ul>
</div>

Tạo file Sliders.js để lưu đoạn code này vào 
document
  .querySelector('#mySlider')
  .addEventListener('slide', myFunction)

Push

Tạo file Push.js để kết nối các file trong dự án Push.js biết các lệnh sử lý trên điện thoại cùng máy tính bảng.

<a href="two.html">Two<a>

A working version of push:

<header class="bar-title">
  <h1 class="title">Push</h1>
</header>
<div class="content">
  <ul class="list">
      <li>
          <a href="two.html" data-transition="slide-in">
              Go to page 2
          </a>
          <span class="chevron"></span>
      </li>
  </ul>
</div>

Nếu bạn muốn chặn một link nào đó.
<a href="http://www.google.com" data-ignore="push">Google<a>

Push.js liên kết với một sự kiện vào các tài liệu mà trả về một đối tượng cụ thể và có thể được sử dụng để bắn một cuộc gọi lại

window.addEventListener(‘push’, myFunction);

Chúc các bạn thiết kế được những web miễn phí như ý muốn bằng dịch vụ thiết kế web miễn phí, rất hy vọng các bạn sẽ chia sẻ với những người khác web free này nhé.


 

 

One Response

  1. Fotoalbum to sposób tworzenia fotoksiążek, które na pewno kiedyś będą wspaniałą pamiątką, szczególnie dla naszych rodziców
    czy dziadków. Gdzie stworzyć fotoksiążkę?

    Przede wszystkim warto zastanowić się, czy możemy zaprojektować ją
    sami, czy też wolimy dać to zadanie profesjonalnemu fotografowi.

    W drugim przypadku usługa z pewnością będzie droższa.

    Jeśli samodzielnie chcemy podjąć się tego zadania warto wykorzystać dostępne w sieci programy, które najczęściej znajdziemy na stronach internetowych firm, oferujących wykonywanie
    takich fotoalbumów. W trakcie tworzenia naszego fotoalbumu mamy możliwość
    samodzielnego wyboru, gdzie będą znajdować się konkretne zdjęcia.

    Kolejnym etapem jest wybór liczby stron oraz określenie, jaki powinien być papier naszej fotoksiążki.
    Czy warto jest mieć fotoksiążkę. Co więcej to coś
    dać Tobie więcej ponad foto. Szczególnie że osoby dorosłe
    bardzo cenią sobie foto, które w wolnym czasie
    można będzie oglądać. Warto będzie więc czasem zastanowić się nad tego
    rodzaju pomysłem, a być może dla dziadków będzie to coś naprawdę
    niesamowitego. Od czasu do czasu zwiększa się liczba możliwości, oznacza
    to, że jeśli ktoś będzie chciał może wejść w posiadanie takiej właśnie książki.

Add a Comment

Your email address will not be published. Required fields are marked *

Call Now Button