Question

我正在使用twitter bootstrap v3.0.0建立一个网站，我想添加一个侧面板（屏幕右侧的面板），我发现我可以用jquery mobile做到这一点。问题是jquery mobile ruins all my css，所以我的问题是：can i import just a part of jquery mobile ?只是面板？希望我的CSS不会在那之后崩溃？

如果是，请告诉我该怎么做！感谢

注意：http://api.jquerymobile.com/panel/（这是我喜欢使用的pannel）

Answer 1

如果你可以使用其他jQuery面板插件，那就没关系了。如：

http://codebomber.com/jquery/slidepanel/

http://designhuntr.com/15-slide-panel-jquery-plugins/

Answer 2

这是一个简单的解决方案 - 您可以在Bootstrap列中设置内容，然后使用jquery通过CSS（或jQuery）切换类和动画。这是使用Bootstrap 2.x的版本，但原理是相同的：http://jsfiddle.net/mark47/x8S2q/

使用css：

为divs设置动画

.row div {
    -webkit-transition: width 0.3s ease, margin 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease;
}

并切换列宽类：

$('#trig').on('click', function () {
    $('#colMain').toggleClass('span12 span9');
    $('#colPush').toggleClass('span0 span3');
});

Answer 3

使用http://codebomber.com/jquery/slidepanel/

我没有看到从本地元素加载内容的选项。我在插件源文件中更改了一些代码。现在你可以从本地元素加载文本。

<a href="#" data-slidepanel="panel">Show Panel</a>

<div id="panel-content" style="display:none;">
    This is the content of the panel.
</div>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.slidepanel.js"></script>
<script>
    $(document).ready(function(){
         $('[data-slidepanel]').slidepanel({
              orientation: 'right',
              mode: 'overlay'
         });
    });
</script>

在 jquery.slidepanel.js 文件中删除这些行（行号100-105）：

$('.inner .wrapper', this.$panel).html('').load(href, function() {
     // remove the loading indicator
     base.$panel.removeClass('loading');
     // set the current loaded URL to the target URL
     base.$panel.data('slidepanel-loaded', href);
});

改为添加：

$('.inner .wrapper', this.$panel).html($('#panel-content').html());
base.$panel.removeClass('loading');
base.$panel.data('slidepanel-loaded', href);

如果您需要更具体的信息，请参阅整个修改过的文件的链接：

http://pastebin.com/ZsiFFm52

如何使用Jquery移动面板进入twitter bootstrap

3 个答案: