[Tự làm] Skin Cadetblue Ribbons

  Bài viết hay nhất1
Skin này có một số cái là lượm lặt ~ :v ~ Share luôn chứ ngâm dấm cũng chán :3

Skin Cadetblue Ribbons © FCAMUSEMENT 2014
Thiết kế và lập trình bởi Méo Hắc Hắc - NCat
Không BÁN skin dưới mọi hình thức - Share rồi bán chi :v

Demo Ảnh:







Demo Online: http://fcatest6.forumvi.com

Link Download: https://mega.co.nz/#!Ws0VxJ7R!a3kO8pnoIYzyBH3urL35uCasIVsibdnpmr1fesR93dg
Updated by Boom: Link download mới - http://www.mediafire.com/download/b8qdwmw5bfddanq/Skin_Cadetblue_Ribbons.rar (đóng góp bởi @Panda)
Link dự phòng (Fshare): http://www.fshare.vn/file/TR2RFHUL6S53

Download xong thay vào theo từng mục trong ACP

Tạo mục JS trong ACP >> Module >> Javascript Management
Title * : Day and Night
Placement : In all the pages

Code:
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('timeovl').innerHTML="Bây giờ là "+h+" giờ "+m+" phút "+s+" giây";
t=setTimeout(function(){startTime()},500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}

Sort Catalogue của huynh Vống:
Phần một code: http://devs.forumvi.com/t568-tu-lam-skin-cadetblue-ribbons?showpost=p3392
Phần hai code: http://devs.forumvi.com/t568-tu-lam-skin-cadetblue-ribbons?showpost=p3394

huynh Vống wrote:Kéo xuống dưới khung nhập CSS:
+ Optimize your CSS: Không

CSS: thay toàn bộ css đang có thành:
Spoiler:

Code:
body {font-family: 'Roboto', sans-serif;font-size:14px}
.pun {padding:0}
a {text-decoration:none!important}
#page-body {margin-top: 50px!important;margin: 0 auto;width: 80%;}
.ribx, .ribx2{position:absolute;top:0;height:35px;background:#387274;width:100%;left:0}
.ribx div, .ribx2 div{margin-top:5px;height:15px;left:0;border-bottom:5px dashed #fff}
.ribx2 {top: 165px;height: 40px;}
#pun-title {position: relative;color:cadetblue;font-weight:bold}
.forumname {-webkit-transform: rotate(5deg);-webkit-animation: name 3s ease-in-out infinite;z-index: 1;margin-top: 93px;margin-left: 200px;position: absolute;background: #B7DDDF;padding: 20px 40px;border: 5px solid cadetblue;}
.forumname:before {border-top-right-radius: 10px;content: '';width: 50px!important;height: 50px!important;background: transparent;position: absolute;border-left: 5px solid #B7DDDF;border-bottom: 5px solid #B7DDDF;border-top: 5px solid #EEA871;border-right: 5px solid #EEA871;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);margin-top: -50px;margin-left: 20px;z-index: 0!important;}
@-webkit-keyframes name {
  0%{-webkit-transform: rotate(5deg); margin-left:195px}
  50%{-webkit-transform: rotate(-5deg); margin-left:205px}
  100%{-webkit-transform: rotate(5deg); margin-left:195px}
}
/* Head */
.pun h2, .pun h3, .pun input, .pun select, .pun th {font-family: inherit; font-size: 15px;}
.hierarchy {font-size:15px}
#pun-logo {z-index:1;position: absolute;width: 150px;height: 150px;border-radius: 100%;border: 10px solid cadetblue;background: #fff;padding: 10px;margin-left: calc(50% - 85px);margin-top: -50px;}
#pun-intro {border:0!important;height: 100px;background: cadetblue;margin-top: 35px;}
#pun-logo img {width: 150px;border-radius: 100%;}
.greetme{border-radius:50px;margin-left:250px;background:#fff;position:absolute;padding:15px;margin-top:20px}
#pun-intro span.USERNAME{font-size:15px;font-family: 'Englebert', sans-serif;padding-right:170px;float:left;width:200px;font-weight:bold;overflow:hidden;white-space:nowrap}
#pun-intro span.USERLASTVISIT{font-size:15px;font-family: 'Englebert', sans-serif;float:right;width:150px;font-weight:bold;overflow:hidden;white-space:nowrap}
.greetyou {position: absolute;width: 100%;left: 0;height: 90px;background: rgba(255,255,255, .2);}
.headava {margin-top: -150px;-webkit-transform: rotateY(-90deg);transform:rotateY(90deg);transition: all 0.1s linear;transition-delay:0s;}
#pun-logo:hover > img {-webkit-transform:rotateY(90deg);transform:rotateY(90deg);transition-delay:0s;}
#pun-logo > img {-webkit-transform:rotateY(0deg);transform: rotateY(0deg);transition:all 0.1s linear;transition-delay:0.1s;}
#pun-logo:hover .headava {transition-delay:0.1s;-webkit-transform: rotateY(0deg);transform: rotateY(0deg)}

/* Fixed Ribbons */
.ribleft, .ribright{z-index:2;margin-top:35px;z-index:1;color:transparent;margin-left:10px;position:absolute;background:#aac3c5;width:58px;padding:0 10px 10px;height:100%}
div.ribleft > ul{height:100%;position:relative;border:3px dashed #fff;padding:5px;border-top:0;border-bottom:0}
div.ribleft ul li{background:cadetblue;padding:5px;margin-top:5px}
.searchrib:hover + .searchform, .searchform:hover {display:block}
.searchform{box-shadow:0px 0px 10px #fff;display:none;width:290px;position:absolute;background:cadetblue;padding:10px;border-left:5px solid #fff;margin-left:42px;margin-top: -44px;}
.searchform:before{content:'';position:absolute;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #fff;margin-left:-25px}
.searchform form input[type="text"]{width:250px!important;padding:5px;outline:none!important;border:0}
.searchform form input[type="submit"]{cursor:pointer;outline:none!important;float:right;width:24px;height:24px;background:#fff url(http://png-5.findicons.com/files/icons/2344/faenza/22/edit_find_replace.png) no-repeat center center;border:0;}
.searchform form {background:transparent!important}
.ribright {margin-left: 0;right: 0;margin-right: 10px;}
div.ribright > ul {height: 100%;position: relative;border: 3px dashed #fff;padding: 5px;border-top: 0;border-bottom: 0;}
div.ribright > ul > li {background: cadetblue;padding: 5px;margin-top: 5px;}
.newmess #i_icon_mini_message, .newmess #i_icon_mini_new_message {background: #000;width: 10px;height: 10px;position: absolute;margin-left: -6px;margin-top: -5px;}
.newmess #i_icon_mini_new_message {background:#ff0000}
.warnmess:before {content: '';position: absolute;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #fff;margin-left: 140px;margin-top: -2px;}
.warnmess {display:none;position: absolute;width: 130px;padding: 10px;background: #fff;margin-left: -160px;color: cadetblue;font-size: 14px;margin-top: -40px;border: 1px solid cadetblue;}
#danhsach {z-index:10;display:none;position: absolute;width: 200px;background: #fff;padding: 10px;box-shadow: 0px 0px 10px cadetblue;margin-left: 60px;margin-top: -46px;}
#danhsach ul li a {font-weight: bold;color: #fff;}
#danhsach:before {content: '';position: absolute;border-right: 15px solid #fff;border-top: 15px solid transparent;border-bottom: 15px solid transparent;margin-left: -25px;}
div.ribleft > ul > li {cursor:pointer}
div.ribright > ul > li {cursor:pointer}

/* Chatbox */
.chatboxne {display:none;top: 0;position: fixed;width: 100%;height: 100%;left: 0;background: rgba(0,0,0,.8);z-index: 999;}
.chatboxne iframe {margin-top: calc(50% - 402px);width: 800px;height: 400px;}
.chatboxne .turnofff {position: absolute;right: 0;width: 64px;height: 64px;background: url(http://png.findicons.com/files/icons/2162/minimal_perception/64/gtk_close.png) no-repeat center center;}
.tatnodine {background: rgb(55, 101, 102) url(http://www.wdh.co.uk/Images/Icons/IconsWhiteCross30x30.png) no-repeat center center;width: 32px;height: 32px;float: right;margin-right: -42px;outline: none;cursor: pointer;}

/* Pun Visit */
#pun-visit, .main-box {border:2px dashed #d7d7d7;background:#fff;height:16px}
#pun-visit ul,.main-box ul{position:relative;width:16px;height:16px;background:url(http://i56.servimg.com/u/f56/18/59/49/93/align_10.png) no-repeat center transparent;z-index:0}
#pun-visit ul:hover{margin-top:-.7em;margin-right:-1.1em}
.main-box ul:hover{margin-top:-.65em;margin-left:-1.05em}
#pun-visit li,.main-box li{display:none;width:230px;background:#FFF;border-color:transparent #888 #999;border-style:solid;border-width:0 2px;margin:0}
#pun-visit li:first-child,.main-box li:first-child{border-top:2px solid #999}
#pun-visit li:last-child,.main-box li:last-child{border-bottom:2px solid #999}
.main-box li{margin-left:0;float:left;text-align:left;width:170px}
#pun-visit ul:hover li,.main-box ul:hover li{display:block}
#pun-visit li:hover,.main-box li:hover{background:#F2F2F2}
#plus_menu{left:auto!important;right:60px!important;top:-8px;border:2px solid #999;width:260px!important;background:#FFF}
#plus_menu .title-overview{display:none}
#plus_menu .left-overview{padding:0}
#pun-visit ul a,.main-box ul a{display:block;height:30px;line-height:30px;padding:0 10px}
#pun-visit ul a:hover,.main-box ul a:hover{background:#f2f2f2}
.dashed{border-top:1px dashed silver;margin:5px 0}
#pun-visit br{display:none}

/* Login Form */
#login{box-shadow:0px 0px 10px #fff;display:none;margin-top: -45px;padding:15px;width:350px;margin-left: -385px;position:absolute;background:cadetblue;color:#fff;font-weight:bold;border-right: 5px solid #fff;}
#login:before {margin-top: -5px;margin-left: 370px;content: '';position: absolute;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #fff;}
#login form input[type="text"]{margin-left:10px;width:calc(100% - 32px);padding:3px}
#login form input[type="password"]{margin-left:10px;width:calc(100% - 32px);padding:3px;margin-top:5px}
#login form input.mainoption, input.register{float: left;margin-top: 9px;margin-left: 20px;font-family:sans-serif;padding: 11px;background:#fff;border:0;color:cadetblue;font-weight:bold}
.remember {margin-top: 10px;float: left;font-family: sans-serif;padding: 10px;background: #fff;border: 0;color: cadetblue;font-weight: bold;}
input.register {float:right}

/* Logout Form */
#logoutne {display:none;text-align: center;color: #ff5555;margin-top: -45px;padding: 15px;width: 300px;margin-left: -370px;position: absolute;background: #ff8989 url(http://png.findicons.com/files/icons/1672/mono/32/warning.png) no-repeat 10px center;font-weight: bold;border-right: 5px solid #fff;padding-left: 50px;}
#logoutne:before {margin-top: -5px;margin-left: 170px;content: '';position: absolute;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #fff;}
#logoutne form {padding: 10px;background:#fff}
#logoutne input {margin-top: 9px;margin-left: 20px;font-family: sans-serif;padding: 11px;background: #ff7777;border: 0;color: #fff;font-weight: bold;}
#logoutne input[name="cancel"] {background: #75C9CC;}

/* Box */
.battatboxne {cursor:pointer;background: rgba(0,0,0,.1);width: 16px;height: 16px;float: right;margin-top: -16px;box-shadow: 1px 1px 5px -2px #000 inset;}
.battatboxne:active {box-shadow: -1px -1px 5px -2px #000 inset}
.main .main-foot, .main .main-head {background: cadetblue;border-bottom: 2px solid #fff;}
.menutat {background: #A88E75!important;}
.fmvimove {cursor:move!important;float: left;width: 26px;margin-top: -4px;margin-left: -5px;}
.pun .main table td.tc2 {overflow:hidden;background: #fff;}
.pun table td.tcl {height:72px}
.pun tbody.statused span.status {float:left;position:relative}

/* View */
.pun .entry-content {overflow: hidden;padding-bottom: 1.5em;width: 100%;padding-top: .5em;}
.postfoot {margin-left:0!important}
.pun .post-entry {background:#fff}
.viewuser{height: 125px;width: 100%;background: #29696B;}
.userava{z-index:1;margin-left: 5px;position:absolute;margin-top: 5px;background:#fff;padding:10px;border-radius:100%;width:75px;height:75px;border: 10px solid cadetblue;}
.userava a img{transition-delay:0.2s!important;transition:all 0.2s ease;-webkit-transform: rotateY(0deg);transform: rotateY(0deg);position: relative;width: 95px;height: 95px;border-radius:100%;z-index: 1;margin-top: -10px;margin-left: -10px;}
.userbary{background:cadetblue;position:relative;width:10px;margin-left:50px;margin-top:-32px;height:100%}
.postmain {border-left: 0!important;margin-left: 0px!important;}
.useronoff {position: absolute;margin-left: 267px;width: 28px;height: 28px;background: rgba(255,255,255,.7) url(http://png-1.findicons.com/files/icons/2038/buttons_toolbar/32/knob_red.png) no-repeat center center;background-size: 16px!important;border-radius: 5px;margin-top: 25px;}
.useronoff img {width: 16px;margin-top: 6px;height: 16px;border-radius: 100%;}
.userdrop {opacity: 0;transition: 0.3s ease;z-index: 2;visibility: hidden;position: absolute;background: cadetblue;border: 10px solid cadetblue;margin-left: 130px;height: 165px;width: 300px;}
.userinfo {height: 145px;padding: 10px;background: cadetblue;}
.nameuser {width: 120px;float: left;margin-top: 25px;margin-left: 100px;background: rgba(255,255,255,.7);padding: 5px 15px 5px 30px;border-radius: 0px 5px 5px 0px;}
.rankuser {background: rgba(255,255,255,.7);position: absolute;width: 220px;height: 40px;border-radius: 0px 5px 5px 0px;margin-top: 56px;margin-left: 95px;z-index: 0;}
.rankuser img {max-width: 155px;height: 30px;margin-left: 30px;padding: 5px;}
.userava:hover ~ .userdrop, .userdrop:hover {visibility: visible;opacity: 1;}
.userinfodrop {color: #555;font-weight: bold;background: #fff;padding: 5px;height: 70px;margin-top: 10px;overflow: hidden;overflow-y: scroll!important;}
.userrank {font-weight: bold!important;color: #fff;}
.usercontact {background: rgba(255,255,255,.5);margin-top: 5px;padding: 5px;}
.userdrop:before {content: '';position: absolute;border-top: 15px solid transparent;border-bottom: 15px solid transparent;border-right: 15px solid rgb(53, 114, 116);margin-left: -25px;margin-top: 35px;}
.change_avatar, .none_avatar {background: rgba(0,0,0,.8);height: 95px;width: 95px;margin-top: -95px;border-radius: 100%;margin-left: -10px;overflow: hidden;position: relative;z-index: 1;-webkit-transform: rotateY(90deg);transform: rotateY(90deg);transition: all 0.2s ease;transition-delay:0s}
.userava:hover img {transition-delay:0s!important;transition:all 0.2s ease;-webkit-transform: rotateY(-90deg);transform: rotateY(-90deg);}
.userava:hover .change_avatar, .userava:hover .none_avatar {-webkit-transform: rotateY(0deg);transform: rotateY(0deg);transition-delay:0.2s}
.change_avatar a {text-align: center;position: absolute;width: 60px;margin-top: 20px;margin-left: 17px;font-weight: bold;color: #999!important;}
.partner .label {display:none}

/* zzvote by Zzbaivong - devs.forumvi.com */
div.vote-zzvote{float:left}
div.vote-zzvote > a.vote-plus{background:url(http://png.findicons.com/files/icons/2683/somicro/32/like.png) no-repeat 0/100% transparent;display:inline-block;float:left;width:24px;height:24px;transition:background .3s;-webkit-transition:background .3s;-moz-transition:background .3s;background-size:24px!important;margin-top:-1px}
div.vote-zzvote > a.vote-plus[href=""]{background-image:url(http://png-2.findicons.com/files/icons/2711/free_icons_for_windows8_metro/48/like.png);background-size:24px!important}
div.vote-zzvote > a.vote-plus[href="javascript:;"]{cursor:not-allowed;opacity:0.5}
div.vote-zzvote > a.vote-plus[href="javascript:;"] + span.vote-time{opacity:0.5}
div.vote-zzvote > span.vote-time{background:#FFF;display:inline-block;position:relative;line-height:20px;margin-left:10px;border:1px solid #333;border-radius:3px;font-size:12px;padding:0 6px}
div.vote-zzvote > span.vote-time:before{content:" ";display:block;position:absolute;left:-4px;top:50%;margin-top:-4px;width:6px;height:6px;background:#FFF;transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);border-color:#333;border-style:solid;border-width:0 0 1px 1px}
div.vote-zzvote > a.vote-plus[href=""] + span.vote-time{background:cadetblue;color:#FFF;border-color:#448688}
div.vote-zzvote > a.vote-plus[href=""] + span.vote-time:before{background:cadetblue;border-color:#448688}

/* Copyright */
.copyrightnefca {bottom: 0;background: cadetblue;border-top: 35px solid #387274;padding: 15px;position: relative;z-index: 2;color: #fff;font-weight: bold;height: 130px!important;overflow: hidden;}
.copyrightnefca .cprimg {float: right;width: 200px;margin-top: -40px;background: rgba(255,255,255,.5);border-radius: 5px;}
#pun-foot {height:195px;transition:all 0.2s ease;z-index: 1;position: relative;background: rgba(255,255,255,.8);width: 100%;margin-bottom: -195px;}
#pun-foot:hover {z-index:3}
#pun-foot:before {position: absolute;content: 'Thông tin';margin-top: -38px;right: 180px;background: #ff8989;font-weight: bold;color: #fff;padding: 10px 20px;}
#pun-info > div > div {background: rgba(255,255,255,.6);} #pun-info > div {background:transparent}
#pun-info {background:#fff url(http://1.bp.blogspot.com/-qhCW70xAXgo/Udw9VuWuHtI/AAAAAAAAAMs/C71MZpG2SnM/s1600/neko_anime_girl_png_by_thewhitedevil66-d41a8kt.png) no-repeat right top;background-size:auto 100%}

/* GOEditor */
#GO-quickrep .repnotice{background-color: #fff;background-position:10px center;background-repeat:no-repeat;display:block;font-size:15px;font-weight:700;height:40px;line-height:35px;margin:20px auto;padding:5px;text-align:center;width:50%;}
#GO-quickrep .previewdata{background:#fcfcfc;border:1.5px solid #D5D5D5;margin:20px auto;width:97%}
#GO-quickrep .buttonrep #sendrep:focus,#GO-quickrep .buttonrep #preview:focus,#GO-quickrep #backpreview:focus,#GO-quickrep .buttonrep #re-advance:focus{outline:none}
#GO-quickrep #repsmile{background:#F7F7F7;border:1px solid #D5D5D5;display:none;margin-left:15%;margin-top:35px;min-height:100px;padding:3px;position:absolute;width:600px}
#GO-quickrep #repcolour td{float:left;height:13px;margin:0 2px 2px 0;outline:0 none;width:13px}
#GO-quickrep #repcolour table:last-child{background-color:transparent!important}
#GO-quickrep #repcolour{background:#F7F7F7;border:1px solid #D5D5D5;display:none;margin-left:20%;margin-top:35px;max-width:400px;min-height:100px;padding:3px;position:absolute}
#GO-quickrep .go-bbcodeimg,#GO-quickrep .senddata{background:#fff;border:1px solid #D5D5D5;color:#000;display:none;height:100px;margin-top:20px;padding:3px;position:absolute;width:230px}
#GO-quickrep #bbcodeimg,#GOdata{border-radius:none;display:block;margin-left:auto;margin-right:auto;margin-top:10px;min-height:20px!important;outline:none;padding:5px;width:70%!important}
#GO-quickrep #gorep{border-radius: 10px;border: 5px solid #228085;background: #fff;display:block;min-height: 130px!important;padding: 10px;outline:none;margin-left: 125px!important;left: 0;width: calc(100% - 165px);}
#GO-quickrep .buttonimg,#GO-quickrep .buttonwall{background-color:#2797f2!important;border:none;color:#fff!important;cursor:pointer;display:block;font-size:12px;font-weight:700;height:25px;margin:10px auto;min-width:50px;padding:0 10px}
#GO-quickrep .buttonrep #sendrep,#GO-quickrep #backpreview{margin-left:1.5%}
#GO-quickrep .buttonrep #re-advance{-moz-transition:all .2s ease;-ms-transition:all .2s ease;-webkit-transition:all .2s ease;background-color:#000!important;color:#FFF!important;float:right!important;margin-right:1.5%;o-transition:all .2s ease;transition:all .2s ease}
#GO-quickrep #backpreview{margin-top:-20px}
#GO-quickrep .buttonrep #sendrep,#GO-quickrep .buttonrep #preview,#GO-quickrep .buttonrep #re-advance,#GO-quickrep #backpreview{background-color:#2797f2;border:none;color:#fff;cursor:pointer;display:inline-block;font-size:15px;font-weight:700;height:40px;min-width:80px;padding:0 10px}
#GO-quickrep .buttonrep #sendrep:hover,#GO-quickrep .buttonrep #preview:hover,#GO-quickrep #backpreview:hover,.buttonimg:hover{background-color:#7fc5ff;color:#fff}
#GO-quickrep .bbcode{border:none;color:#fff;cursor:pointer;display:block;font-size:12px;font-weight:700;height:30px;margin:auto;width:97%}
#GO-quickrep .bbcode span{border:1px solid #CCC;cursor:pointer;display:block;float:left;margin-right:3px;padding:4px 10px;background: #fff;color: cadetblue;}
#GO-quickrep .bbcode span:hover{color: #fff;background: #BFD9DA;border-color: cadetblue;}
#GO-quickrep .buttonrep #re-advance:hover{background-color:#2797f2!important;color:#FFF!important}
#GOeditor{background: cadetblue;margin:auto;min-height:50px;padding:5px;}
#GO-quickrep #backpreview,#GO-quickrep .repnotice,#GO-quickrep #repcolour form tr:first-child,#repcolour td:first-child,#repcolour td:nth-child(2),#repcolour td:nth-child(3){display:none}
.golreply {position: absolute;margin-left: 180px;margin-top: -40px;padding: 10px;background: rgba(255,255,255,.5);}
.GO-post .avarep img {border-radius: 10px;margin-top: 20px;margin-left: 5px;float: left;width: 75px;height: 75px;background: #fff;padding: 10px;border: 5px solid #228085;}
.GO-post .avarep:after {position: absolute;content: '';border: 10px solid transparent;border-left-color: #228085;margin-top: 40px;}

/* Resize Images */
.pun .entry-content img {max-width: 100%;}

/* More BBCode */
.themedown{float: left;width: 280px!important;background: #A88E75 url(http://png-4.findicons.com/files/icons/2252/iphone_toolbar_icons/30/icon_download.png) no-repeat 10px center;padding:10px;border-bottom:5px solid #5F4934;font-weight:bold;color:#5f4934;font-size:20px;border-radius:5px 5px 0 0;/* float: left; */}
.linkdown{background:#fff;padding:10px;border:2px solid #5f4934;border-top:0;border-radius:0 0 2px 2px;float:left;width: 276px;margin-top:-2px;font-weight:bold;overflow:hidden;white-space:nowrap;color:#5f4934;box-shadow:0 -2px 5px -2px #5f4934 inset}
.downme {margin: 0 auto!important;text-align: center;border: 0!important;width: 300px}
td.warntext {float: left;background: #fff;color: #f55;font-weight: bold;padding: 8px 10px;width: 370px;margin-top: 6px;height: 35px;border: 5px solid #f55;overflow: scroll;overflow-x: hidden!important;}
.warnbbc {margin:0 auto;border:0!important}
.warnimgne {background: #f55 url(http://png.findicons.com/files/icons/2252/iphone_toolbar_icons/30/icon_warning.png) no-repeat center;width: 61px;height: 61px!important;float: left;margin-top: 6px;}

/* About */
#inforib {transition:all 0.5s ease;-webkit-transform: rotateX(-90deg);transform: rotateX(270deg);visibility:hidden;position: fixed;width: 500px;height: 300px;top: calc(50% - 170px);left: calc(50% - 270px);background: #fff;box-shadow: 0px 5px 10px -5px #3faadd, 0px 10px 10px -10px #3faadd, 0px -5px 10px -5px #3faadd, 0px -10px 10px -10px #3faadd;z-index: 990;padding: 10px;}
.eltleft, .eltright {transition-delay: 0.5s!important;transition:all 0.5s ease;width:0px;z-index:889;position: fixed;height: 6px;background: #FFFFFF;right: 0;box-shadow: 0px 0px 10px #3faadd;top: calc(50% - 14px);}
.eltleft {left:0} .elttrans {width:50%;transition-delay: 0s!important;} .inforib2 {transition-delay: 0.5s!important;-webkit-transform: rotateX(0deg)!important;transform: rotateX(0deg)!important;visibility: visible!important;}
.opacityabout {z-index:888;transition:all 0.5s ease;opacity:0;visibility:hidden;transition-delay:1s;top:0;left:0;background:rgba(0,0,0,.8);width:100%;height:100%;position:fixed}
.opacitymore {transition-delay:0s;opacity:1;visibility:visible}
.opacityabout .inforib {width: 48px;height: 48px;right: 10px;top: 10px;position: absolute;background: url(http://www.arnaudsylvain.fr/wp-content/plugins/itro-popup/images/close-icon-white.png);background-size: 48px}

/* Deco */
#inforib > div.thongtinabout {background: rgba(95, 158, 160, .6);padding: 10px;width: 80%;margin: 0 auto;overflow: scroll;overflow-x: hidden!important;height: 100px;color: #fff;font-weight: bold;}
#inforib > div.lienketforum > table {width: 84%;margin-top: 10px!important;margin: 0 auto;padding: 5px;border: 2px dashed #d7d7d7;}
#inforib > div.lienketforum > table img {width: 75px;height: 75px;}
#inforib > div.lienketforum > table > tbody > tr > td:nth-child(1) {background: cadetblue;color: #fff;font-weight: bold;text-align: center;width: 75px;}
div.formnhanhlk {display:none;position: fixed;z-index: 999;top: calc(50% - 75px);left: calc(50% - 161px);padding: 10px;background: cadetblue;box-shadow: 0px 0px 20px #000;}
.formnhanhlk #submit {cursor:pointer;outline:none!important;float: left;margin-top: 20px;padding: 5px 10px;background: rgb(53, 120, 122);border: 0;color: #fff;font-weight: bold;margin-left: calc(50% - 30px);}
.formnhanhlk #submit:active {box-shadow: 0px 0px 10px -3px #000 inset!important;}
.formnhanhlk #submit:hover {box-shadow: 0px 0px 10px -4px #000 inset;}
.formnhanhlk form {padding: 10px;}
#text_editor_input span, #text_editor_input input {margin-top: 5px;}
#main-content > div.formnhanhlk > form > .main-content {background: #fff;border: 0;}
.hideqc {background-size: cover!important;width: 100%;height: 105px;position: relative;background: url(http://i.imgur.com/eBRFovp.png);margin-bottom: -100px;float: left;}
#pun-visit {margin-top: 10px;}
.weather {z-index:999;width: 75px;height: 75px;position: absolute;right: 50px;top: 50px;background: rgb(229, 229, 57);box-shadow: 0 0 100px #FFA300,0 0 100px #FFEB00,0 0 100px yellow,0 0 100px yellow;border-radius: 100%;}
.moon {background: #fff;box-shadow: 0 0 100px #fff,0 0 100px #fff,0 0 100px #fff,0 0 100px #fff;}
.scrweather {width: 25px;position: fixed;height: 25px;box-shadow: 0 0 50px #fff,0 0 50px #fff,0 0 50px #fff,0 0 50px #fff;bottom: 10px;top: inherit;z-index: 999;right: 200px;}
.overlayweather {height: 50px;width: 100%;position: fixed;bottom: -50px;background: rgba(0,0,0,.8);left: 0;z-index: 998;color: #fff;line-height: 50px;font-weight: bold;transition: all 0.5s ease;}
#timeovl {float: right;right: 0;margin-right: 275px;color: rgba(255,255,255,0.5);}
div.overlayweather > span.info {position: absolute;right: 0;margin-right: 75px;font-size: inherit;font-style: inherit;color: rgba(255,255,255,.5);}
  Bài viết hay nhất2
Tạo thêm mục JS nữa
Title * : Sort Catalogue
Placement : In the homepage

Phần một:
Spoiler:
Code:
function sortcookie() {
   my_setcookie("sortfmvi", $("#sortfmvi").sortable("toArray"))
}
function restore() {
   var list = $("#sortfmvi");
   var cookie = my_getcookie("sortfmvi");
   if (cookie != null) {
      var IDs = cookie.split(",")
   } else {
      return false
   }
   var items = list.sortable("toArray");
   var rebuild = new Array();
   for (var v = 0, len = items.length; v < len; v++) {
      rebuild[items[v]] = items[v]
   }
   for (var i = 0, n = IDs.length; i < n; i++) {
      var itemID = IDs[i];
      if (itemID in rebuild) {
         var item = rebuild[itemID];
         var child = $(".main.ui-sortable").children("#" + item);
         var savedOrd = $(".main.ui-sortable").children("#" + itemID);
         child.remove();
         $(".main.ui-sortable").filter(":first").append(savedOrd)
      }
   }
}
path = location.pathname.slice(1, 3);

function collapse(a) {
   $(a).children().toggle();
   var id = $(a).parents(".boxfmvi").attr("id");
   $(a).parents(".main-head").next().slideToggle();
   if ($(a).find(".collap12").css("display") == "none") {
      my_setcookie(path + id, "close")
   } else {
      document.cookie = path + id + "=; expires=Monday, December 1, 2010 0:0:0 AM;"
   }
}
$(function () {
   $("#sortfmvi .boxfmvi").each(function () {
      $(this).attr("id", "soft" + $(".boxfmvi").index(this));
      $(this).find(".page-title h2").prepend('<span class="collapse" onclick="collapse(this)" style="float:right"><a href="javascript:void(0);" class="collap12"></a><a href="javascript:void(0);" style="display:none" class="collap11"></a></span>');
      if (my_getcookie(path + $(this).attr("id")) == "close") {
         $(this).find(".main-content").hide();
         $(this).find(".page-title .collapse a").toggle()
      }
   });
   $("#sortfmvi").sortable({
      cursor: "move",
      handle: ".fmvimove",
      items: ".boxfmvi",
      opacity: 0.80,
      tolerance: "pointer",
      revert: true,
      update: function () {
         sortcookie()
      }
   });
   restore()
});
(function (e, t) {
   function i(t, n) {
      var r, i, o, u = t.nodeName.toLowerCase();
      return "area" === u ? (r = t.parentNode, i = r.name, !t.href || !i || r.nodeName.toLowerCase() !== "map" ? !1 : (o = e("img[usemap=#" + i + "]")[0], !! o && s(o))) : (/input|select|textarea|button|object/.test(u) ? !t.disabled : "a" === u ? t.href || n : n) && s(t)
   }
   function s(t) {
      return e.expr.filters.visible(t) && !e(t).parents().andSelf().filter(function () {
         return e.css(this, "visibility") === "hidden"
      }).length
   }
   var n = 0,
      r = /^ui-id-\d+$/;
   e.ui = e.ui || {};
   if (e.ui.version) return;
   e.extend(e.ui, {
      version: "1.9.2",
      keyCode: {
         BACKSPACE: 8,
         COMMA: 188,
         DELETE: 46,
         DOWN: 40,
         END: 35,
         ENTER: 13,
         ESCAPE: 27,
         HOME: 36,
         LEFT: 37,
         NUMPAD_ADD: 107,
         NUMPAD_DECIMAL: 110,
         NUMPAD_DIVIDE: 111,
         NUMPAD_ENTER: 108,
         NUMPAD_MULTIPLY: 106,
         NUMPAD_SUBTRACT: 109,
         PAGE_DOWN: 34,
         PAGE_UP: 33,
         PERIOD: 190,
         RIGHT: 39,
         SPACE: 32,
         TAB: 9,
         UP: 38
      }
   }), e.fn.extend({
      _focus: e.fn.focus,
      focus: function (t, n) {
         return typeof t == "number" ? this.each(function () {
            var r = this;
            setTimeout(function () {
               e(r).focus(), n && n.call(r)
            }, t)
         }) : this._focus.apply(this, arguments)
      },
      scrollParent: function () {
         var t;
         return e.ui.ie && /(static|relative)/.test(this.css("position")) || /absolute/.test(this.css("position")) ? t = this.parents().filter(function () {
            return /(relative|absolute|fixed)/.test(e.css(this, "position")) && /(auto|scroll)/.test(e.css(this, "overflow") + e.css(this, "overflow-y") + e.css(this, "overflow-x"))
         }).eq(0) : t = this.parents().filter(function () {
            return /(auto|scroll)/.test(e.css(this, "overflow") + e.css(this, "overflow-y") + e.css(this, "overflow-x"))
         }).eq(0), /fixed/.test(this.css("position")) || !t.length ? e(document) : t
      },
      zIndex: function (n) {
         if (n !== t) return this.css("zIndex", n);
         if (this.length) {
            var r = e(this[0]),
               i, s;
            while (r.length && r[0] !== document) {
               i = r.css("position");
               if (i === "absolute" || i === "relative" || i === "fixed") {
                  s = parseInt(r.css("zIndex"), 10);
                  if (!isNaN(s) && s !== 0) return s
               }
               r = r.parent()
            }
         }
         return 0
      },
      uniqueId: function () {
         return this.each(function () {
            this.id || (this.id = "ui-id-" + ++n)
         })
      },
      removeUniqueId: function () {
         return this.each(function () {
            r.test(this.id) && e(this).removeAttr("id")
         })
      }
   }), e.extend(e.expr[":"], {
      data: e.expr.createPseudo ? e.expr.createPseudo(function (t) {
         return function (n) {
            return !!e.data(n, t)
         }
      }) : function (t, n, r) {
         return !!e.data(t, r[3])
      },
      focusable: function (t) {
         return i(t, !isNaN(e.attr(t, "tabindex")))
      },
      tabbable: function (t) {
         var n = e.attr(t, "tabindex"),
            r = isNaN(n);
         return (r || n >= 0) && i(t, !r)
      }
   }), e(function () {
      var t = document.body,
         n = t.appendChild(n = document.createElement("div"));
      n.offsetHeight, e.extend(n.style, {
         minHeight: "100px",
         height: "auto",
         padding: 0,
         borderWidth: 0
      }), e.support.minHeight = n.offsetHeight === 100, e.support.selectstart = "onselectstart" in n, t.removeChild(n).style.display = "none"
   }), e("<a>").outerWidth(1).jquery || e.each(["Width", "Height"], function (n, r) {
      function u(t, n, r, s) {
         return e.each(i, function () {
            n -= parseFloat(e.css(t, "padding" + this)) || 0, r && (n -= parseFloat(e.css(t, "border" + this + "Width")) || 0), s && (n -= parseFloat(e.css(t, "margin" + this)) || 0)
         }), n
      }
      var i = r === "Width" ? ["Left", "Right"] : ["Top", "Bottom"],
         s = r.toLowerCase(),
         o = {
            innerWidth: e.fn.innerWidth,
            innerHeight: e.fn.innerHeight,
            outerWidth: e.fn.outerWidth,
            outerHeight: e.fn.outerHeight
         };
      e.fn["inner" + r] = function (n) {
         return n === t ? o["inner" + r].call(this) : this.each(function () {
            e(this).css(s, u(this, n) + "px")
         })
      }, e.fn["outer" + r] = function (t, n) {
         return typeof t != "number" ? o["outer" + r].call(this, t) : this.each(function () {
            e(this).css(s, u(this, t, !0, n) + "px")
         })
      }
   }), e("<a>").data("a-b", "a").removeData("a-b").data("a-b") && (e.fn.removeData = function (t) {
      return function (n) {
         return arguments.length ? t.call(this, e.camelCase(n)) : t.call(this)
      }
   }(e.fn.removeData)),
   function () {
      var t = /msie ([\w.]+)/.exec(navigator.userAgent.toLowerCase()) || [];
      e.ui.ie = t.length ? !0 : !1, e.ui.ie6 = parseFloat(t[1], 10) === 6
   }(), e.fn.extend({
      disableSelection: function () {
         return this.bind((e.support.selectstart ? "selectstart" : "mousedown") + ".ui-disableSelection", function (e) {
            e.preventDefault()
         })
      },
      enableSelection: function () {
         return this.unbind(".ui-disableSelection")
      }
   }), e.extend(e.ui, {
      plugin: {
         add: function (t, n, r) {
            var i, s = e.ui[t].prototype;
            for (i in r) s.plugins[i] = s.plugins[i] || [], s.plugins[i].push([n, r[i]])
         },
         call: function (e, t, n) {
            var r, i = e.plugins[t];
            if (!i || !e.element[0].parentNode || e.element[0].parentNode.nodeType === 11) return;
            for (r = 0; r < i.length; r++) e.options[i[r][0]] && i[r][1].apply(e.element, n)
         }
      },
      contains: e.contains,
      hasScroll: function (t, n) {
         if (e(t).css("overflow") === "hidden") return !1;
         var r = n && n === "left" ? "scrollLeft" : "scrollTop",
            i = !1;
         return t[r] > 0 ? !0 : (t[r] = 1, i = t[r] > 0, t[r] = 0, i)
      },
      isOverAxis: function (e, t, n) {
         return e > t && e < t + n
      },
      isOver: function (t, n, r, i, s, o) {
         return e.ui.isOverAxis(t, r, s) && e.ui.isOverAxis(n, i, o)
      }
   })
})(jQuery);
(function (e, t) {
   var n = 0,
      r = Array.prototype.slice,
      i = e.cleanData;
   e.cleanData = function (t) {
      for (var n = 0, r;
      (r = t[n]) != null; n++) try {
         e(r).triggerHandler("remove")
      } catch (s) {}
      i(t)
   }, e.widget = function (t, n, r) {
      var i, s, o, u, a = t.split(".")[0];
      t = t.split(".")[1], i = a + "-" + t, r || (r = n, n = e.Widget), e.expr[":"][i.toLowerCase()] = function (t) {
         return !!e.data(t, i)
      }, e[a] = e[a] || {}, s = e[a][t], o = e[a][t] = function (e, t) {
         if (!this._createWidget) return new o(e, t);
         arguments.length && this._createWidget(e, t)
      }, e.extend(o, s, {
         version: r.version,
         _proto: e.extend({}, r),
         _childConstructors: []
      }), u = new n, u.options = e.widget.extend({}, u.options), e.each(r, function (t, i) {
         e.isFunction(i) && (r[t] = function () {
            var e = function () {
               return n.prototype[t].apply(this, arguments)
            }, r = function (e) {
               return n.prototype[t].apply(this, e)
            };
            return function () {
               var t = this._super,
                  n = this._superApply,
                  s;
               return this._super = e, this._superApply = r, s = i.apply(this, arguments), this._super = t, this._superApply = n, s
            }
         }())
      }), o.prototype = e.widget.extend(u, {
         widgetEventPrefix: s ? u.widgetEventPrefix : t
      }, r, {
         constructor: o,
         namespace: a,
         widgetName: t,
         widgetBaseClass: i,
         widgetFullName: i
      }), s ? (e.each(s._childConstructors, function (t, n) {
         var r = n.prototype;
         e.widget(r.namespace + "." + r.widgetName, o, n._proto)
      }), delete s._childConstructors) : n._childConstructors.push(o), e.widget.bridge(t, o)
   }, e.widget.extend = function (n) {
      var i = r.call(arguments, 1),
         s = 0,
         o = i.length,
         u, a;
      for (; s < o; s++) for (u in i[s]) a = i[s][u], i[s].hasOwnProperty(u) && a !== t && (e.isPlainObject(a) ? n[u] = e.isPlainObject(n[u]) ? e.widget.extend({}, n[u], a) : e.widget.extend({}, a) : n[u] = a);
      return n
   }, e.widget.bridge = function (n, i) {
      var s = i.prototype.widgetFullName || n;
      e.fn[n] = function (o) {
         var u = typeof o == "string",
            a = r.call(arguments, 1),
            f = this;
         return o = !u && a.length ? e.widget.extend.apply(null, [o].concat(a)) : o, u ? this.each(function () {
            var r, i = e.data(this, s);
            if (!i) return e.error("cannot call methods on " + n + " prior to initialization; " + "attempted to call method '" + o + "'");
            if (!e.isFunction(i[o]) || o.charAt(0) === "_") return e.error("no such method '" + o + "' for " + n + " widget instance");
            r = i[o].apply(i, a);
            if (r !== i && r !== t) return f = r && r.jquery ? f.pushStack(r.get()) : r, !1
         }) : this.each(function () {
            var t = e.data(this, s);
            t ? t.option(o || {})._init() : e.data(this, s, new i(o, this))
         }), f
      }
   }, e.Widget = function () {}, e.Widget._childConstructors = [], e.Widget.prototype = {
      widgetName: "widget",
      widgetEventPrefix: "",
      defaultElement: "<div>",
      options: {
         disabled: !1,
         create: null
      },
      _createWidget: function (t, r) {
         r = e(r || this.defaultElement || this)[0], this.element = e(r), this.uuid = n++, this.eventNamespace = "." + this.widgetName + this.uuid, this.options = e.widget.extend({}, this.options, this._getCreateOptions(), t), this.bindings = e(), this.hoverable = e(), this.focusable = e(), r !== this && (e.data(r, this.widgetName, this), e.data(r, this.widgetFullName, this), this._on(!0, this.element, {
            remove: function (e) {
               e.target === r && this.destroy()
            }
         }), this.document = e(r.style ? r.ownerDocument : r.document || r), this.window = e(this.document[0].defaultView || this.document[0].parentWindow)), this._create(), this._trigger("create", null, this._getCreateEventData()), this._init()
      },
      _getCreateOptions: e.noop,
      _getCreateEventData: e.noop,
      _create: e.noop,
      _init: e.noop,
      destroy: function () {
         this._destroy(), this.element.unbind(this.eventNamespace).removeData(this.widgetName).removeData(this.widgetFullName).removeData(e.camelCase(this.widgetFullName)), this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName + "-disabled " + "ui-state-disabled"), this.bindings.unbind(this.eventNamespace), this.hoverable.removeClass("ui-state-hover"), this.focusable.removeClass("ui-state-focus")
      },
      _destroy: e.noop,
      widget: function () {
         return this.element
      },
      option: function (n, r) {
         var i = n,
            s, o, u;
         if (arguments.length === 0) return e.widget.extend({}, this.options);
         if (typeof n == "string") {
            i = {}, s = n.split("."), n = s.shift();
            if (s.length) {
               o = i[n] = e.widget.extend({}, this.options[n]);
               for (u = 0; u < s.length - 1; u++) o[s[u]] = o[s[u]] || {}, o = o[s[u]];
               n = s.pop();
               if (r === t) return o[n] === t ? null : o[n];
               o[n] = r
            } else {
               if (r === t) return this.options[n] === t ? null : this.options[n];
               i[n] = r
            }
         }
         return this._setOptions(i), this
      },
      _setOptions: function (e) {
         var t;
         for (t in e) this._setOption(t, e[t]);
         return this
      },
      _setOption: function (e, t) {
         return this.options[e] = t, e === "disabled" && (this.widget().toggleClass(this.widgetFullName + "-disabled ui-state-disabled", !! t).attr("aria-disabled", t), this.hoverable.removeClass("ui-state-hover"), this.focusable.removeClass("ui-state-focus")), this
      },
      enable: function () {
         return this._setOption("disabled", !1)
      },
      disable: function () {
         return this._setOption("disabled", !0)
      },
      _on: function (t, n, r) {
         var i, s = this;
         typeof t != "boolean" && (r = n, n = t, t = !1), r ? (n = i = e(n), this.bindings = this.bindings.add(n)) : (r = n, n = this.element, i = this.widget()), e.each(r, function (r, o) {
            function u() {
               if (!t && (s.options.disabled === !0 || e(this).hasClass("ui-state-disabled"))) return;
               return (typeof o == "string" ? s[o] : o).apply(s, arguments)
            }
            typeof o != "string" && (u.guid = o.guid = o.guid || u.guid || e.guid++);
            var a = r.match(/^(\w+)\s*(.*)$/),
               f = a[1] + s.eventNamespace,
               l = a[2];
            l ? i.delegate(l, f, u) : n.bind(f, u)
         })
      },
      _off: function (e, t) {
         t = (t || "").split(" ").join(this.eventNamespace + " ") + this.eventNamespace, e.unbind(t).undelegate(t)
      },
      _delay: function (e, t) {
         function n() {
            return (typeof e == "string" ? r[e] : e).apply(r, arguments)
         }
         var r = this;
         return setTimeout(n, t || 0)
      },
      _hoverable: function (t) {
         this.hoverable = this.hoverable.add(t), this._on(t, {
            mouseenter: function (t) {
               e(t.currentTarget).addClass("ui-state-hover")
            },
            mouseleave: function (t) {
               e(t.currentTarget).removeClass("ui-state-hover")
            }
         })
      },
      _focusable: function (t) {
         this.focusable = this.focusable.add(t), this._on(t, {
            focusin: function (t) {
               e(t.currentTarget).addClass("ui-state-focus")
            },
            focusout: function (t) {
               e(t.currentTarget).removeClass("ui-state-focus")
            }
         })
      },
      _trigger: function (t, n, r) {
         var i, s, o = this.options[t];
         r = r || {}, n = e.Event(n), n.type = (t === this.widgetEventPrefix ? t : this.widgetEventPrefix + t).toLowerCase(), n.target = this.element[0], s = n.originalEvent;
         if (s) for (i in s) i in n || (n[i] = s[i]);
         return this.element.trigger(n, r), !(e.isFunction(o) && o.apply(this.element[0], [n].concat(r)) === !1 || n.isDefaultPrevented())
      }
   }, e.each({
      show: "fadeIn",
      hide: "fadeOut"
   }, function (t, n) {
      e.Widget.prototype["_" + t] = function (r, i, s) {
         typeof i == "string" && (i = {
            effect: i
         });
         var o, u = i ? i === !0 || typeof i == "number" ? n : i.effect || n : t;
         i = i || {}, typeof i == "number" && (i = {
            duration: i
         }), o = !e.isEmptyObject(i), i.complete = s, i.delay && r.delay(i.delay), o && e.effects && (e.effects.effect[u] || e.uiBackCompat !== !1 && e.effects[u]) ? r[t](i) : u !== t && r[u] ? r[u](i.duration, i.easing, s) : r.queue(function (n) {
            e(this)[t](), s && s.call(r[0]), n()
         })
      }
   }), e.uiBackCompat !== !1 && (e.Widget.prototype._getCreateOptions = function () {
      return e.metadata && e.metadata.get(this.element[0])[this.widgetName]
   })
})(jQuery);
(function (e, t) {
   var n = !1;
   e(document).mouseup(function (e) {
      n = !1
   }), e.widget("ui.mouse", {
      version: "1.9.2",
      options: {
         cancel: "input,textarea,button,select,option",
         distance: 1,
         delay: 0
      },
      _mouseInit: function () {
         var t = this;
         this.element.bind("mousedown." + this.widgetName, function (e) {
            return t._mouseDown(e)
         }).bind("click." + this.widgetName, function (n) {
            if (!0 === e.data(n.target, t.widgetName + ".preventClickEvent")) return e.removeData(n.target, t.widgetName + ".preventClickEvent"), n.stopImmediatePropagation(), !1
         }), this.started = !1
      },
      _mouseDestroy: function () {
         this.element.unbind("." + this.widgetName), this._mouseMoveDelegate && e(document).unbind("mousemove." + this.widgetName, this._mouseMoveDelegate).unbind("mouseup." + this.widgetName, this._mouseUpDelegate)
      },
      _mouseDown: function (t) {
         if (n) return;
         this._mouseStarted && this._mouseUp(t), this._mouseDownEvent = t;
         var r = this,
            i = t.which === 1,
            s = typeof this.options.cancel == "string" && t.target.nodeName ? e(t.target).closest(this.options.cancel).length : !1;
         if (!i || s || !this._mouseCapture(t)) return !0;
         this.mouseDelayMet = !this.options.delay, this.mouseDelayMet || (this._mouseDelayTimer = setTimeout(function () {
            r.mouseDelayMet = !0
         }, this.options.delay));
         if (this._mouseDistanceMet(t) && this._mouseDelayMet(t)) {
            this._mouseStarted = this._mouseStart(t) !== !1;
            if (!this._mouseStarted) return t.preventDefault(), !0
         }
         return !0 === e.data(t.target, this.widgetName + ".preventClickEvent") && e.removeData(t.target, this.widgetName + ".preventClickEvent"), this._mouseMoveDelegate = function (e) {
            return r._mouseMove(e)
         }, this._mouseUpDelegate = function (e) {
            return r._mouseUp(e)
         }, e(document).bind("mousemove." + this.widgetName, this._mouseMoveDelegate).bind("mouseup." + this.widgetName, this._mouseUpDelegate), t.preventDefault(), n = !0, !0
      },
      _mouseMove: function (t) {
         return !e.ui.ie || document.documentMode >= 9 || !! t.button ? this._mouseStarted ? (this._mouseDrag(t), t.preventDefault()) : (this._mouseDistanceMet(t) && this._mouseDelayMet(t) && (this._mouseStarted = this._mouseStart(this._mouseDownEvent, t) !== !1, this._mouseStarted ? this._mouseDrag(t) : this._mouseUp(t)), !this._mouseStarted) : this._mouseUp(t)
      },
      _mouseUp: function (t) {
         return e(document).unbind("mousemove." + this.widgetName, this._mouseMoveDelegate).unbind("mouseup." + this.widgetName, this._mouseUpDelegate), this._mouseStarted && (this._mouseStarted = !1, t.target === this._mouseDownEvent.target && e.data(t.target, this.widgetName + ".preventClickEvent", !0), this._mouseStop(t)), !1
      },
      _mouseDistanceMet: function (e) {
         return Math.max(Math.abs(this._mouseDownEvent.pageX - e.pageX), Math.abs(this._mouseDownEvent.pageY - e.pageY)) >= this.options.distance
      },
      _mouseDelayMet: function (e) {
         return this.mouseDelayMet
      },
      _mouseStart: function (e) {},
      _mouseDrag: function (e) {},
      _mouseStop: function (e) {},
      _mouseCapture: function (e) {
         return !0
      }
   })
})(jQuery);
  Bài viết hay nhất3
Tiếp theo phần một:
Spoiler:
Code:
(function (e, t) {
   e.widget("ui.sortable", e.ui.mouse, {
      version: "1.9.2",
      widgetEventPrefix: "sort",
      ready: !1,
      options: {
         appendTo: "parent",
         axis: !1,
         connectWith: !1,
         containment: !1,
         cursor: "auto",
         cursorAt: !1,
         dropOnEmpty: !0,
         forcePlaceholderSize: !1,
         forceHelperSize: !1,
         grid: !1,
         handle: !1,
         helper: "original",
         items: "> *",
         opacity: !1,
         placeholder: !1,
         revert: !1,
         scroll: !0,
         scrollSensitivity: 20,
         scrollSpeed: 20,
         scope: "default",
         tolerance: "intersect",
         zIndex: 1e3
      },
      _create: function () {
         var e = this.options;
         this.containerCache = {}, this.element.addClass("ui-sortable"), this.refresh(), this.floating = this.items.length ? e.axis === "x" || /left|right/.test(this.items[0].item.css("float")) || /inline|table-cell/.test(this.items[0].item.css("display")) : !1, this.offset = this.element.offset(), this._mouseInit(), this.ready = !0
      },
      _destroy: function () {
         this.element.removeClass("ui-sortable ui-sortable-disabled"), this._mouseDestroy();
         for (var e = this.items.length - 1; e >= 0; e--) this.items[e].item.removeData(this.widgetName + "-item");
         return this
      },
      _setOption: function (t, n) {
         t === "disabled" ? (this.options[t] = n, this.widget().toggleClass("ui-sortable-disabled", !! n)) : e.Widget.prototype._setOption.apply(this, arguments)
      },
      _mouseCapture: function (t, n) {
         var r = this;
         if (this.reverting) return !1;
         if (this.options.disabled || this.options.type == "static") return !1;
         this._refreshItems(t);
         var i = null,
            s = e(t.target).parents().each(function () {
               if (e.data(this, r.widgetName + "-item") == r) return i = e(this), !1
            });
         e.data(t.target, r.widgetName + "-item") == r && (i = e(t.target));
         if (!i) return !1;
         if (this.options.handle && !n) {
            var o = !1;
            e(this.options.handle, i).find("*").andSelf().each(function () {
               this == t.target && (o = !0)
            });
            if (!o) return !1
         }
         return this.currentItem = i, this._removeCurrentsFromItems(), !0
      },
      _mouseStart: function (t, n, r) {
         var i = this.options;
         this.currentContainer = this, this.refreshPositions(), this.helper = this._createHelper(t), this._cacheHelperProportions(), this._cacheMargins(), this.scrollParent = this.helper.scrollParent(), this.offset = this.currentItem.offset(), this.offset = {
            top: this.offset.top - this.margins.top,
            left: this.offset.left - this.margins.left
         }, e.extend(this.offset, {
            click: {
               left: t.pageX - this.offset.left,
               top: t.pageY - this.offset.top
            },
            parent: this._getParentOffset(),
            relative: this._getRelativeOffset()
         }), this.helper.css("position", "absolute"), this.cssPosition = this.helper.css("position"), this.originalPosition = this._generatePosition(t), this.originalPageX = t.pageX, this.originalPageY = t.pageY, i.cursorAt && this._adjustOffsetFromHelper(i.cursorAt), this.domPosition = {
            prev: this.currentItem.prev()[0],
            parent: this.currentItem.parent()[0]
         }, this.helper[0] != this.currentItem[0] && this.currentItem.hide(), this._createPlaceholder(), i.containment && this._setContainment(), i.cursor && (e("body").css("cursor") && (this._storedCursor = e("body").css("cursor")), e("body").css("cursor", i.cursor)), i.opacity && (this.helper.css("opacity") && (this._storedOpacity = this.helper.css("opacity")), this.helper.css("opacity", i.opacity)), i.zIndex && (this.helper.css("zIndex") && (this._storedZIndex = this.helper.css("zIndex")), this.helper.css("zIndex", i.zIndex)), this.scrollParent[0] != document && this.scrollParent[0].tagName != "HTML" && (this.overflowOffset = this.scrollParent.offset()), this._trigger("start", t, this._uiHash()), this._preserveHelperProportions || this._cacheHelperProportions();
         if (!r) for (var s = this.containers.length - 1; s >= 0; s--) this.containers[s]._trigger("activate", t, this._uiHash(this));
         return e.ui.ddmanager && (e.ui.ddmanager.current = this), e.ui.ddmanager && !i.dropBehaviour && e.ui.ddmanager.prepareOffsets(this, t), this.dragging = !0, this.helper.addClass("ui-sortable-helper"), this._mouseDrag(t), !0
      },
      _mouseDrag: function (t) {
         this.position = this._generatePosition(t), this.positionAbs = this._convertPositionTo("absolute"), this.lastPositionAbs || (this.lastPositionAbs = this.positionAbs);
         if (this.options.scroll) {
            var n = this.options,
               r = !1;
            this.scrollParent[0] != document && this.scrollParent[0].tagName != "HTML" ? (this.overflowOffset.top + this.scrollParent[0].offsetHeight - t.pageY < n.scrollSensitivity ? this.scrollParent[0].scrollTop = r = this.scrollParent[0].scrollTop + n.scrollSpeed : t.pageY - this.overflowOffset.top < n.scrollSensitivity && (this.scrollParent[0].scrollTop = r = this.scrollParent[0].scrollTop - n.scrollSpeed), this.overflowOffset.left + this.scrollParent[0].offsetWidth - t.pageX < n.scrollSensitivity ? this.scrollParent[0].scrollLeft = r = this.scrollParent[0].scrollLeft + n.scrollSpeed : t.pageX - this.overflowOffset.left < n.scrollSensitivity && (this.scrollParent[0].scrollLeft = r = this.scrollParent[0].scrollLeft - n.scrollSpeed)) : (t.pageY - e(document).scrollTop() < n.scrollSensitivity ? r = e(document).scrollTop(e(document).scrollTop() - n.scrollSpeed) : e(window).height() - (t.pageY - e(document).scrollTop()) < n.scrollSensitivity && (r = e(document).scrollTop(e(document).scrollTop() + n.scrollSpeed)), t.pageX - e(document).scrollLeft() < n.scrollSensitivity ? r = e(document).scrollLeft(e(document).scrollLeft() - n.scrollSpeed) : e(window).width() - (t.pageX - e(document).scrollLeft()) < n.scrollSensitivity && (r = e(document).scrollLeft(e(document).scrollLeft() + n.scrollSpeed))), r !== !1 && e.ui.ddmanager && !n.dropBehaviour && e.ui.ddmanager.prepareOffsets(this, t)
         }
         this.positionAbs = this._convertPositionTo("absolute");
         if (!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left + "px";
         if (!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top + "px";
         for (var i = this.items.length - 1; i >= 0; i--) {
            var s = this.items[i],
               o = s.item[0],
               u = this._intersectsWithPointer(s);
            if (!u) continue;
            if (s.instance !== this.currentContainer) continue;
            if (o != this.currentItem[0] && this.placeholder[u == 1 ? "next" : "prev"]()[0] != o && !e.contains(this.placeholder[0], o) && (this.options.type == "semi-dynamic" ? !e.contains(this.element[0], o) : !0)) {
               this.direction = u == 1 ? "down" : "up";
               if (this.options.tolerance != "pointer" && !this._intersectsWithSides(s)) break;
               this._rearrange(t, s), this._trigger("change", t, this._uiHash());
               break
            }
         }
         return this._contactContainers(t), e.ui.ddmanager && e.ui.ddmanager.drag(this, t), this._trigger("sort", t, this._uiHash()), this.lastPositionAbs = this.positionAbs, !1
      },
      _mouseStop: function (t, n) {
         if (!t) return;
         e.ui.ddmanager && !this.options.dropBehaviour && e.ui.ddmanager.drop(this, t);
         if (this.options.revert) {
            var r = this,
               i = this.placeholder.offset();
            this.reverting = !0, e(this.helper).animate({
               left: i.left - this.offset.parent.left - this.margins.left + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollLeft),
               top: i.top - this.offset.parent.top - this.margins.top + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollTop)
            }, parseInt(this.options.revert, 10) || 500, function () {
               r._clear(t)
            })
         } else this._clear(t, n);
         return !1
      },
      cancel: function () {
         if (this.dragging) {
            this._mouseUp({
               target: null
            }), this.options.helper == "original" ? this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper") : this.currentItem.show();
            for (var t = this.containers.length - 1; t >= 0; t--) this.containers[t]._trigger("deactivate", null, this._uiHash(this)), this.containers[t].containerCache.over && (this.containers[t]._trigger("out", null, this._uiHash(this)), this.containers[t].containerCache.over = 0)
         }
         return this.placeholder && (this.placeholder[0].parentNode && this.placeholder[0].parentNode.removeChild(this.placeholder[0]), this.options.helper != "original" && this.helper && this.helper[0].parentNode && this.helper.remove(), e.extend(this, {
            helper: null,
            dragging: !1,
            reverting: !1,
            _noFinalSort: null
         }), this.domPosition.prev ? e(this.domPosition.prev).after(this.currentItem) : e(this.domPosition.parent).prepend(this.currentItem)), this
      },
      serialize: function (t) {
         var n = this._getItemsAsjQuery(t && t.connected),
            r = [];
         return t = t || {}, e(n).each(function () {
            var n = (e(t.item || this).attr(t.attribute || "id") || "").match(t.expression || /(.+)[-=_](.+)/);
            n && r.push((t.key || n[1] + "[]") + "=" + (t.key && t.expression ? n[1] : n[2]))
         }), !r.length && t.key && r.push(t.key + "="), r.join("&")
      },
      toArray: function (t) {
         var n = this._getItemsAsjQuery(t && t.connected),
            r = [];
         return t = t || {}, n.each(function () {
            r.push(e(t.item || this).attr(t.attribute || "id") || "")
         }), r
      },
      _intersectsWith: function (e) {
         var t = this.positionAbs.left,
            n = t + this.helperProportions.width,
            r = this.positionAbs.top,
            i = r + this.helperProportions.height,
            s = e.left,
            o = s + e.width,
            u = e.top,
            a = u + e.height,
            f = this.offset.click.top,
            l = this.offset.click.left,
            c = r + f > u && r + f < a && t + l > s && t + l < o;
         return this.options.tolerance == "pointer" || this.options.forcePointerForContainers || this.options.tolerance != "pointer" && this.helperProportions[this.floating ? "width" : "height"] > e[this.floating ? "width" : "height"] ? c : s < t + this.helperProportions.width / 2 && n - this.helperProportions.width / 2 < o && u < r + this.helperProportions.height / 2 && i - this.helperProportions.height / 2 < a
      },
      _intersectsWithPointer: function (t) {
         var n = this.options.axis === "x" || e.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, t.top, t.height),
            r = this.options.axis === "y" || e.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, t.left, t.width),
            i = n && r,
            s = this._getDragVerticalDirection(),
            o = this._getDragHorizontalDirection();
         return i ? this.floating ? o && o == "right" || s == "down" ? 2 : 1 : s && (s == "down" ? 2 : 1) : !1
      },
      _intersectsWithSides: function (t) {
         var n = e.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, t.top + t.height / 2, t.height),
            r = e.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, t.left + t.width / 2, t.width),
            i = this._getDragVerticalDirection(),
            s = this._getDragHorizontalDirection();
         return this.floating && s ? s == "right" && r || s == "left" && !r : i && (i == "down" && n || i == "up" && !n)
      },
      _getDragVerticalDirection: function () {
         var e = this.positionAbs.top - this.lastPositionAbs.top;
         return e != 0 && (e > 0 ? "down" : "up")
      },
      _getDragHorizontalDirection: function () {
         var e = this.positionAbs.left - this.lastPositionAbs.left;
         return e != 0 && (e > 0 ? "right" : "left")
      },
      refresh: function (e) {
         return this._refreshItems(e), this.refreshPositions(), this
      },
      _connectWith: function () {
         var e = this.options;
         return e.connectWith.constructor == String ? [e.connectWith] : e.connectWith
      },
      _getItemsAsjQuery: function (t) {
         var n = [],
            r = [],
            i = this._connectWith();
         if (i && t) for (var s = i.length - 1; s >= 0; s--) {
            var o = e(i[s]);
            for (var u = o.length - 1; u >= 0; u--) {
               var a = e.data(o[u], this.widgetName);
               a && a != this && !a.options.disabled && r.push([e.isFunction(a.options.items) ? a.options.items.call(a.element) : e(a.options.items, a.element).not(".ui-sortable-helper").not(".ui-sortable-placeholder"), a])
            }
         }
         r.push([e.isFunction(this.options.items) ? this.options.items.call(this.element, null, {
            options: this.options,
            item: this.currentItem
         }) : e(this.options.items, this.element).not(".ui-sortable-helper").not(".ui-sortable-placeholder"), this]);
         for (var s = r.length - 1; s >= 0; s--) r[s][0].each(function () {
            n.push(this)
         });
         return e(n)
      },
      _removeCurrentsFromItems: function () {
         var t = this.currentItem.find(":data(" + this.widgetName + "-item)");
         this.items = e.grep(this.items, function (e) {
            for (var n = 0; n < t.length; n++) if (t[n] == e.item[0]) return !1;
            return !0
         })
      },
      _refreshItems: function (t) {
         this.items = [], this.containers = [this];
         var n = this.items,
            r = [
               [e.isFunction(this.options.items) ? this.options.items.call(this.element[0], t, {
                  item: this.currentItem
               }) : e(this.options.items, this.element), this]
            ],
            i = this._connectWith();
         if (i && this.ready) for (var s = i.length - 1; s >= 0; s--) {
            var o = e(i[s]);
            for (var u = o.length - 1; u >= 0; u--) {
               var a = e.data(o[u], this.widgetName);
               a && a != this && !a.options.disabled && (r.push([e.isFunction(a.options.items) ? a.options.items.call(a.element[0], t, {
                  item: this.currentItem
               }) : e(a.options.items, a.element), a]), this.containers.push(a))
            }
         }
         for (var s = r.length - 1; s >= 0; s--) {
            var f = r[s][1],
               l = r[s][0];
            for (var u = 0, c = l.length; u < c; u++) {
               var h = e(l[u]);
               h.data(this.widgetName + "-item", f), n.push({
                  item: h,
                  instance: f,
                  width: 0,
                  height: 0,
                  left: 0,
                  top: 0
               })
            }
         }
      },
      refreshPositions: function (t) {
         this.offsetParent && this.helper && (this.offset.parent = this._getParentOffset());
         for (var n = this.items.length - 1; n >= 0; n--) {
            var r = this.items[n];
            if (r.instance != this.currentContainer && this.currentContainer && r.item[0] != this.currentItem[0]) continue;
            var i = this.options.toleranceElement ? e(this.options.toleranceElement, r.item) : r.item;
            t || (r.width = i.outerWidth(), r.height = i.outerHeight());
            var s = i.offset();
            r.left = s.left, r.top = s.top
         }
         if (this.options.custom && this.options.custom.refreshContainers) this.options.custom.refreshContainers.call(this);
         else for (var n = this.containers.length - 1; n >= 0; n--) {
            var s = this.containers[n].element.offset();
            this.containers[n].containerCache.left = s.left, this.containers[n].containerCache.top = s.top, this.containers[n].containerCache.width = this.containers[n].element.outerWidth(), this.containers[n].containerCache.height = this.containers[n].element.outerHeight()
         }
         return this
      },
      _createPlaceholder: function (t) {
         t = t || this;
         var n = t.options;
         if (!n.placeholder || n.placeholder.constructor == String) {
            var r = n.placeholder;
            n.placeholder = {
               element: function () {
                  var n = e(document.createElement(t.currentItem[0].nodeName)).addClass(r || t.currentItem[0].className + " ui-sortable-placeholder").removeClass("ui-sortable-helper")[0];
                  return r || (n.style.visibility = "hidden"), n
               },
               update: function (e, i) {
                  if (r && !n.forcePlaceholderSize) return;
                  i.height() || i.height(t.currentItem.innerHeight() - parseInt(t.currentItem.css("paddingTop") || 0, 10) - parseInt(t.currentItem.css("paddingBottom") || 0, 10)), i.width() || i.width(t.currentItem.innerWidth() - parseInt(t.currentItem.css("paddingLeft") || 0, 10) - parseInt(t.currentItem.css("paddingRight") || 0, 10))
               }
            }
         }
         t.placeholder = e(n.placeholder.element.call(t.element, t.currentItem)), t.currentItem.after(t.placeholder), n.placeholder.update(t, t.placeholder)
      },
      _contactContainers: function (t) {
         var [spoiler]n = null,
            r = null;
         for (var i = this.containers.length - 1; i >= 0; i--) {
            if (e.contains(this.currentItem[0], this.containers[i].element[0])) continue;
            if (this._intersectsWith(this.containers[i].containerCache)) {
               if (n && e.contains(this.containers[i].element[0], n.element[0])) continue;
               n = this.containers[i], r = i
            } else this.containers[i].containerCache.over && (this.containers[i]._trigger("out", t, this._uiHash(this)), this.containers[i].containerCache.over = 0)
         }
         if (!n) return;
         if (this.containers.length === 1) this.containers[r]._trigger("over", t, this._uiHash(this)), this.containers[r].containerCache.over = 1;
         else {
            var s = 1e4,
               o = null,
               u = this.containers[r].floating ? "left" : "top",
               a = this.containers[r].floating ? "width" : "height",
               f = this.positionAbs[u] + this.offset.click[u];
            for (var l = this.items.length - 1; l >= 0; l--) {
               if (!e.contains(this.containers[r].element[0], this.items[l].item[0])) continue;
               if (this.items[l].item[0] == this.currentItem[0]) continue;
               var c = this.items[l].item.offset()[u],
                  h = !1;
               Math.abs(c - f) > Math.abs(c + this.items[l][a] - f) && (h = !0, c += this.items[l][a]), Math.abs(c - f) < s && (s = Math.abs(c - f), o = this.items[l], this.direction = h ? "up" : "down")
            }
            if (!o && !this.options.dropOnEmpty) return;
            this.currentContainer = this.containers[r], o ? this._rearrange(t, o, null, !0) : this._rearrange(t, null, this.containers[r].element, !0), this._trigger("change", t, this._uiHash()), this.containers[r]._trigger("change", t, this._uiHash(this)), this.options.placeholder.update(this.currentContainer, this.placeholder), this.containers[r]._trigger("over", t, this._uiHash(this)), this.containers[r].containerCache.over = 1
         }
      },
      _createHelper: function (t) {
         var n = this.options,
            r = e.isFunction(n.helper) ? e(n.helper.apply(this.element[0], [t, this.currentItem])) : n.helper == "clone" ? this.currentItem.clone() : this.currentItem;
         return r.parents("body").length || e(n.appendTo != "parent" ? n.appendTo : this.currentItem[0].parentNode)[0].appendChild(r[0]), r[0] == this.currentItem[0] && (this._storedCSS = {
            width: this.currentItem[0].style.width,
            height: this.currentItem[0].style.height,
            position: this.currentItem.css("position"),
            top: this.currentItem.css("top"),
            left: this.currentItem.css("left")
         }), (r[0].style.width == "" || n.forceHelperSize) && r.width(this.currentItem.width()), (r[0].style.height == "" || n.forceHelperSize) && r.height(this.currentItem.height()), r
      },
      _adjustOffsetFromHelper: function (t) {
         typeof t == "string" && (t = t.split(" ")), e.isArray(t) && (t = {
            left: +t[0],
            top: +t[1] || 0
         }), "left" in t && (this.offset.click.left = t.left + this.margins.left), "right" in t && (this.offset.click.left = this.helperProportions.width - t.right + this.margins.left), "top" in t && (this.offset.click.top = t.top + this.margins.top), "bottom" in t && (this.offset.click.top = this.helperProportions.height - t.bottom + this.margins.top)
      },
      _getParentOffset: function () {
         this.offsetParent = this.helper.offsetParent();
         var t = this.offsetParent.offset();
         this.cssPosition == "absolute" && this.scrollParent[0] != document && e.contains(this.scrollParent[0], this.offsetParent[0]) && (t.left += this.scrollParent.scrollLeft(), t.top += this.scrollParent.scrollTop());
         if (this.offsetParent[0] == document.body || this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() == "html" && e.ui.ie) t = {
            top: 0,
            left: 0
         };
         return {
            top: t.top + (parseInt(this.offsetParent.css("borderTopWidth"), 10) || 0),
            left: t.left + (parseInt(this.offsetParent.css("borderLeftWidth"), 10) || 0)
         }
      },
      _getRelativeOffset: function () {
         if (this.cssPosition == "relative") {
            var e = this.currentItem.position();
            return {
               top: e.top - (parseInt(this.helper.css("top"), 10) || 0) + this.scrollParent.scrollTop(),
               left: e.left - (parseInt(this.helper.css("left"), 10) || 0) + this.scrollParent.scrollLeft()
            }
         }
         return {
            top: 0,
            left: 0
         }
      },
      _cacheMargins: function () {
         this.margins = {
            left: parseInt(this.currentItem.css("marginLeft"), 10) || 0,
            top: parseInt(this.currentItem.css("marginTop"), 10) || 0
         }
      },
      _cacheHelperProportions: function () {
         this.helperProportions = {
            width: this.helper.outerWidth(),
            height: this.helper.outerHeight()
         }
      },
      _setContainment: function () {
         var t = this.options;
         t.containment == "parent" && (t.containment = this.helper[0].parentNode);
         if (t.containment == "document" || t.containment == "window") this.containment = [0 - this.offset.relative.left - this.offset.parent.left, 0 - this.offset.relative.top - this.offset.parent.top, e(t.containment == "document" ? document : window).width() - this.helperProportions.width - this.margins.left, (e(t.containment == "document" ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top];
         if (!/^(document|window|parent)$/.test(t.containment)) {
            var n = e(t.containment)[0],
               r = e(t.containment).offset(),
               i = e(n).css("overflow") != "hidden";
            this.containment = [r.left + (parseInt(e(n).css("borderLeftWidth"), 10) || 0) + (parseInt(e(n).css("paddingLeft"), 10) || 0) - this.margins.left, r.top + (parseInt(e(n).css("borderTopWidth"), 10) || 0) + (parseInt(e(n).css("paddingTop"), 10) || 0) - this.margins.top, r.left + (i ? Math.max(n.scrollWidth, n.offsetWidth) : n.offsetWidth) - (parseInt(e(n).css("borderLeftWidth"), 10) || 0) - (parseInt(e(n).css("paddingRight"), 10) || 0) - this.helperProportions.width - this.margins.left, r.top + (i ? Math.max(n.scrollHeight, n.offsetHeight) : n.offsetHeight) - (parseInt(e(n).css("borderTopWidth"), 10) || 0) - (parseInt(e(n).css("paddingBottom"), 10) || 0) - this.helperProportions.height - this.margins.top]
         }
      },
      _convertPositionTo: function (t, n) {
         n || (n = this.position);
         var r = t == "absolute" ? 1 : -1,
            i = this.options,
            s = this.cssPosition != "absolute" || this.scrollParent[0] != document && !! e.contains(this.scrollParent[0], this.offsetParent[0]) ? this.scrollParent : this.offsetParent,
            o = /(html|body)/i.test(s[0].tagName);
         return {
            top: n.top + this.offset.relative.top * r + this.offset.parent.top * r - (this.cssPosition == "fixed" ? -this.scrollParent.scrollTop() : o ? 0 : s.scrollTop()) * r,
            left: n.left + this.offset.relative.left * r + this.offset.parent.left * r - (this.cssPosition == "fixed" ? -this.scrollParent.scrollLeft() : o ? 0 : s.scrollLeft()) * r
         }
      },
      _generatePosition: function (t) {
         var n = this.options,
            r = this.cssPosition != "absolute" || this.scrollParent[0] != document && !! e.contains(this.scrollParent[0], this.offsetParent[0]) ? this.scrollParent : this.offsetParent,
            i = /(html|body)/i.test(r[0].tagName);
         this.cssPosition == "relative" && (this.scrollParent[0] == document || this.scrollParent[0] == this.offsetParent[0]) && (this.offset.relative = this._getRelativeOffset());
         var s = t.pageX,
            o = t.pageY;
         if (this.originalPosition) {
            this.containment && (t.pageX - this.offset.click.left < this.containment[0] && (s = this.containment[0] + this.offset.click.left), t.pageY - this.offset.click.top < this.containment[1] && (o = this.containment[1] + this.offset.click.top), t.pageX - this.offset.click.left > this.containment[2] && (s = this.containment[2] + this.offset.click.left), t.pageY - this.offset.click.top > this.containment[3] && (o = this.containment[3] + this.offset.click.top));
            if (n.grid) {
               var u = this.originalPageY + Math.round((o - this.originalPageY) / n.grid[1]) * n.grid[1];
               o = this.containment ? u - this.offset.click.top < this.containment[1] || u - this.offset.click.top > this.containment[3] ? u - this.offset.click.top < this.containment[1] ? u + n.grid[1] : u - n.grid[1] : u : u;
               var a = this.originalPageX + Math.round((s - this.originalPageX) / n.grid[0]) * n.grid[0];
               s = this.containment ? a - this.offset.click.left < this.containment[0] || a - this.offset.click.left > this.containment[2] ? a - this.offset.click.left < this.containment[0] ? a + n.grid[0] : a - n.grid[0] : a : a
            }
         }
         return {
            top: o - this.offset.click.top - this.offset.relative.top - this.offset.parent.top + (this.cssPosition == "fixed" ? -this.scrollParent.scrollTop() : i ? 0 : r.scrollTop()),
            left: s - this.offset.click.left - this.offset.relative.left - this.offset.parent.left + (this.cssPosition == "fixed" ? -this.scrollParent.scrollLeft() : i ? 0 : r.scrollLeft())
         }
      },
      _rearrange: function (e, t, n, r) {
         n ? n[0].appendChild(this.placeholder[0]) : t.item[0].parentNode.insertBefore(this.placeholder[0], this.direction == "down" ? t.item[0] : t.item[0].nextSibling), this.counter = this.counter ? ++this.counter : 1;
         var i = this.counter;
         this._delay(function () {
            i == this.counter && this.refreshPositions(!r)
         })
      },
      _clear: function (t, n) {
         this.reverting = !1;
         var r = [];
         !this._noFinalSort && this.currentItem.parent().length && this.placeholder.before(this.currentItem), this._noFinalSort = null;
         if (this.helper[0] == this.currentItem[0]) {
            for (var i in this._storedCSS) if (this._storedCSS[i] == "auto" || this._storedCSS[i] == "static") this._storedCSS[i] = "";
            this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper")
         } else this.currentItem.show();
         this.fromOutside && !n && r.push(function (e) {
            this._trigger("receive", e, this._uiHash(this.fromOutside))
         }), (this.fromOutside || this.domPosition.prev != this.currentItem.prev().not(".ui-sortable-helper")[0] || this.domPosition.parent != this.currentItem.parent()[0]) && !n && r.push(function (e) {
            this._trigger("update", e, this._uiHash())
         }), this !== this.currentContainer && (n || (r.push(function (e) {
            this._trigger("remove", e, this._uiHash())
         }), r.push(function (e) {
            return function (t) {
               e._trigger("receive", t, this._uiHash(this))
            }
         }.call(this, this.currentContainer)), r.push(function (e) {
            return function (t) {
               e._trigger("update", t, this._uiHash(this))
            }
         }.call(this, this.currentContainer))));
         for (var i = this.containers.length - 1; i >= 0; i--) n || r.push(function (e) {
            return function (t) {
               e._trigger("deactivate", t, this._uiHash(this))
            }
         }.call(this, this.containers[i])), this.containers[i].containerCache.over && (r.push(function (e) {
            return function (t) {
               e._trigger("out", t, this._uiHash(this))
            }
         }.call(this, this.containers[i])), this.containers[i].containerCache.over = 0);
         this._storedCursor && e("body").css("cursor", this._storedCursor), this._storedOpacity && this.helper.css("opacity", this._storedOpacity), this._storedZIndex && this.helper.css("zIndex", this._storedZIndex == "auto" ? "" : this._storedZIndex), this.dragging = !1;
         if (this.cancelHelperRemoval) {
            if (!n) {
               this._trigger("beforeStop", t, this._uiHash());
               for (var i = 0; i < r.length; i++) r[i].call(this, t);
               this._trigger("stop", t, this._uiHash())
            }
            return this.fromOutside = !1, !1
         }
         n || this._trigger("beforeStop", t, this._uiHash()), this.placeholder[0].parentNode.removeChild(this.placeholder[0]), this.helper[0] != this.currentItem[0] && this.helper.remove(), this.helper = null;
         if (!n) {
            for (var i = 0; i < r.length; i++) r[i].call(this, t);
            this._trigger("stop", t, this._uiHash())
         }
         return this.fromOutside = !1, !0
      },
      _trigger: function () {
         e.Widget.prototype._trigger.apply(this, arguments) === !1 && this.cancel()
      },
      _uiHash: function (t) {
         var n = t || this;
         return {
            helper: n.helper,
            placeholder: n.placeholder || e([]),
            position: n.position,
            originalPosition: n.originalPosition,
            offset: n.positionAbs,
            item: n.currentItem,
            sender: t ? t.element : null
         }
      }
   })
})(jQuery);
$('.battatboxne').click(function(){
  $(this).toggleClass('batbox');
  $(this).parent().next().toggle();
  if($(this).parent().next().css('display')=='none'){$(this).parent().addClass('menutat')}
  else($(this).parent().removeClass('menutat'))
  });
  Bài viết hay nhất4
Hehe, có tên ad kìa 8|
  Bài viết hay nhất5
ah cho mình hỏi code Sort Catalogue 2 phần đó mình gộp chung hay là chia vào ra 2 cái zậy M
  Bài viết hay nhất6
@tommy_phan wrote:ah cho mình hỏi code Sort Catalogue 2 phần đó mình gộp chung hay là chia vào ra 2 cái zậy M
tất nhiên là gộp chung @@
  Bài viết hay nhất7
À cái sort đó là khi rê chuột vào hình mũi tên 4 hướng ở thanh head box ấy, giữ chuột rồi kéo rê lên xuống để thay đổi thứ tự box :v
  Bài viết hay nhất8
@NCat wrote:À cái sort đó là khi rê chuột vào hình mũi tên 4 hướng ở thanh head box ấy, giữ chuột rồi kéo rê lên xuống để thay đổi thứ tự box :v
Nếu mục đích là sắp xếp lại trật tự box (nói cách khác là ưu tiên các box mình thích lên đầu) thì dùng cái này có vẻ hay hơn : http://goo.gl/tMu6y1
  Bài viết hay nhất9
Méo giúp với mình add skin xong rồi nhưng bị lỗi soi ra thì thấy lỗi css cái calc(50% - 275px) này @@~ đã add thử vào 2 forum luôn nhưng lỗi hết

demo: http://plus.forumvi.com/
  Bài viết hay nhất10
@dang0123 wrote:Méo giúp với mình add skin xong rồi nhưng bị lỗi soi ra thì thấy lỗi css cái calc(50% - 275px) này @@~ đã add thử vào 2 forum luôn nhưng lỗi hết

demo: http://plus.forumvi.com/

Tìm tất cả các đoạn calc trong CSS
Nó sẽ có như thế này:
Code:
calc(*%-&px)
Với * là số % còn & là số px
Chỉnh thành dạng này (thêm dấu cách)
Code:
calc(*% - &px)
  Bài viết hay nhất11
có dấu cách trong css rồi mới hỏi :D
  Bài viết hay nhất12
@dang0123 wrote:có dấu cách trong css rồi mới hỏi :D
Méo mở link demo ra và thấy vẫn chưa có dấu cách
  Bài viết hay nhất13
vậy em mới hỏi đó, mặc dù trong css đã có dấu cách nhưng khi chạy thì nó lại hok có dấu cách :( thôi đành chế tác lại vậy
  Bài viết hay nhất14
Tắt chức năng nén CSS đi.
Kéo xuống dưới khung nhập CSS:
+ Optimize your CSS: Không
  Bài viết hay nhất15
Cảm ơn anh hen! làm được rồi! mà chế luôn được cái box rồi :D giờ khỏi đụng hàng

http://plus.forumvi.com/

mọi người nhận xét hộ O.o em hok biết phối màu sao cho hợp nữa
  Bài viết hay nhất16
Màu chủ đạo (thực ra nguyên forum toàn là màu này) là cadetblue, có thể dùng màu đó chỉnh một số độ đỏ độ xanh là hợp
Cái box ở chỗ thông tin hơi bị vô duyên
Rê chuột vào khung bài viết mới nó margin nhìn cứ sao sao :v

p/s:
Skin Cadetblue Ribbons © PLUS 2014
-_-
  Bài viết hay nhất17
@dang0123 sao lại dùng logo fmvi >_<
  Bài viết hay nhất18
lần đầu tự design nên chả biết làm sao cho đẹp :D

mình cũng thấy nó rối tung mù lên :v chắc phải nghĩ lại

P/s: cho cá nhân hóa 1 tý chứ :(
  Bài viết hay nhất19
@anhoang_qn wrote:@dang0123 sao lại dùng logo fmvi >_<

:D backup image từ skin fmvi ver2 mà
  Bài viết hay nhất20
khi nào Méo mới share lun cái recent topic + TĐYT + GTAN nhỉ :D
  Bài viết hay nhất21
Recent Topic thì dùng của huynh Vống vẫn tốt hơn, của méo dùng css không đủ chức năng như của huynh vống được
TĐYT + QTAN méo lấy code bên hotrofm.com, chỉ chỉnh style thôi
  Bài viết hay nhất22
Méo share em cái TĐYT + QTAN đc k ạ :)
  Bài viết hay nhất23
Đã nói là tìm trên hotrofm, có đủ trên đó -_-
  Bài viết hay nhất24
em đã làm nhưng khi bỏ vào wigets thì bỏ vào column 1 hay 3 ạ
The author of this message was banned from the forum - See the message
  Bài viết hay nhất26
You cannot reply to topics in this forum