Вернуться в каталог >>>
KPB logo
  Фиксированные и плавающие размеры, эффекты
1. Описание скрипта
2. Варианты углов
3. Задание углов с которыми работает скрипт
4. Размеры углов
5. Комбинирование параметров углов
6. Варианты украшения (вложения)
7. Цветные углы
8. Фиксированные и плавающие размеры, эффекты
Интересные дополнительные возможности

Left

$(this).corner("invsteep tr br 20px");

Right

$(this).corner("invsteep tl bl 20px");

 Script:  $('#demo').corner("sharp tr br 20px");
$('#demo1').corner("sharp sharp tl bl 20px");	
 Код:  <div id="demo" class="fun" style="margin-left: 15px">
					   <h1>Left</h1>
					    <p>$(this).corner("sharp tr br 20px");</p></div>
					    
    <div id="demo1" class="fun">
	<h1>Right</h1>
	<p>$(this).corner("sharp tl bl 20px");</p></div>	

Left

$(this).corner("sharp tr br 20px");

Right

$(this).corner("sharp tl bl 20px");


Фиксированные или плавающие размеры блоков
Высота: плавающая
Ширина: плавающая
lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit
Высота: фиксированная
Ширина: плавающая
lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet elementum at bibendum at, eros cras at mi et tortor egestas vestibulum sed cras at mi vestibulum phasellus sed felis sit amet orci dapibus semper.
Высота: плавающая
Ширина: фиксированная
lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit

Высота: фиксированная
Ширина: фиксированная
lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit
 Script:  $("div.box").corner();
CSS: .box { background-color: #6af; padding: 15px; text-align: center; margin: 25px; color: #000; } #box1 { zoom:1 } /* fluid (zoom for layout) */ #box2 { height: 150px; } /* fixed height */ #box3 { width: 300px; margin:auto } /* fixed width */ #box4 { height: 150px; width: 300px; margin:auto } /* fixed height and width */
 Код:  <div id="box2" class="box">
        <strong>Высота: фиксированная<br />Ширина:  плавающая<br /></strong>
        lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit
        sed lorem leo rhoncus sit amet elementum at bibendum at, eros cras at mi et tortor egestas vestibulum
        sed cras at mi vestibulum phasellus sed felis sit amet orci dapibus semper.<hr>
    </div>	

1. Пример показывает, динамичкие возможности
 Script:  $('#dynCorner').click(function() {
			$('#dynamic').corner();
		});
		$('#dynUncorner').click(function() {
			$('#dynamic').uncorner();
		});	
 Код:  <p><button id="dynCorner">Corner</button>  <button id="dynUncorner">Uncorner</button> </p>
      <div id="dynamic" style="width: 200px; padding: 30px; background-color: #6af; color: #000;">
        <strong>Uncornering Demo<br /></strong>
        This div has an id of #dynamic
    </div>	

Uncornering Demo
This div has an id of #dynamic

2. Следующий пример показывает, как встроить параметры угла в код html разметки вместо передачи их в функции
 Script: $('.myCorner').corner();
		
		HTML код: <div class="myCorner" data-corner="left 20px">Metadata Example</div>

Metadata Example

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.