Generate HTML Snippets to Live Code use X-ray HTML - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Generate HTML Snippets to Live Code use X-ray HTML, we have prepared well for this article you read and download the information therein. hopefully fill posts Article jQuery, Article Snippet, Article Tutorial, Article Web, we write this you can understand. Well, happy reading.

Title : Generate HTML Snippets to Live Code use X-ray HTML
link : Generate HTML Snippets to Live Code use X-ray HTML

Generate HTML Snippets to Live Code use X-ray HTML

Aa Koben menemukan 1 halaman menarik kumpulan code di www.filamentgroup.com/code. Selain itu juga link dengan tag lab (Articles in title) keren-keren, don't miss that dibaca :P Saya akan mengambil satu tutorial dari sana dengan judul X-rayHTML (Generate HTML snippets from live code for documentation) Source & demo github.com/filamentgroup/X-rayHTML
Penjelasan singkat versi GUE begini bro...
X-rayHTML adalah script jQuery plugin untuk membangun halaman kode dokumentasi kecil dari potongan HTML. Membuat dokumen dengan live code live preview dengan gaya (CSS) FLIP Animation. Tampak depan akan terlihat demo dari potongon kode HTML, dan tampak belakang adalah source code (kodenya) Gue harap elo pada mengerti dah ;;)

In your page:<script src="jquery.js"></script>
<script src="X-rayHTML.min.js"></script>

/*
* View Source
* Generates copy/pastable markup from actual rendered markup.
*
* Copyright (c) 2012 Filament Group, Inc.
* Licensed under the MIT, GPL licenses.
*/
!function(e){var t="xrayhtml",n={text:{open:"View Source",close:"View Demo"},classes:{button:"btn btn-small",open:"view-source",sourcepanel:"source-panel"},initSelector:"[data-"+t+"]",defaultReveal:"inline"},a={_create:function(){return e(this).each(function(){var n=e(this).data("init."+t);return n?!1:void e(this).data("init."+t,!0)[t]("_init").trigger("create."+t)})},_init:function(){var a=e(this).data(t)||n.defaultReveal;"flip"===a&&e(this)[t]("_createButton"),e(this).addClass(t+" method-"+a)[t]("_createSource")},_createButton:function(){var t=document.createElement("a"),a=document.createTextNode(n.text.open),i=e(this);t.setAttribute("class",n.classes.button),t.href="#",t.appendChild(a),e(t).bind("click",function(e){var a=i.attr("class").indexOf(n.classes.open)>-1;i[a?"removeClass":"addClass"](n.classes.open),t.innerHTML=a?n.text.open:n.text.close,e.preventDefault()}).insertBefore(i)},_createSource:function(){var t=this,a=document.createElement("pre"),i=document.createElement("code"),c=document.createElement("div"),r=document.createElement("div"),s=t.innerHTML,o=document.createTextNode(s);c.setAttribute("class","snippet"),e(t).wrapInner(c),i.appendChild(o),a.appendChild(i),r.setAttribute("class",n.classes.sourcepanel),r.appendChild(a),this.appendChild(r)}};e.fn[t]=function(n,a,i,c){return this.each(function(){return n&&"string"==typeof n?e.fn[t].prototype[n].call(this,a,i,c):e(this).data(t+"data")?e(this):(e(this).data(t+"active",!0),void e.fn[t].prototype._create.call(this))})},e.extend(e.fn[t].prototype,a),e(function(){e(n.initSelector)[t]()})}(jQuery);

andX-rayHTML.css

.xrayhtml {
position: relative !important;
margin: 10px 0;
}
.source {
position: relative;
}
.source-panel {
tab-size: 3;
}
.source-panel pre {
margin: 0;
background: #fefefe;
}
.source-panel code {
white-space: pre-wrap;
}

/* Flip Animation */

.method-flip {
-webkit-perspective: 2500px;
-moz-perspective: 2500px;
perspective: 2500px;
}
.method-flip .snippet {
padding: 0;
margin: 0;
position: relative;
top: 0;
left: 0;
z-index: 2;
}
.method-flip .source-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
overflow: auto;
}
.method-flip .snippet {
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform .4s ease-in-out;
-moz-transform: rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-moz-transition: -moz-transform .4s ease-in-out;
}
.method-flip.view-source .snippet {
z-index: 1;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.method-flip .source-panel {
-webkit-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transform: rotateY(-180deg);
-moz-backface-visibility: hidden;
-moz-transition: all .4s ease-in-out;
}
.method-flip.view-source .source-panel {
z-index: 2;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}

/* Button */

.btn {
background-color: #fefefe;
background-image: -webkit-linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
background-image: -moz-linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
background-image: linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
border: 1px solid #ccc;
border-radius: .4em;
color: #308bd3;
cursor: pointer;
display: block;
font: bold 14px/1 sans-serif;
padding: .6em 0 .5em 0;
position: relative;
text-align: center;
text-transform: capitalize;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-small {
display: block;
font-size: .8em;
padding: 9px 0;
margin: .6em 0;
width: 125px;
}

Pasangkan kedua bumbu tersebut ke dalam template.
Planning HTML<div data-xrayhtml="flip">

------------ Kode Potongan HTML ------------

</div>

NB:
Pada script X-rayHTML.min.js perhatikan baris kode berikut

classes: {
 button: "btn btn-small",
 open: "view-source",
 sourcepanel: "source-panel"
},

Fokus ke btn btn-small Setahu saya unik id tersebut sama dengan kode CSS bootstrap, atau bisa jadi sama dengan kode button kepunyaan sobat? Jadi jika dirasakan sama dengan hal itu, gantikan saja agar tidak bentrok ;)
Kalau mau lebih full stylish sobat bisa datangi web source dimana X-rayHTML dikombinasikan dengan script Prism.js and ZeroClipboard!

Happy X-Ray \m/

Thus articles Generate HTML Snippets to Live Code use X-ray HTML

that is all articles Generate HTML Snippets to Live Code use X-ray HTML This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Generate HTML Snippets to Live Code use X-ray HTML with the link address https://autopostingblogspot.blogspot.com/2015/02/generate-html-snippets-to-live-code-use.html