Tuổi : 33 Posts : 2319 Points : 6889 Thanked : 77 10/12/2010 Birthday : 27/02/1991 Đến từ : Hải Phòng I'm : Status : DarkNo1<=> ClubTeen9x avatar-dulieu : 57,13100|50,11784|49,10840|64,12636|51,11465|48,12265|58,12156|66,11440 Admin Tuổi : 33 Posts : 2319 Points : 6889 Thanked : 77 10/12/2010 Birthday : 27/02/1991 Đến từ : Hải Phòng I'm : Status : DarkNo1<=> ClubTeen9xavatar-dulieu : 57,13100|50,11784|49,10840|64,12636|51,11465|48,12265|58,12156|66,11440
Thông tin thành viên : Click ! Posts : 2319
Points : 6889
Thanked : 77
10/12/2010
Birthday : 27/02/1991
Đến từ : Hải Phòng
I'm : Status : DarkNo1<=> ClubTeen9x
avatar-dulieu : 57,13100|50,11784|49,10840|64,12636|51,11465|48,12265|58,12156|66,11440
Tuổi : 33 Posts : 2319 Points : 6889 Thanked : 77 10/12/2010 Birthday : 27/02/1991 Đến từ : Hải Phòng I'm : Status : DarkNo1<=> ClubTeen9xavatar-dulieu : 57,13100|50,11784|49,10840|64,12636|51,11465|48,12265|58,12156|66,11440
Shop Avatar
Tiêu đề: Menu trượt cho mod_poll Fri Sep 16, 2011 6:58 am DarkNo1<=> ClubTeen9x
Tiêu đề: Menu trượt cho mod_poll --------------------------------------------------- Cho Ðiểm Chủ Ðề Này
Menu sẽ hoạt động khi bắt đầu Check vào bảng bầu chọn (Có thể chậm do thời gian tải trang)
Demo:
[You must be registered and logged in to see this link.] (Bảng bầu chọn)
Code: <a name="sondage"></a> <form name="CFvpoll" method="POST" action="{S_POLL_ACTION}"> <table id="mytable" width="100%" cellpadding="0" cellspacing="1" border="0" class="forumline"> <tr> <td class="check" height="25" style="border-width: 0 0 0 1px;background: #0a0b06 url(http://s913.photobucket.com/albums/ac332/battuvuong/cfviet/tcatbg.gif) repeat top left; color: #ff7500; height:29px; padding: 2px 3px; font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;"> <span class="genmed module-title">{POLL_QUESTION}</span> </td> </tr> <tr> <td> {POLL_DISPLAY} </td> </tr> </table> </form> <style type="text/css">.actionsBox{ font-size:13px; font-family: Arial,Verdana; font-style:normal; left:50%; position:absolute; top:-50px; opacity:0; cursor:move; } .actionsBox .menu{ color:#47708F; width:240px; line-height:30px; text-shadow:1px 1px 0px #fff; padding:7px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; font-weight:bold; border:1px solid #D9EAF2; background:#e8f4fa; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.58, rgb(217,234,242)), color-stop(0.93, rgb(232,244,250)) ); background: -moz-linear-gradient( center bottom, rgb(217,234,242) 58%, rgb(232,244,250) 93% ); -moz-box-shadow:1px 1px 3px #999; -webkit-box-shadow:1px 1px 3px #999; box-shadow:1px 1px 3px #999; } .actionsBox .menu .button{ padding:4px 7px; border:1px solid #D9EAF2; cursor:pointer; background:#e8f4fa; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.38, rgb(230,243,249)), color-stop(0.88, rgb(245,249,250)) ); background: -moz-linear-gradient( center bottom, rgb(230,243,249) 38%, rgb(245,249,250) 88% ); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0px 1px 0px #f9f9f9; -webkit-box-shadow:0px 1px 0px #f9f9f9; box-shadow:0px 1px 0px #f9f9f9; } .actionsBox .menu .button:hover{ background:#fff; } .actionsBox .menu span{ padding:0px 10px; } .actionsBox .submenu{ display:none; width:120px; margin-left:100px; top:46px; right:10px; background:#fff; border:1px solid #D9EAF2; border-top:none; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; -moz-box-shadow:0px 1px 4px #ddd; -webkit-box-shadow:0px 1px 4px #ddd; box-shadow:0px 1px 4px #ddd; } .actionsBox .submenu a{ display:block; cursor:pointer; padding:10px 15px; border-top:1px solid #D9EAF2; } .actionsBox .submenu a.last{ -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } .actionsBox .submenu a.first{ border-top:none; } .actionsBox .submenu a:hover{ background-color:#f9f9f9; } .actionsBox .menu a.open, .actionsBox .menu a.closed{ border:1px solid #D9EAF2; padding:4px 17px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0px 1px 0px #f9f9f9; -webkit-box-shadow:0px 1px 0px #f9f9f9; box-shadow:0px 1px 0px #f9f9f9; cursor:pointer; opacity:0.6; margin-right:5px; } .actionsBox .menu a.open{ background:#fff url(http://tympanus.net/Tutorials/CheckboxActions/open.png) no-repeat center center; } .actionsBox .menu a.closed{ background:#fff url(http://tympanus.net/Tutorials/CheckboxActions/closed.png) no-repeat center center; } .actionsBox .menu a.open:hover, .actionsBox .menu a.closed:hover{ opacity:1.0; } </style> <script type="text/javascript"> //<![CDATA[ var agt = navigator.userAgent.toLowerCase(); var originalFirstChild; var display = false; function createPagination(which, string, x, y) { if ( display == true ) { destroyPagination(); display = false; } else { display = true; if (typeof(originalFirstChild) == "undefined") { originalFirstChild = document.body.firstChild; } x = document.all ? (event.clientX + document.body.scrollLeft) : x; y = document.all ? (event.clientY + document.body.scrollTop) : y; element = document.createElement("div"); element.style.position = "absolute"; element.style.zIndex = 1000; element.style.visibility = "hidden"; excessWidth = 0; excessHeight = 20; element.innerHTML = '<table cellspacing="0" cellpadding="0" border="0" style="width:auto;"><tr><td><span class="gen">' + string + "</span></td></tr></table>"; renderedElement = document.body.insertBefore(element, document.body.firstChild); renderedWidth = renderedElement.offsetWidth; renderedHeight = renderedElement.offsetHeight; overFlowX = x + renderedWidth + excessWidth - document.body.offsetWidth; x = overFlowX > 0 ? x - overFlowX : x; overFlowY = y + renderedHeight + excessHeight - window.innerHeight - window.pageYOffset; y = overFlowY > 0 ? y - overFlowY : y; renderedElement.style.top = (y + 15) + "px"; renderedElement.style.left = (x + 15) + "px"; if (agt.indexOf("gecko") != -1 && agt.indexOf("win") != -1) { setTimeout('renderedElement.style.visibility = "visible"', 1); } else { renderedElement.style.visibility = "visible"; } } } function Pagination() { } function destroyPagination() { if (document.body.firstChild != originalFirstChild) { document.body.removeChild(document.body.firstChild); } } //]]> </script> <div id="actionsBox" class="actionsBox"> <div id="actionsBoxMenu" class="menu"> <span id="cntBoxMenu">0</span> <a class="button box_action" onclick="this.value=check('select','CFvpoll');return false;">Check All</a> <a onclick="this.value=check('unselect','CFvpoll');return false;" class="button box_action">Uncheck</a> <a id="toggleBoxMenu" class="open"></a> <a id="closeBoxMenu" class="button">X</a> </div> <div class="submenu"> <a href="/index.htm">Trang chủ</a> <a href="/html-h125.htm">Cửa hàng</a> <a href="/html-h182.htm">Sơ đồ</a> <a id="lnkSendPersonal" class='bvdangky' href="#">Dịch vụ</a> </div> </div> <script type="text/javascript"> $(function() { /* tells us if we dragged the box */ var dragged = false; /* timeout for moving the mox when scrolling the window */ var moveBoxTimeout; /* make the actionsBox draggable */ $('#actionsBox').draggable({ start: function(event, ui) { dragged = true; }, stop: function(event, ui) { var $actionsBox = $('#actionsBox'); /* calculate the current distance from the window's top until the element this value is going to be used further, to move the box after we scroll */ $actionsBox.data('distanceTop',parseFloat($actionsBox.css('top'),10) - $(document).scrollTop()); } }); /* when clicking on an input (checkbox), change the class of the table row, and show the actions box (if any checked) */ $('#mytable input[type="checkbox"]').bind('click',function(e) { var $this = $(this); if($this.is(':checked')) $this.parents('tr:first').addClass('selected'); else $this.parents('tr:first').removeClass('selected'); showActionsBox(); }); function showActionsBox(){ /* number of checked inputs */ var BoxesChecked = $('#mytable input:checked').length; /* update the number of checked inputs */ $('#cntBoxMenu').html(BoxesChecked); /* if there is at least one selected, show the BoxActions Menu otherwise hide it */ var $actionsBox = $('#actionsBox'); if(BoxesChecked > 0){ /* if we didn't drag, then the box stays where it is we know that that position is the document current top plus the previous distance that the box had relative to the window top (distanceTop) */ if(!dragged) $actionsBox.stop(true).animate({'top': parseInt(15 + $(document).scrollTop()) + 'px','opacity':'1'},500); else $actionsBox.stop(true).animate({'top': parseInt($(document).scrollTop() + $actionsBox.data('distanceTop')) + 'px','opacity':'1'},500); } else{ $actionsBox.stop(true).animate({'top': parseInt($(document).scrollTop() - 50) + 'px','opacity':'0'},500,function(){ $(this).css('left','50%'); dragged = false; /* if the submenu was open we hide it again */ var $toggleBoxMenu = $('#toggleBoxMenu'); if($toggleBoxMenu.hasClass('closed')){ $toggleBoxMenu.click(); } }); } } /* when scrolling, move the box to the right place */ $(window).scroll(function(){ clearTimeout(moveBoxTimeout); moveBoxTimeout = setTimeout(showActionsBox,500); }); /* open sub box menu for other actions */ $('#toggleBoxMenu').toggle( function(e){ $(this).addClass('closed').removeClass('open'); $('#actionsBox .submenu').stop(true,true).slideDown(); }, function(e){ $(this).addClass('open').removeClass('closed'); $('#actionsBox .submenu').stop(true,true).slideUp(); } ); /* close the actions box menu: hides it, and then removes the element from the DOM, meaning that it will no longer appear */ $('#closeBoxMenu').bind('click',function(e){ $('#actionsBox').animate({'top':'-50px','opacity':'0'},1000,function(){ $(this).remove(); }); }); /* as an example, for all the actions (className:box_action) alert the values of the checked inputs */ $('#actionsBox .box_action').bind('click',function(e){ var ids = ''; $('#mytable input:checked').each(function(e,i){ var $this = $(this); ids += 'id : ' + $this.attr('id') + ' , value : ' + $this.val() + '\n'; }); alert('checked inputs:\n'+ids); }); }); </script>