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>
切版- 切图网(qietu.com)旗下psd转html,前端外包的“切图客”团体。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

客服咨询
客服1
客服2
微信公众号