закругленные углы jQuery
В сегодняшней заметке мы научимся закруглять углы у элементов с обычными углами по средствам jQuery. Пример очень простой, поэтому легко подойдет для начинающих.
Нам понадобится всего одна картинка (вы можете ее увидеть справа отсюда)закругленные углы для всех четырех углов. Идея заключается в следующем. Мы создаем блок DIV с определенным классом, который и будем закруглять вставляя туда 4 пустых DIV’а с разными классами (углами), абсолютно позиционируя каждый. Картинка для всех углов, как я и сказал, будет одна и та же. Эту технику легко можно применять и без jQuery, просто добавляя 4 DIV’а в блок, который хотим закруглить, но динамичное закругление углов выглядит намного приятнее и проще. Работающий пример вы можете просмотреть, проядя по ссылке: закругленные углы jQuery В конце заметки вас ждет полностью рабочий архив с полностью рабочим исходником =).
Первым делом создадим файл стилей CSS style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
html, * {
  padding: 0;
  margin: 0;
}

div.rndblock {
  margin: 20px;
  width: 200px;
  height: auto;
  background:none repeat scroll 0 0 white;
  color:#6D6D6D;
  position:relative; 
  border:1px solid #E5E2E2;
  float: left;
}

.rndblock h2 {
  margin: 20px;
  text-decoration: underline;
}

.tl {
  background-position: top left;
  left: -1px;
  top: -1px;
}

.tr {
  background-position: top right;
  right: -1px !important;
  top: -1px;
}

.br {
  background-position: bottom right;
  bottom: -1px !important;
  right: -1px !important;
}

.bl {
  background-position: bottom left;
  bottom: -1px !important;
  left: -1px;
}

.tl, .tr, .bl, .br {
  background-image: url("../images/rndcorn.png");
  position: absolute;
  height: 10px;
  width: 10px;
  overflow: hidden;
}

button {
  background-color: lime;
  border: dashed 1ps yellow;
  padding: 3px;
  margin: 5px;
}
.rndblock p {
  padding: 10px;
}

Теперь немного пояснений:

  • строки 6-15 декорируют этот самый закругляемый блок, в 8й строке можно задать относительные единицы измерения, тогда блок будет «тянуться», 10я и 13я строки соответственно задают фон и границу
  • 22-44 мы задаем позиции фонового изображения для углов и позиционируем их относительно основного блока
  • 46-52 задаем общие для всех углов параметры: ведь картинка для углов у нас одна и та же и позиционирование для всех углов происходит абсолютное.
  • остальные строки лишь декор остальных элементов на странице

Теперь непосредственно разметка и jQuery код.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Вредный и его заметки: закругленные углы с помощью jQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $('docuemnt').ready(function() {
        var roundElements = '<div class="tl"></div>';
        roundElements += '<div class="tr"></div>';
        roundElements += '<div class="br"></div>';
        roundElements += '<div class="bl"></div>';
        $('button').click(function() {
          $(this).css('background', 'white').parent().append(roundElements);
        });
      });
    </script>
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
  </head>
  <body>
    <div class="rndblock">
      <h2>Блок номер 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Morbi elementum nisl nec ipsum vehicula hendrerit. </p>
      <button>Round this corners</button>

    </div>
   
    <div class="rndblock">
      <h2>Блок номер 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Morbi elementum nisl nec ipsum vehicula hendrerit. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Morbi elementum nisl nec ipsum vehicula hendrerit. </p>
      <button>Round this corners</button>

    </div>
   
    <div class="rndblock">
      <h2>Блок номер 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Morbi elementum nisl nec ipsum vehicula hendrerit. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Morbi elementum nisl nec ipsum vehicula hendrerit. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Morbi elementum nisl nec ipsum vehicula hendrerit. </p>
      <button>Round this corners</button>

    </div>
  </body>
</html>
  • В 6 строке мы подключаем jQuery через Google
  • строки 9-12 создают переменную с 4 DIV’ами, которые и являются углами, которые мы и будем добавлять к блоку, который хотим закруглить
  • 13-15 добавляем углы к блоку после нажатия на кнопку, чтобы успеть заметить разницу.
  • 21-26, как видите в этих строках нет ни одного упоминания о углах, просто блок с абзацем, заголовком и кнопкой

Работающий исходник: здесь
Если убрать закругление углов по нажатию на кнопку и делать это при загрузке на страницу, то будет очень легко закруглять углы, не усложняя код. Единственный минус этого метода: люди с отключенным JavaScript не увидят наших стараний, хоть их и немного, но их тоже надо учитывать.