1

我如何将这些图标移动到中心并在鼠标悬停上工作

我正在尝试将 Fisheye 集成到我的 Ext Js 项目中，例如http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html

1. Downloaded the js files (jquery+interface)  
2. Downloaded the CSS with images  
3. In my app.js created a panel using items config  
4. Now used added event in the listener and its not working at all  
5. Following is the file structures

索引.html：

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/interface.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="ext-4.1.1/ext-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>

应用程序.js：

    Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'AM',
    controllers:['Users'],

    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [
                {
                xtype:'panel',
                id:'navigationPanel',
                height:350,
                collapsible:true,
                resizable:true,
                region:'south',
                loader:{
                url:'sample.html',
                autoLoad:true
                },
                listeners:{
                        'added':function( navp, container, pos,  eOpts  ){
                        $('#dock').ready(
                            function()
                            {
                                $('#dock2').Fisheye(
                                    {
                                        maxWidth: 60,
                                        items: 'a',
                                        itemsText: 'span',
                                        container: '.dock-container2',
                                        itemWidth: 40,
                                        proximity: 80,
                                        alignment : 'left',
                                        valign: 'bottom',
                                        halign : 'center'
                                    }
                                )

                            }
                        )
                    }}
                }]
        });
     }
    });

示例.html：

<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a> 
  <a class="dock-item2" href="#"><span>Contact</span><img src="images/email.png" alt="contact" /></a> 
  <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="#"><span>Music</span><img src="images/music.png" alt="music" /></a> 
  <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><span>History</span><img src="images/history.png" alt="history" /></a> 
  <a class="dock-item2" href="#"><span>Calendar</span><img src="images/calendar.png" alt="calendar" /></a> 
  <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a> 
  <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a> 
  </div>
</div>

当我跑步时，我得到 1 个图标，底部左对齐，鼠标悬停不起作用。

它应该与底部的链接http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html完全相同

非常感谢您的帮助！！！阿斯维尼

4

0 回答 0