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 previewdengan gaya (CSS)
FLIPAnimation. 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>and
<script src="X-rayHTML.min.js"></script>X-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.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;
}
Planning HTML
<div data-xrayhtml="flip">
------------ Kode Potongan HTML ------------
</div>NB:
Pada script X-rayHTML.min.js perhatikan baris kode berikutbtn 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!
Pada script X-rayHTML.min.js perhatikan baris kode berikut
classes: {
button: "btn btn-small ",
open: "view-source",
sourcepanel: "source-panel"
}, Kalau mau lebih full stylish sobat bisa datangi web source dimana X-rayHTML dikombinasikan dengan script Prism.js and ZeroClipboard!
Happy X-Ray \m/
* 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);