The Elite: Chia sẻ buttom nghe nhạc ngộ nghĩnh XF

DEMO

Demo online: http://nvh.coolpage.biz/4r/index.php

script lượm lặt, chưa rãnh để xem và bỏ bớt =))

để nguyên con hàng cho các bạn tùy biến thêm

Làm thôi:
vào AdminCP > Appearance > Templates > Tạo 1 template mới tên nvh_music
Nội dung template:

<script type="text/javascript">
 
function jump_buttonmusic(){
  var navDuration = 150,
      showmusicbt =  $("span.show_music_button");
chats =
[
"Nhạc ở đâu mà hay vầy nè ^^!",
"Nghe nhạc cùng pé nè",
"Hey you, chọt tui 1 cái đê",
"Lên là lên là lên là lên",
"Kìa con bướm vàng là la",
"Thím có muốn bé hát hông ?",
"Chào bạn mình là mem mới ^^!",
"Oh yeah, click me baby",
"Noel tới rồi mà ku Hiệu vẫn còn alone kà =))",
]
var chat = chats[Math.floor(Math.random()*chats.length)];
 
showmusicbt.animate({ marginTop : "-0.45em"}, navDuration).animate({ marginTop :"0.45em"}, navDuration)
.animate({ marginTop : "-0.25em"}, navDuration).animate({ marginTop :"0.25em"}, navDuration)
.animate({ marginTop : "-0.55em"}, navDuration).animate({ marginTop :"0.55em"}, navDuration,function(){
showmusicbt.find('p').text(chat).slideDown('slow');
});
 
setTimeout(function(){
showmusicbt.find('p').slideUp('slow');
},12000);
 
}
 
$(document).ready(function(){
 
jump_buttonmusic();
setInterval(function() {
jump_buttonmusic();
},30000);
 
$("span.show_music_button").click(function(){
$("#show_music").fadeIn("fast");
});
 
$("a.closediv").click(function(){
$("#show_music").fadeOut("fast");
});
 
});
 
</script>
 
<style>
 
#show_msg_music {
    width: 280px;
    height: 210px;
    padding: 5px 5px 45px 5px;
}
 
#show_music {
    display: none;
    width: 280px;
    height: 310px;
    margin: 10px auto 50px auto;
    position: fixed;
    right: 5px;
    top: 50%;
    margin-top: -50px;
    z-index: 9999;
}
 
#show_music p {
    display: block;
    position: absolute;
    padding: 10px;
    width: 380px;
    text-align: center;
    font-weight: bold;
    font-family: Tahoma;
    font-size: 14px;
    float: right;
    z-index: 999;
}
 
#show_msg_music ul {
    width: 225px;
    padding: 5px 10px 5px 35px;
    overflow-y: auto;
    height: 20px;
    display: block;
}
 
body .ifram_nvhms {
    background: url(styles/nvh/xenforo/bg_ms.png) repeat scroll 0 0 transparent !important;
    border: 1px solid #BDBDBD;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.3);
    display: block;
    max-width: 930px;
    padding: 40px 15px 5px;
    width: 930px;
}
 
#show_msg_music ul li {
    max-height: 60px !important;
    overflow: hidden;
    margin-bottom: 2px;
}
 
#nvh_music {
    width: 340px;
    position: absolute;
    margin-top: -50px;
    height: 30px;
    padding: 10px;
}
 
#nvh_music #msg {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -o-border-radius: 3px;
    border: 1px solid #bdbdbd;
    width: 260px;
    padding: 4px;
    display: inline-block;
    float: left;
}
 
#nvh_music .button {
    padding: 7px 15px !important;
    margin: 0px 0x 0px 8px;
    display: inline-block;
    float: right;
}
 
a.closediv {
    background-image: url(styles/nvh/xenforo/icons/close.png);
    position: absolute;
    left: 4px;
    top: 4px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    z-index: 9999;
}
 
span.show_music_button {
    border: 0px solid #ccc;
    background: url(styles/nvh/xenforo/icons/music.gif) center center no-repeat #fff;
    height: 40px;
    display: block;
    width: 50px;
    position: fixed;
    right: 0;
    top: 68%;
    cursor:pointer;
    box-shadow: 0 0 2px #888;
    -moz-box-shadow: 0 0 2px #888;
    -webkit-box-shadow: 0 0 2px #888;
    -khtml-box-shadow: 0 0 2px #888;
    -o-box-shadow: 0 0 2px #888;
    z-index: 900;
}
 
span.show_music_button:hover {
    background: url(styles/nvh/xenforo/icons/music.gif) center center no-repeat #fff;
}
 
span.show_music_button p {
    background: url(styles/nvh/xenforo/bg_m.png) no-repeat right bottom transparent;
    position: absolute;
    width: 80px;
    padding: 8px 4px;
    right: 20px;
    border-top: 1px;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 0px;
    border-style: solid;
    border-color: #0303ff;
    display: block;
    text-align: center;
    margin-top: -110px;
    font-size: 1.1em;
    height: 85px;
    display: none;
}
</style>
 
 
 
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}
 
tabberObj.prototype.init = function(e)
{
 
var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;
 
 
if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
 
for (i=0; i < this.tabs.length; i++) {
 
t = this.tabs[i];
 
 
t.headingText = t.div.title;
 
if (this.removeTitle) { t.div.title = ''; }
 
if (!t.headingText) {
 
 
for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}
 
if (!t.headingText) {
 
t.headingText = i + 1;
}
 
 
DOM_li = document.createElement("li");
 
 
t.li = DOM_li;
 
 
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
 
 
DOM_a.tabber = this;
DOM_a.tabberIndex = i;
 
 
if (this.addLinkId && this.linkIdFormat) {
 
 
aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
 
DOM_a.id = aId;
}
 
 
DOM_li.appendChild(DOM_a);
 
 
DOM_ul.appendChild(DOM_li);
}
 
 
e.insertBefore(DOM_ul, e.firstChild);
 
 
e.className = e.className.replace(this.REclassMain, this.classMainLive);
 
 
this.tabShow(defaultTab);
 
 
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}
 
return this;
};
 
 
tabberObj.prototype.navClick = function(event)
{
 
 
var
rVal,
a,
self,
tabberIndex,
onClickArgs;
 
a = this;
if (!a.tabber) { return false; }
 
self = a.tabber;
tabberIndex = a.tabberIndex;
 
 
a.blur();
 
 
if (typeof self.onClick == 'function') {
 
onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
 
/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }
 
rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}
 
self.tabShow(tabberIndex);
 
return false;
};
 
 
tabberObj.prototype.tabHideAll = function()
{
var i;
 
 
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};
 
 
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
 
if (!this.tabs[tabberIndex]) { return false; }
 
 
div = this.tabs[tabberIndex].div;
 
 
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);
 
return this;
};
 
 
tabberObj.prototype.tabShow = function(tabberIndex)
{
 
 
var div;
 
if (!this.tabs[tabberIndex]) { return false; }
 
 
this.tabHideAll();
 
 
div = this.tabs[tabberIndex].div;
 
 
div.className = div.className.replace(this.REclassTabHide, '');
 
 
this.navSetActive(tabberIndex);
 
 
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
 
return this;
};
 
tabberObj.prototype.navSetActive = function(tabberIndex)
{
 
 
 
this.tabs[tabberIndex].li.className = this.classNavActive;
 
return this;
};
 
 
tabberObj.prototype.navClearActive = function(tabberIndex)
{
 
 
 
this.tabs[tabberIndex].li.className = '';
 
return this;
};
 
 
function tabberAutomatic(tabberArgs)
{
 
var
tempObj,
divs,
i;
 
if (!tabberArgs) { tabberArgs = {}; }
 
 
tempObj = new tabberObj(tabberArgs);
 
 
 
 
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
 
 
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
 
 
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
 
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
 
var oldOnLoad;
 
if (!tabberArgs) { tabberArgs = {}; }
 
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}
 
 
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
 
if (typeof tabberOptions == 'undefined') {
 
tabberAutomaticOnLoad();
 
} else {
 
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
 
}
 
//]]>
</script>
 
<style type='text/css'>
 
.tabberlive{
    margin: 0;
    padding: 5px;
    clear: both;
    background: #f8f8f8;
    border: 0px solid #DDD;
}
 
.tabbernav {
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid #ddd;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
}
 
.tabbernav li {
    list-style: none;
    margin: 0;
    display: inline;
}
 
.tabbernav li a {
    padding: 3px 0.5em;
    font-weight: bold;
    margin-right: 3px;
    border: 1px solid #BCBCBC;
    text-shadow: 1px 1px 1px #fff;
    background: #DBDBDB;
    text-decoration: none;
    color: #207D99;
}
 
.tabbernav li a:hover {
    background: #FFA789;
    color: #fff;
    border: 1px solid #FF6734;
    font-weight: bold;
    text-shadow: 1px 1px 1px #5B5B5B;
    text-decoration: none;
}
 
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
    background: #4ADCFF;
    color: #fff;
    font-weight: bold;
    border: 1px solid #24BDE2;
    text-shadow: 1px 1px 1px #5B5B5B;
}
 
.tabberlive .tabbertab {
    padding: 5px;
    border: 1px solid #DDD;
    border-top: 0;
    background: #ffffff;
}
 
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
    display: none;
}
 
.tabbertab .widget-content ul{
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}
 
.tabbertab .widget-content li {
    border-bottom: 1px solid #ddd;
    margin: 0 5px;
    padding: 2px 0 5px 0;
}
</style>
 
<span class="show_music_button"><p>Nhạc ở đâu mà hay vầy nè ^^!</p></span>
<div id="show_music"><a class="closediv" title="Ẩn khung này!"></a>
<div id="show_msg_music" class="ifram_nvhms">
<div class='tabber'>
<div class='tabbertab' id='tab1'>
<h2>NHẠC TRẺ</h2>
 
<embed width="255" height="200" flashvars="&file=http://static.nhaccuatui.com/generals/flash/playerlist.swf?file=http://www.nhaccuatui.com/api/playerv7.ashx?list2=003f0075002d007a0076001c007c0030002400700006001e&displayheight=15&backcolor=0xFFFFFF&frontcolor=0x333333&lightcolor=0x333333&displayclick=noneshowdigits=true&showeq=true&showfsbutton=true&autostart=false&shuffle=false&repeat=true;volume=100;height=10 ;width=255&height=200" allowscriptaccess="always" allowfullscreen="true" src="http://static.nhaccuatui.com/generals/flash/playerlist.swf?file=http://www.nhaccuatui.com/api/playerv7.ashx?list2=003f0075002d007a0076001c007c0030002400700006001e">
 
</div>
<div class='clear'></div>
 
<div class='tabbertab' id='tab2'>
<h2 class='title'>DANCE</h2>
 
<embed width="255" height="200" flashvars="&file=http://static.nhaccuatui.com/generals/flash/playerlist.swf?file=http://www.nhaccuatui.com/api/playerv7.ashx?list2=000500110023000200240000001c0005003b00040079001f&displayheight=15&backcolor=0xFFFFFF&frontcolor=0x333333&lightcolor=0x333333&displayclick=noneshowdigits=true&showeq=true&showfsbutton=true&autostart=false&shuffle=false&repeat=true;volume=100;height=10 ;width=255&height=200" allowscriptaccess="always" allowfullscreen="true" src="http://static.nhaccuatui.com/generals/flash/playerlist.swf?file=http://www.nhaccuatui.com/api/playerv7.ashx?list2=000500110023000200240000001c0005003b00040079001f">
 
</div>
<div class='clear'></div>
 
<div class='tabbertab' id='tab3'>
<h2>TRỮ TÌNH</h2>
 
Đang chờ cập nhật ...
 
</div>
<div class='clear'></div>
 
</div>
</div>
</div>

Vào template PAGE_CONTAINER chèn <xen:include template="nvh_music" /> trước

</xen:hook>
</body>
</html>

Tất cả css và script code đều nằm ở đây 

Các bạn có thể download hình liên quan ở đính kèm, upload host và sửa lại đường dẫn.

The Elite

Thứ Năm, 28 tháng 3, 2013

Chia sẻ buttom nghe nhạc ngộ nghĩnh XF

Attached Files:

upload.zip

Không có nhận xét nào:

Đăng nhận xét

Translate

Lưu trữ Blog