1. 首页
  2. 问答
  3. 添加边栏聊天引导3？

添加边栏聊天引导3？

2014-09-02 85 views
0

我试图让侧边栏聊天的自举3，像这样添加边栏聊天引导3？

enter image description here

在正确的始终，而当单击要从右到左开，

enter image description here

当用户clikc被打开，我不需要造型我可以稍后修改css，只需要功能

有人可以只是h基本funcionality elp我？

这是我现在

<div class="row chat-window col-xs-5 col-md-3" id="chat_window_1" style="margin-left:10px;"> 
    <i id="chat-open" class="fa fa-camera-retro fa-2x"></i> 
     <div class="col-xs-11 col-md-11 pull-right"> 
      <div class="panel panel-default"> 
       <div class="panel-heading top-bar"> 
        <div class="col-md-8 col-xs-8"> 
         <h3 class="panel-title"><span class="glyphicon glyphicon-comment"></span> Chat - Miguel</h3> 
        </div> 
        </div> 
       <div class="panel-body msg_container_base"> 
        <div class="row msg_container base_sent"> 
         <div class="col-md-10 col-xs-10"> 
          <div class="messages msg_sent"> 
           <p>that mongodb thing looks good, huh? 
           tiny master db, and huge document store</p> 
           <time datetime="2009-11-13T20:00">Timothy • 51 min</time> 
          </div> 
         </div> 
         <div class="col-md-2 col-xs-2 avatar"> 
          <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> 
         </div> 
        </div> 
        <div class="row msg_container base_receive"> 
         <div class="col-md-2 col-xs-2 avatar"> 
          <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> 
         </div> 
         <div class="col-md-10 col-xs-10"> 
          <div class="messages msg_receive"> 
           <p>that mongodb thing looks good, huh? 
           tiny master db, and huge document store</p> 
           <time datetime="2009-11-13T20:00">Timothy • 51 min</time> 
          </div> 
         </div> 
        </div> 
        <div class="row msg_container base_receive"> 
         <div class="col-md-2 col-xs-2 avatar"> 
          <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> 
         </div> 
         <div class="col-xs-10 col-md-10"> 
          <div class="messages msg_receive"> 
           <p>that mongodb thing looks good, huh? 
           tiny master db, and huge document store</p> 
           <time datetime="2009-11-13T20:00">Timothy • 51 min</time> 
          </div> 
         </div> 
        </div> 
        <div class="row msg_container base_sent"> 
         <div class="col-xs-10 col-md-10"> 
          <div class="messages msg_sent"> 
           <p>that mongodb thing looks good, huh? 
           tiny master db, and huge document store</p> 
           <time datetime="2009-11-13T20:00">Timothy • 51 min</time> 
          </div> 
         </div> 
         <div class="col-md-2 col-xs-2 avatar"> 
          <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> 
         </div> 
        </div> 
        <div class="row msg_container base_receive"> 
         <div class="col-md-2 col-xs-2 avatar"> 
          <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> 
         </div> 
         <div class="col-xs-10 col-md-10"> 
          <div class="messages msg_receive"> 
           <p>that mongodb thing looks good, huh? 
           tiny master db, and huge document store</p> 
           <time datetime="2009-11-13T20:00">Timothy • 51 min</time> 
          </div> 
         </div> 
        </div> 
        <div class="row msg_container base_sent"> 
         <div class="col-md-10 col-xs-10 "> 
          <div class="messages msg_sent"> 
           <p>that mongodb thing looks good, huh? 
           tiny master db, and huge document store</p> 
           <time datetime="2009-11-13T20:00">Timothy • 51 min</time> 
          </div> 
         </div> 
         <div class="col-md-2 col-xs-2 avatar"> 
          <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> 
         </div> 
        </div> 
       </div> 
       <div class="panel-footer"> 
        <div class="input-group"> 
         <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." /> 
         <span class="input-group-btn"> 
         <button class="btn btn-primary btn-sm" id="btn-chat">Send</button> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

CSS

.panel{ 
    margin-bottom: 0px; 
} 
.chat-window{ 
    top:300px; 
    position:fixed; 
    float:right; 
    margin-left:10px; 
    right: -417px; 
} 
.chat-window > div > .panel{ 
    border-radius: 5px 5px 0 0; 
} 
.icon_minim{ 
    padding:2px 10px; 
} 
.msg_container_base{ 
    background: #e5e5e5; 
    margin: 0; 
    padding: 0 10px 10px; 
    max-height:300px; 
    overflow-x:hidden; 
} 
.top-bar { 
    background: #666; 
    color: white; 
    padding: 10px; 
    position: relative; 
    overflow: hidden; 
} 
.msg_receive{ 
    padding-left:0; 
    margin-left:0; 
} 
.msg_sent{ 
    padding-bottom:20px !important; 
    margin-right:0; 
} 
.messages { 
    background: white; 
    padding: 10px; 
    border-radius: 2px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
    max-width:100%; 
} 
.messages > p { 
    font-size: 13px; 
    margin: 0 0 0.2rem 0; 
    } 
.messages > time { 
    font-size: 11px; 
    color: #ccc; 
} 
.msg_container { 
    padding: 10px; 
    overflow: hidden; 
    display: flex; 
} 
img { 
    display: block; 
    width: 100%; 
} 
.avatar { 
    position: relative; 
} 
.base_receive > .avatar:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 0; 
    height: 0; 
    border: 5px solid #FFF; 
    border-left-color: rgba(0, 0, 0, 0); 
    border-bottom-color: rgba(0, 0, 0, 0); 
} 

.base_sent { 
    justify-content: flex-end; 
    align-items: flex-end; 
} 
.base_sent > .avatar:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 0; 
    border: 5px solid white; 
    border-right-color: transparent; 
    border-top-color: transparent; 
    box-shadow: 1px 1px 2px rgba(black, 0.2); // not quite perfect but close 
} 

.msg_sent > time{ 
    float: right; 
} 



.msg_container_base::-webkit-scrollbar-track 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; 
} 

.msg_container_base::-webkit-scrollbar 
{ 
    width: 12px; 
    background-color: #F5F5F5; 
} 

.msg_container_base::-webkit-scrollbar-thumb 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #555; 
} 

.visible{ 
    right:0px !important; 
}

我需要的是隐藏在右边聊天，当点击图标聊天节目，并再次图标隐藏？

这里是 JS

$("#chat-open").click(function() { 
$('#chat_window_1').toggleClass('visible'); 
});

的问题是，聊天thsi方式只弹出，是有可能从右侧添加森那漂亮的幻灯片动画向左？

这里工作bootply http://www.bootply.com/ZTdXhZGi1d

SOLUTION

$("#chat-open").click(function() { 
    if ($('#chat_window_1').css('right') == "0px") { 
    $('#chat_window_1').animate({right: "-417px"}, 1200); 
    } else { 
    $('#chat_window_1').animate({right: "0px"}, 1200); 
    } 
});

来源

2014-09-02 Miomir Dancevic

+0

补充： 包括在你的页面，您可以通过传递时间为toggleClass()功能动画jQueryUI后工作小提琴，但仍然没有运气 – 2014-09-02 08:16:21

回答

1

你应该使用position:fixed股利。

使用jQuery，您可以为div的固定位置设置动画效果。

#chat { 
    position:fixed; 
    right:10px; 
    top:20px; 
    height:300px 
}

和一些jQuery的：

$("#chat").click(function() { 
    if ($(this).css('right') == "200px") { 
    $(this).animate({right: "10px"}, 1200); 
    } else { 
    $(this).animate({right: "200px"}, 1200); 
    } 
});

里面的#chat格可以放置另一个DIV所以当你点击聊天本身股利不会关闭。

来源

2014-09-02 08:01:50

+0

犯错或者在jquery函数中 – 2014-09-02 08:09:20

+0

没测试过，再试一次。在IF中删除了这个配音）。 – 2014-09-02 08:13:24

0

尝试this fiddle并适应您的需求。

CSS：

#sidebar { 
    position: fixed; 
    top: 0; 
    height: 100%; 
    width: 100px; 
    background-color: #ccf; 
    right: -80px; 
} 
.visible { 
    right: 0px !important; 
}

JS：

$('#sidebar').click(function() { 
    $(this).toggleClass('visible'); 
});

编辑：

$(this).toggleClass('visible', 500);

来源

2014-09-02 08:28:05

+0

如何为此添加动画？ – 2014-09-02 09:31:24

+0

您可以通过在页面中添加jQueryUI并传递'duration'参数来为[toggleClass]（http://api.jqueryui.com/toggleclass/）函数设置动画效果。 – 2014-09-02 09:33:59

相关问题

 相关问题