html - 在非 Leaflet 应用程序 (Sigma JS) 中重新创建放大/缩小按钮？

Question

我有一个网页，其中包含使用 Sigma JS ( http://sigmajs.org/ ) 创建的网络图和对应于网络图的 Leaflet map 。网络图具有与 Leaflet map 类似的功能，您可以四处拖动屏幕，更重要的是，可以使用点击按钮放大和缩小。

我希望我的页面看起来更有凝聚力，因此我希望我的网络图上的放大和缩小按钮看起来与 Leaflet map 上的按钮相同。我喜欢 Leaflet 按钮的外观，所以我想做的是在我的网络图中重新创建 Leaflet 按钮。显然，我可以从头开始复制按钮，然后自己制作设计按钮所需的所有 CSS。但我是 html/CSS n00b，所以我在想一种更有效的方法是找到传单用来创建按钮的 CSS 并将其复制到 Sigma JS CSS 中。

我的问题是我似乎无法找到所有使用的 CSS。我想也有可能，鉴于我是新手，除了 CSS 之外，还有其他事情正在设计按钮。这是我到目前为止在 http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css 上找到的内容，这是我认为缩放按钮所需的一切都将位于的位置。我想我不知道加号和减号是从哪里来的，除此之外:

        font: bold 18px 'Lucida Console', Monaco, monospace;
        text-indent: 1px;
        border: 2px dotted #38f;
        background: rgba(255,255,255,0.5);

Answer 1

如果您在同一个站点上使用传单和 sigmajs，因此传单 css 无论如何都会加载，只需使用现有类创建按钮即可:

<div class="leaflet-control leaflet-bar">
    <a class="leaflet-control-zoom-in" href="#" title="Zoom in">+</a>
    <a class="leaflet-control-zoom-in" href="#" title="Zoom out">-</a>
</div>

(如您所见，+ 和 - 不是用 css 创建的，而是在 html 中创建的)

如果您还没有在页面上加载 leaflet.css，只需找到我在下面使用的类并将其从 leaflet.css 复制到您的 css 文件。

参见 this fiddle .