1

我正在使用 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/ （这是我喜欢使用的面板）

4

3 回答 3

1

如果你可以使用其他的jQuery面板插件就可以了。如：

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

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

于 2013-11-01T09:40:33.593 回答
1

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

divs用 css动画：

.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');
});
于 2013-11-01T09:41:13.763 回答
0

使用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

于 2013-11-01T14:44:09.307 回答