worldwide open-source software

Инструменты пользователя

Инструменты сайта

Вы посетили:
playground

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
playground [2025/12/14 12:37] – [про] vladpolskiyplayground [2025/12/14 14:23] (текущий) – [exsample] vladpolskiy
Строка 1: Строка 1:
 <note blue>синяя заметка</note> <note blue>синяя заметка</note>
 {{fa>address-book?}} {{fa>address-book?}}
 +====tiuy====
 +:&3: <fc #9acd32>3 мин.</fc>
 +{{:icons:16:clock-frame.png?|clock-frame.png.}}
 +<html>
 +<!-- uSocial -->
 +<i class="fa fa-clock-o"></i>
 +<script async src="https://usocial.pro/usocial/usocial.js?uid=60a79de4b3f94535&v=6.1.5" data-script="usocial" charset="utf-8"></script>
 +<div class="uSocial-Share" data-pid="00f776d6cddfbf5cd018ffe07f376ec7" data-type="share" data-options="round,style1,default,absolute,horizontal,size24,counter0,mobile_position_right" data-social="vk,mail,ok,telegram,email"></div>
 +<!-- /uSocial -->
 +</html>
 +====hkghkg====
  
  
 <html> <html>
- 
 <head> <head>
   <meta charset="UTF-8">   <meta charset="UTF-8">
Строка 99: Строка 109:
 <html> <html>
  
-<head> +<div class="ya-share2" data-curtain data-size="l" data-services="messenger,vkontakte,odnoklassniki,telegram,twitter,viber,whatsapp,moimir"></div> 
-  <meta charset="UTF-8"> +<script src="./js/share.js"></script>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> +
-  <title>Создание share-кнопок для публикации материала в соцсетях с помощью JavaScript</title> +
-  <style> +
-    *, +
-    *::before, +
-    *::after { +
-      box-sizing: border-box; +
-    } +
- +
-    html { +
-      font-family: sans-serif; +
-      line-height: 1.15; +
-      -webkit-text-size-adjust: 100%; +
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +
-    } +
- +
-    body { +
-      margin: 0; +
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +
-      font-size: 1rem; +
-      font-weight: 400; +
-      line-height: 1.5; +
-      color: #212529; +
-      text-align: left; +
-      background-color: #fff; +
-    } +
- +
-    /* social-share */ +
-    .social-share { +
-      background-color: #f0f8f3; +
-      padding-top: 0.5rem; +
-      padding-bottom: 0.75rem; +
-    } +
- +
-    .social-share__title { +
-      text-align: center; +
-      font-weight: bold; +
-      font-size: .875rem; +
-      margin-bottom: 0.5rem; +
-    } +
- +
-    .social-share__items { +
-      display: flex; +
-      justify-content: center; +
-      list-style: none; +
-      margin-top: 0; +
-    } +
- +
-    .social-share__item { +
-      position: relative; +
-      background-color: #00832d; +
-      display: block; +
-      -webkit-user-select: none; +
-      -moz-user-select: none; +
-      -ms-user-select: none; +
-      user-select: none; +
-      transition: background-color .3s ease-in-out; +
-      width: 2.5rem; +
-      height: 2.5rem; +
-      margin-left: 0.25rem; +
-      margin-right: 0.25rem; +
-      border-radius: .25rem; +
-    } +
- +
-    .social-share__item:hover { +
-      background-color: #006624; +
-    } +
- +
-    .social-share__item::before { +
-      content: ""; +
-      position: absolute; +
-      width: 1.2rem; +
-      height: 1.2rem; +
-      left: .65rem; +
-      top: .65rem; +
-      background: transparent no-repeat center center; +
-      background-size: 100% 100%; +
-    } +
- +
-    .social-share__item_twitter::before { +
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E"); +
-    } +
- +
-    .social-share__item_fb::before { +
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E"); +
-    } +
- +
-    .social-share__item_vk::before { +
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23ffffff' d='M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z'/%3E%3C/svg%3E"); +
-    } +
- +
-    .social-share__item_telegram::before { +
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z'/%3E%3C/svg%3E"); +
-    } +
-  </style> +
-</head> +
- +
-<body> +
- +
-  <div class="social-share"></div> +
- +
-  <script> +
-    document.addEventListener('DOMContentLoaded', function() { +
-      const createShareHtml = function(title, shareData) { +
-        let anchorList = []; +
-        const anchorTemplate = function(item) { +
-          return '<a href="' + item.href + '" class="social-share__item social-share__item_' + item.name +'" title="' + item.title + '" onclick="' + item.onclick + '"></a>'; +
-        } +
-        const wrapperTemplate = function(title, anchorList) { +
-          return '<div class="social-share__title">' + title + '</div><div class="social-share__items">' + anchorList.join('') + '</div>'; +
-        } +
-        shareData.forEach(function(item) { +
-          anchorList.push(anchorTemplate(item)); +
-        }) +
-        return wrapperTemplate(title, anchorList); +
-      } +
-      const $socialShare = document.querySelector('.social-share'); +
-      if ($socialShare) { +
-        const url = encodeURIComponent(location.protocol + '//' + location.host + location.pathname); +
-        const title = encodeURIComponent(document.title); +
-        const twitterUserName = 'itchief_ru'; +
-        const shareData = [ +
-          { +
-            name: 'twitter', +
-            title: 'Twitter', +
-            href: 'https://twitter.com/intent/tweet?text=' + title + '&url=' + url + '&via=' + twitterUserName, +
-            onclick: 'window.open(this.href, \'Twitter\', \'width=800,height=300,resizable=yes,toolbar=0,status=0\'); return false' +
-          }, +
-          { +
-            name: 'fb', +
-            title: 'Facebook', +
-            href: 'https://www.facebook.com/sharer/sharer.php?u=' + url, +
-            onclick: 'window.open(this.href, \'Facebook\', \'width=640,height=436,toolbar=0,status=0\'); return false' +
-          }, +
-          { +
-            name: 'vk', +
-            title: 'ВКонтакте', +
-            href: 'https://vk.com/share.php?url=' + url, +
-            onclick: 'window.open(this.href, \'ВКонтакте\', \'width=800,height=300,toolbar=0,status=0\'); return false' +
-          }, +
-          { +
-            name: 'telegram', +
-            title: 'Telegram', +
-            href: 'https://t.me/share/url?url=' + url + '&title=' + title, +
-            onclick: 'window.open(this.href, \'Telegram\', \'width=800,height=300,toolbar=0,status=0\'); return false' +
-          } +
-        ]; +
-        const $html = createShareHtml('Поделиться этим материалом в социальных сетях:', shareData); +
-        $socialShare.innerHTML = $html; +
-      } +
-    }); +
-  </script> +
- +
- +
-</body>+
  
 </html> </html>
Строка 374: Строка 229:
 <wrap right>[[playground:playground|playground]] →</wrap> <wrap right>[[playground:playground|playground]] →</wrap>
 </note> </note>
 +
 +\\  
 +\\  
 +<note blue >
 +← [[playground:playground|Читать далее...]] 
 +
 +</note>
 +<note blue>[[playground:playground|Читать далее...]]</note>
 +----
 +
 +<WRAP left 30%>
 +<note blue>[[playground:playground|Читать далее...]]</note>
 +</WRAP>
 +----
  
 =====exsample===== =====exsample=====
Строка 492: Строка 361:
 [[:wiki:welcome|{{fa>home?24|Welcome to DokuWiki}}]] [[:wiki:welcome|{{fa>home?24|Welcome to DokuWiki}}]]
 [[https://github.com/LotarProject/dokuwiki-plugin-icons|{{fa>github-square?24|Icons DokuWiki plugin on GitHub}}]]   [[https://github.com/LotarProject/dokuwiki-plugin-icons|{{fa>github-square?24|Icons DokuWiki plugin on GitHub}}]]  
 +
 +
 +====читать далее====
 +<html>
 +<head>
 +<meta name="viewport" content="width=device-width, initial-scale=1">
 +<style>
 +#more {display: none;}
 +</style>
 +</head>
 +<body>
 +
 +<h2>Кнопка читать дальше</h2>
 +
 +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
 +<button onclick="myFunction()" id="myBtn">Читать больше</button>
 +
 +<script>
 +function myFunction() {
 +  var dots = document.getElementById("dots");
 +  var moreText = document.getElementById("more");
 +  var btnText = document.getElementById("myBtn");
 +
 +  if (dots.style.display === "none") {
 +    dots.style.display = "inline";
 +    btnText.innerHTML = "Читать больше"; 
 +    moreText.style.display = "none";
 +  } else {
 +    dots.style.display = "none";
 +    btnText.innerHTML = "Читать меньше"; 
 +    moreText.style.display = "inline";
 +  }
 +}
 +</script>
 +
 +</body>
 +</html>
playground.1765705078.txt.gz · Последнее изменение: — vladpolskiy