jquery插件jqdock打造苹果桌面

切版网专注网页切版服务


jquery有很多好玩的插件,今天向大家分享一个使用jqDock与jquery实现的桌面效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Leopard Dashboard</title>
    <script src="js/jquery-1.2.6.min.js" TYPE="text/javascript"></script>
    <script src="js/draggable.jquery.ui.js" TYPE="text/javascript"></script>
    <script src="js/dashboard.js" TYPE="text/javascript"></script> 
    <script src="js/jquery.jqDock.min.js" TYPE="text/javascript"></script>
    <style TYPE="text/css">
        @IMPORT url(style.css);
    </style>
</head>
<body>
    <div ID="wrapper">
    <div class="draggableWindow">
        <h1><span></span>Leopard Dashboard with jQuery</h1>
        <div class="content">
            <h2>jQuery is awesome!</h2>
            <p>jQuery is pretty cool. I mean, look at all this cool stuff it can do. A dock (<a href="http://www.wizzud.com/jqDock/">Sourced FROM Wizzud.com! Thanks!</a>), a dashboard, AND draggable windows! Awesome! IF you didn't get here via it, this is the demo of a tutorial from <a href="http://nettuts.com">Nettuts</a>.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="draggableWindow" id="smaller">
        <h1><span></span>A smaller window</h1>
        <div class="content">
            <p>A small dialogue window styled in style.css</p>
        </div>
    </div>
 
        <div id="dashboardWrapper">
            <ul>
                <li class="widget"><img src="images/widgets/googlesearch.png" alt="" /></li>
                <li class="widget"><img src="images/widgets/date.png" alt="" /></li>
                <li class="widget"><img src="images/widgets/dictionary.png" alt="" /></li>
                <li class="widget" id="notepad">This is a text widget! You can make any type of widget you want, simply by adding the class 'widget' to an li element within the Dashboard unordered list. Don't stop there though, create custom looking widgets by adding another class (e.g. myClass) AND styling that in style.css. Like this one! <a href="http://nettuts.com/">Nettuts</a></li>
            </ul>
        </div>
    </div>
    <div ID="dock">
        <img src="images/finder.png" alt="Finder" title="finder"/>
        <img src="images/dashboard.png" alt="Dashboard" ID="dashboardLaunch" title="Dashboard" />
        <img src="images/mail.png" alt="Mail" title="finder" />
        <img src="images/coda.png" alt="Coda" title="Coda" />
    </div>
</body>
</html>
免费索取报价