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.

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="[email protected]">
    </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é.