reset and begin
5/24/2013

Tạo Thanh toolbox cho website

Thanh toolbox viết hoàn toàn bằng javascript tương thích hầu hết trình duyệt hỗ trợ javascript  thông thường toolbox được đặt bên phải sát thanh scrollbar hỗ trợ ngưới sử dụng thao tác dễ dàng với website.


các nút chức năng chính của toolbox gồm:
-di chuyển lên đầu trang
-quay trở lại trang trước
-nút liên hệ
-refresh trang web
-di chuyển cuối trang
-tự động  chuyển động từ từ đến cuối trang (+1)

- nút dừng chuyển động



1- style tùy bạn - ở đây đặt ở giữa trang
<style>
#xenplaza_toolbox {
    z-index: 99;
    width:26px;
    position:fixed;
    right:1px;
    top:250px;
    background: transparent;
    -moz-border-radius: 5px;
}

</style>
2- mã script 1 thông báo khi refresh

<script language="javascript" type="text/javascript">
function confirmRefresh() {
var okToRefresh = confirm("Do you really want to refresh this page?");
if (okToRefresh)
    {
            setTimeout("location.reload(true);",1000);
    }
}
</script>
 3- mã script 2 - mã chính
<script language="javascript">
    suspendcode="<div id='xenplaza_toolbox' align='center'>";
    suspendcode+="<a onclick='javascript:amutop();return false;' href='#' title='Up to TOP'><img border=0 src=\"up.png\" width=\"24\"></a><br>";
    suspendcode+="<a onclick='javascript:history.back();return false;' href='#' title='Back'><img border=0 src=\"back.png\" width=\"24\"></a><br>";
    suspendcode+="<a href='mailto:webvn20@gmail.com' class='OverlayTrigger' title='Contact'><img border=0 src=\"contact.png\" width=\"24\"></a><br>";
    suspendcode+="<a href='javascript:confirmRefresh();' title='Refresh'><img border=0 src=\"refresh.png\" width=\"24\"></a><br>";
    suspendcode+="<a onclick='javascript:sc();return false;' href='#' title='Stop Scroll'><img border=0 src=\"pause.png\" width=\"24\"></a><br>";
    suspendcode+="<a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='Scroll Down'><img border=0 src=\"autodown.png\" width=\"24\"></a><br>";
    suspendcode+="<a onclick='javascript:amubutton();return false;' href='#' title='Go to Bottom'><img border=0 src=\"down.png\" width=\"24\"></a></div>"
    document.write(suspendcode);

    var currentpos,timer;

    function initialize()
    {
        timer=setInterval ("scrollwindow ()",30);
    }
    function sc()
    {
        clearInterval(timer);
    }
    function scrollwindow()
    {
        currentpos = document.documentElement.scrollTop || document.body.scrollTop;
        window.scrollTo(0,++currentpos);
    }
    function amutop()
    {
        window.scrollTo(0,0)
        clearInterval(timer);
    }
    function amubutton()
    {
        window.scrollTo(0,80000)
        clearInterval(timer);
    }
   
</script>

Với mỗi nút bạn có thể thay bằng hình ảnh cho phù hợp với website

Bloger Comments
G+ Comments
Comments FaceBook

No comments:

List

Profiles Information


About me : Nothing is 1 vài thứ - 1985

Places I've Lived : I Hà Nội

Home Page : http://www.shimivn.blogspot.com/

Think : 1:1000000000

Languages spoken : Vietnamese,English.

Mobile : sony C2305

dell : i3-Ram 3GB- HDD 250GB .