Отличные решения для САЙТА ◆ #RSweb

Оглавление

  1. Введение
  2. Подключение css на сайт (3 способа)
  3. Подключение js (javascript) на сайт (3 способа)
  4. Подсветка кода на сайт
  5. Оглавление, нумерация списка (содержание)
  6. Красивый стиль оформления таблиц
  7. Диаграмма c помощью js (javascript)
  8. Кнопка плавного возвращения к верхней части сайта
  9. Вид материалов в несколько колонок на uCoz
  10. Символ пробел на языке HTML
  11. Система вкладок для сайта
  12. iFrame окно внутри сайта
  13. Отключение ПКМ (контекстного меню) на сайте
  14. Запретить открытие сайта в iframe или frame окнах
  15. Ссылка со всплывающем окном
  16. Скрыть AdminBar uCoz
  17. Наложение текста поверх изображения
  18. Стиль для переключателей страниц uCoz
  19. Якоря (переходы внутри сайта)
  20. Просмотр изображения во весь экран, галерея iLoad
  21. Автоматическое обновление страницы
  22. [RSJS1] Скрипт взятия процента от числа
  23. Поделиться материалом
  24. [RSJS2] Сокращение ссылок с редиректом
  25. Объект по центру веб-страницы
  26. Полоса загрузки для веб-страницы
  27. Простейший спойлер
  28. Живой поиск для uCoz

Введение

Здесь собранные мной интересные решения для верстки сайта. Большинство из них взято с просторов интернета и усовершенствовано. Авторов не знаю, если объявитесь, укажу.

Подключение css на сайт (3 способа)

@import url("code.css");
<style type="text/css">
 CSS code
</style>
<link rel="stylesheet" href="code.css" type="text/css">

Подключение js (javascript) на сайт (3 способа).

document.write("<script src='code.js'></scr"+"ipt>");
<script type="text/javascript">
 JS code
</script>
<script type="text/javascript" src="code.js"></script>

Подсветка кода на сайт

Пример: отображение кодов на этой странице.
@import url("//studio.scainlain.ru/diz/uLight.css");
document.write
("<script src='//studio.scainlain.ru/diz/jquery-1.7.1.min.js'></scr"+"ipt>");
document.write
("<script src='//studio.scainlain.ru/diz/uLight.js'></scr"+"ipt>");
<pre class="html">КОД</pre>
<pre class="css">КОД</pre>
<pre class="js">КОД</pre>
Автор: blweb.ru

Оглавление, нумерация списка (содержание)

Пример: содержание на верху этой странице.
<ol>
 <li>Roma ScainLain</li>
 <li>Tanya ScainLain</li> 
</ol>

Красивый стиль оформления таблиц

FirstLast
NameRomaScainLain
@import url("//studio.scainlain.ru/diz/tablestyle.css");
<table width="100%" class="table1">
<thead>
 <tr>
 <th></th><th width="30%">First</th><th width="30%">Last</th>
 </tr>
</thead>
<tbody>
 <tr>
 <th>Name</th><td>Roma</td><td>ScainLain</td>
 </tr>
</tbody>
</table>

Диаграмма c помощью js (javascript)

document.write
("<script src='https://www.google.com/jsapi'></scr"+"ipt>"); 
<script>
 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
 var data = google.visualization.arrayToDataTable([
 ['Тип деятельности', 'Количество'],['Сон',10],['Остальное',11],['Тренировка',1]]);
 var options = {
 title: 'По типу деятельности (в часах)',
 is3D: true,
 pieResidueSliceLabel: 'Остальное'
 };
 var chart = new google.visualization.PieChart(document.getElementById('RSpeat'));
 chart.draw(data, options);
 } 
</script>
<div id="RSpeat" style="width: 100%; height: 250px;"></div> 
<script>
 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
 var data = google.visualization.arrayToDataTable([
 ['Год', 'Россия', 'США'],
 ['1860', 1.3, 70],
 ['1885', 2000, 3120],
 ['1901', 12170, 9920]
 ]);
 var options = {
 title: 'Добыча нефти',
 hAxis: {title: 'Год'},
 vAxis: {title: 'Тыс. тонн'}
 };
 var chart = new google.visualization.ColumnChart(document.getElementById('RSoil'));
 chart.draw(data, options);
 }
 </script>
 <div id="RSoil" style="width: 100%; height: 250px;"></div>

Кнопка плавного возвращения к верхней части сайта

Пример: левый нижний угол при прокрутке этой страницы вниз.
@import url("//studio.scainlain.ru/diz/up_batton.css"); 
document.write
("<script src='//studio.scainlain.ru/diz/up_batton.js'></scr"+"ipt>");
<div class="fright">
<a href='#' id='Go_Top'>
<img width="45" src="//studio.scainlain.ru/img/top.png">
</a>
</div>

Вид материалов в несколько колонок на uCoz

Пример: перейдите в раздел видеоролики на этом сайте.
<div style="width:50%;float:left;">Вид материала</div>

Символ пробел на языке HTML

&nbsp

Система вкладок для сайта

@import url("//studio.scainlain.ru/diz/vkladki.css"); 
document.write
("<script src='//studio.scainlain.ru/diz/jquery-1.7.1.min.js'></scr"+"ipt>");
document.write
("<script src='//studio.scainlain.ru/diz/vkladki.js'></scr"+"ipt>");
<div class="container"> 
 <ul class="tabs"> 
 <li class=""><a href="#tab1">Roma</a></li> 
 <li class=""><a href="#tab2">ScainLain</a></li> 
 </ul> 
<div class="tab_container"> 
 <div style="display: block;" id="tab1" class="tab_content"> 
 <h2>ScainLain.ru</h2> 
 </div> 
 <div style="display: none;" id="tab2" class="tab_content"> 
 <h2>rOmYz.ru</h2> 
 </div> 
</div> 
</div>

iFrame окно внутри сайта

Пример: в предыдущем пункте выше.
<iframe src="site.html" 
width="100%" height="250" scrolling="no">
</iframe>

Отключение ПКМ (контекстного меню) на сайте

document.write
("<script src='//studio.scainlain.ru/diz/BlockPKM.js'></scr"+"ipt>");

Запретить открытие сайта в iframe или frame окнах

Вас перекинет на сайт, ссылка на который будет указана в iframe.
if((self.parent&&!(self.parent===self))&&(self.parent.frames.length!=0))
{self.parent.location=document.location}

Ссылка со всплывающем окном

Нажми на ссылку.
<a target="_blank" onclick="alert('текст')" href="/">название</a>

Скрыть AdminBar uCoz.

#puzadpn {display:none}

Наложение текста поверх изображения

@import url("//studio.scainlain.ru/diz/vide_video.css");
<div class="example4" align="center">
<img src="img.jpg" class="example_beauty" border="0"/> 
<a href="/"><b><span style="color:#FF0000">Текст</span></b></a> 
</div>

Стиль для переключателей страниц uCoz

.swchItem { 
 color:#444; 
 border:1px solid #BEBEBE; 
 background:#FAFAFA; 
} 
.swchItemA, .swchItem { 
 -moz-border-radius:3px; 
 -webkit-border-radius:3px; 
 border-radius:3px; 
 padding:6px 9px; 
 margin-left:3px; 
 text-decoration:none; 
} 
.swchItemA, .swchItem:hover { 
 font-weight:normal; 
 color:#fff; 
 text-shadow:0px 1px #3C3C3C; 
 box-shadow:0px 1px #EDEDED; 
 -webkit-box-shadow:0px 1px #EDEDED; 
 -moz-box-shadow:0px 1px #EDEDED; 
 border:1px solid #202020; 
 background:#525252; 
 background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252); 
 background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),
color-stop(0.02,#6C6C6C),color-stop(1,#525252)); 
}

Якоря (переходы внутри сайта)

Пример: нажмите на любой раздел из содержания.
<a href="#RSlink">Нажимаешь</a>
<a name="RSlink">Сюда попадаешь</a>

Просмотр изображения во весь экран, галерея iLoad

<a rel="iLoad|Название" href="img.jpg">
<img src="mini.jpg" border="0"/></a>
JS подключаем внизу страницы, перед закрытием тега body.
<script src='//studio.scainlain.ru/diz/iLoad.js'></script>

Автоматическое обновление страницы

<META HTTP-EQUIV="REFRESH" CONTENT="600">

[RSJS1] Скрипт взятия процента от числа

100500
<script type="text/javascript">
 //1st script by Roma ScainLain
 window.onload = function()
 {
 for(var i=1; i<10; i++)
 { 
 if (document.getElementById('p4'+i) != null)
 {
 var x = document.getElementById('p4'+i).innerText;
 document.getElementById('p3'+i).innerHTML = x*0.9; 
 document.getElementById('p2'+i).innerHTML = x*0.75; 
 document.getElementById('p1'+i).innerHTML = x*0.5; 
 }
 }
 }
</script>
<div id="p41">100500</div>
<div id="p31"></div>
<div id="p21"></div>
<div id="p11"></div>

Поделиться материалом

URL-cсылка
BB-код
HTML-код
<fieldset><legend>URL-cсылка</legend>
<input type="text" onclick="select(this);" style="width:100%;" value="http://scainlain.ru/publ/$ID$"></fieldset>
<fieldset><legend>BB-код</legend>
<input type="text" onclick="select(this);" style="width:100%;" value="[url=http://scainlain.ru/publ/$ID$]$ENTRY_TITLE$[/url]"></fieldset>
<fieldset><legend>HTML-код</legend>
<input type="text" onclick="select(this);" style="width:100%;" value='<a href="http://scainlain.ru/publ/$ID$" target="_blank">$ENTRY_TITLE$</a>'></fieldset>

[RSJS2] Сокращение ссылок с редиректом

Пример: сократим http://studio.scainlain.ru/publ/prochee/kompjuternye_igry_rsgame/7-1-1-36 до http://scainlain.ru/publ/36
var rsurl = location.href; 
rsurl = rsurl.replace('http://'+location.host+'/', ''); 
var rsmod = rsurl.substr(0,rsurl.indexOf("/", 0)+1); 
var rsid = rsurl.substr(rsurl.indexOf("/", 0)+1); 
if (rsid.indexOf("page", 0)>0) {rsid=rsid.substr(rsid.indexOf("page", 0)+4);} 

Объект по центру веб-страницы

Пример (в первую секунду): http://ScainLain.ru/publ/24
html, body {height:100%;margin:0;}
#mydiv {background:white;width:320px;height:320px;margin:-160px 0 0 -160px;top:50%;left:50%;position:absolute;}
<body>
<div id="mydiv">
<img src="//studio.scainlain.ru/img/ava.jpg" />
</div>
</body>

Полоса загрузки для веб-страницы

Пример (в первую секунду): http://ScainLain.ru/publ/24
@import url("//studio.scainlain.ru/diz/pace.css");
document.write
("<script src='//studio.scainlain.ru/diz/pace.min.js'></script>");

Простой спойлер

Свернуть/Развернуть
document.write
("<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>");
<a onclick="$('#one').slideToggle('slow');" href="javascript://">Свернуть/Развернуть</a>

<div id="one" style="display: none;">Содержимое для показа</div>

Живой поиск для uCoz

@import url("//studio.scainlain.ru/diz/search_fast.css");
document.write
("<script src='//studio.scainlain.ru/diz/search_fast.js'></script>");
Форма поиска:
<form onsubmit="this.sfSbm.disabled=true" method="get" action="/search/"> 
<input class="srch_fld" name="q" maxlength="30" size="20" placeholder="<?if($MODULE_ID$='search')?>$SEARCH_QUERY$<?else?>Поиск...<?endif?>" type="text"/> 
<input class="srch_btn" name="sfSbm" value="НАЙТИ" type="submit"/> 
<div id="search2"></div>
</form>
Вид материалов поиска:
<div class="mat-title"><a href="$ENTRY_URL$">$TITLE$</a></div>

Пример: прокрутите страницу в саймый верх.
Автор: fullweb.ucoz.ru + scainlain.ru

Перейти на мобильную версию сайта
Яндекс.Метрика тИЦ и PR