Live Generated HTML Documentation use jQuery - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Live Generated HTML Documentation use jQuery, we have prepared well for this article you read and download the information therein. hopefully fill posts Article HTML, Article jQuery, Article Snippet, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Live Generated HTML Documentation use jQuery
link : Live Generated HTML Documentation use jQuery

Live Generated HTML Documentation use jQuery

Ada satu pen yang unik dari codepen.io by Maxwell Antonucci bercerita mengenai HTML Documentation Generator codepen.io/max1128/pen/obvRQW Dia menampilkan demo dari dokumen HTML bootstrap, dengan otomatis maka kode dari demo tersebut bisa langsung terlihat tanpa kita harus menuliskannya lagi! Seperti yg kita ketahui bersama, salah satu keunggulan blogspot kita dapat menyisipkan demo-demo kecil secara live seputar syntax HTML di area postingan. Akan tetapi penulisan kode demo dan kode post harus di tulis secara terpisah :-s
Berikut contoh kecil:

Box Shadows

{
  width: 195px;
  height: 70px;
  display: block;
  font-size: 25px;
  margin: 5px auto;
  text-align: center;
  padding-top: 1.3em;
  border-radius: 15px
  -webkit-box-shadow: 0 0 15px 5px #5CA8FF;
  box-shadow: 0 0 15px 5px #5CA8FF;
}

Dengan menggunakan trick HTML-Documentation Generator, sobat bisa langsung menyuguhkan kode live demo tanpa harus menuliskannya lagi ;) Bagaimana caranya bisa terjadi seperti itu? Mari ikuti langkah-langkahnya...

Syarat harus sudah terpasang jQuery script pada template.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.jsSimpan snippet jQuery berikut ( cobalah terlebih dahulu diletakan tepat di atas tag</body> ) Kalau gagal coba simpan sebelum tag </head>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$('*[doc-info]').each(function(){
 $(this).wrap('<div class="doc-container"></div>');
 $(this).closest('.doc-container').wrap('<div class="doc-wrapper"></div>');
   $(this).removeAttr('doc-info');
 var container = $(this).closest('.doc-container'),
  wrapper = $(this).closest('.doc-wrapper');
 //create button after div
 $("<div class='doc-button'>< /> Click to Show - Hide Code</div>").insertAfter(container);
 //create pre wrapper after button
 var button = container.next('.doc-button')
 $("<pre></pre>").insertAfter(button);
 //hide the pre so can slidetoggle later
 $("pre").hide();
 button.one("click", function() {
   var cloned = $(this).prev('.doc-container').clone(),
     code = $(cloned).html().split("\n").filter(function(n) {
       return (n.replace(/\s+$/, '') != '');
     }),
     spacesOnLeft = code[0].match(/^ */)[0].length;
   for (var i = 0, len = code.length; i < len; i++) {
       var output = button.next('pre'),
           existing_text=output.text(),
           new_text=code[i].substring(spacesOnLeft);
       output.text(existing_text + new_text + '\n');
   }
 });
});
$(".doc-button").click(function() {
 $(this).next().slideToggle("fast", function() {});
});
});
//]]></script>

Bumbu CSS dasar, silahkan sobat hias-hias lagi sendiri ya :D

.doc-wrapper {
position: relative;
width: 100%;
height: 175px;
overflow: auto;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.doc-wrapper .doc-button {
position: absolute;
top: 0;
left: 0;
padding: .25em;
background-color: #F5F5F5;
display: none;
}
.doc-wrapper:hover {
padding-top: 40px;
}
.doc-wrapper:hover .doc-button {
display: block;
cursor: pointer;
}
.doc-wrapper pre {
padding: 1em;
background-color: #ccc;
margin: 1em 0;
white-space: pre-wrap;
}

Cara pemakaian sobat tinggal tambahkan atribut doc-info ke dalam elemen HTML.
Contoh

<div doc-info>
<div style="-webkit-box-shadow: 0 0 15px 5px #5CA8FF;box-shadow: 0 0 15px 5px #5CA8FF;width:195px;height:70px;display:block;margin:5px auto;text-align:center;padding-top:1.3em;font-size:25px;border-radius:15px">Box Shadows</div>
</div>

<div doc-info style="-webkit-box-shadow: 0 0 15px 5px #5CA8FF;box-shadow: 0 0 15px 5px #5CA8FF;width:195px;height:70px;display:block;margin:5px auto;text-align:center;padding-top:1.3em;font-size:25px;border-radius:15px">Box Shadows</div>

Happy Generate \m/

Thus articles Live Generated HTML Documentation use jQuery

that is all articles Live Generated HTML Documentation use jQuery This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Live Generated HTML Documentation use jQuery with the link address https://autopostingblogspot.blogspot.com/2015/12/live-generated-html-documentation-use.html