如何使用Jquery移動面板進入twitter引導

我正在使用twitter bootstrap v3.0.0建立一個網站，我想添加一個側面板（從屏幕右側的面板），我發現我可以用jquery mobile來做到這一點。問題是jquery mobile ruins all my css，所以我的問題是：can i import just a part of jquery mobile ?只是pannels？希望我的CSS不會在之後崩潰？如何使用Jquery移動面板進入twitter引導

如果是，請告訴我該怎麼做！由於

注：http://api.jquerymobile.com/panel/（這是我喜歡用潘內爾）

來源

2013-11-01 Crisan Raluca Teodora

不會是好的，如果你可以使用其他的jQuery插件面板。如：

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

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

來源

2013-11-01 09:40:33

這有效，但我還有一個問題。面板內容選項只能遠離另一個文件？不能是同一個文件的div？ –

http://codebomber.com/jquery/slidepanel/是完美的，但它只加載外部文件，沒有任何選項從本地元素加載？如果是，我會評分你的答案 –

我已經添加了答案。看看這是否有幫助 –

這裏有一個簡單的解決方案 - 你可以設置在引導欄的內容，然後使用jQuery來切換類和通過CSS（或jQuery的）動畫。下面是使用引導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-01 09:41:13 Voodoo

這只是讓我失望。這是怎麼回事？ – ACJ

使用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-01 14:44:09

如何使用Jquery移動面板進入twitter引導

回答

相關問題