标签: jasny-bootstrap

我有一个带有以下标记的表:

<div class="table-responsive"
    <table class="table table-hover"
        <!-- table data-->
    </table>
</div>

正如文档所说,我的表现在应该能够水平滚动.如果我使用chrome的设备模拟器,它确实有效.然而,当我尝试使用真正的iPhone(在这种情况下为iPhone 5s - 在iPhone 6上测试过)时,我根本无法水平滚动表格.我可以看到默认情况下在视口中显示的最后一列,我只是无法侧向滚动它.我在我的iPhone上使用chrome和safari尝试了这一点,并且得到了同样的行为.

我试图做的是添加-webkit-overflow-scroll: touch但它没有解决问题.我也尝试手动添加overflow-x: scroll而不是默认auto但无济于事.

我不确定这是否重要,但我也有一个引导插件 - offcanvas - 由jasny bootstrap,我不能在我的iPhone上垂直滚动那个侧面菜单.这一切都在仿真器中工作,但在真实的东西上失败了.

也许那两个人以某种方式相连.

任何帮助表示赞赏.

编辑:

我刚刚在Android手机上测试过,看起来我可以按预期水平滚动表格.但是,即使在android上,我仍然无法垂直滚动侧面菜单.我想这意味着这些问题并没有相互联系.

我正在使用具有锚链接的jasny bootstrap画布菜单,以便在点击时导航到1月部分.当我点击锚链接时,我添加了一个jquery解决方案来关闭画布外菜单.

JQUERY:关闭Off-Canvas菜单并导航到Anchor Link区号:

$('.navmenu-nav li a').on('click', function(){
   $(".backdrop").hide( 0, function() {});
    $("body").removeClass("bs.offcanvas");});

问题当关闭画布菜单处于活动状态时,上面的代码在992px浏览器宽度下工作得很好,但是当浏览器宽度超过992px时,关闭画布菜单变为固定的左菜单,但是当我点击锚链接时仍然会出现黑色背景.我试图在992px宽度之后使用removeAttr 数据目标和数据切换,但没有成功.我仍然是JQuery的新手,我似乎无法弄清楚这一点.

当我在992px宽度后单击锚点链接时,我该怎么做才能防止出现背景？

额外:当我选择992px宽度后的锚点链接时,菜单似乎也会跳转,当画布菜单成为固定的左菜单时,如何防止它跳转？

问题的小提琴

先决条件:

• Bootstrap.min.css

• Bootstrap.min.js

• jasny-bootstrap.css

• jasny-bootstrap.js

JQuery的:

/Close Modal when navigating to anchor   */
$('.navmenu-nav li a').on('click', function(){
   $(".backdrop").hide( 0, function() {});
    $("body").removeClass("bs.offcanvas");

    });
/Simulate Modal Opening */

$(".nav-link").click(function() { $("#navToggle").click() })

$('.navmenu').on('show.bs.offcanvas', function() {
    $('.backdrop').fadeIn();
});

$('.navmenu').on('hide.bs.offcanvas', function() {
    $('.backdrop').fadeOut();
});


/Close Modal on Resize */
$(window).resize(function() {
  if ($(window).width() > 992) {
    $(".backdrop").hide( 0, function() …

我使用jasny bootstrap插件创建了一个侧边菜单.标记相当简单:

<div class="navmenu navmenu-inverse navmenu-fixed-right offcanvas-sm sidemenu">

    <ul class="nav navmenu-nav>
        <li></li>
        <!-- many more <li> which may have <ul> nested -->
    </ul>

</div>

问题是手机上无法滚动.当我尝试滚动它时它就不起作用了.

我试图使用带有Web检查器的iOS模拟器深入检查它并尝试绑定一些事件.我尝试将scroll事件绑定到.sidemenu但是此事件从未触发过.然后我尝试绑定touchstart事件,它按预期工作.我想这意味着它确实识别我的触摸,但它只是无法识别滚动手势？

知道为什么它不起作用吗？

我选择使用Jasny Bootstrap来显示文件预览.

      <div class="fileinput fileinput-new" data-provides="fileinput">
        <div>
         <span class="btn btn-primary btn-file"><span class="fileinput-new"><span class="fa fa-camera"></span> Image 3</span>
          <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
          <input type="file" name="file" class="ephoto-upload" accept="image/jpeg"></span>
          </div>
        </div>

我想在选择图像后立即通过ajax开始提交此图像.我正在使用以下代码.

<script>
$('.ephoto-upload').change(function(){
if($(this).val()!='') {   
var formData = new FormData();
formData.append('file', $(this)[0].files[0]);
$.ajax({
    url: '/path/to/upload',
    type: 'POST',
    data: formData,
    async: false,
    success: function (r) { 
    if(r.success) {
    //success work 
     }
    },
    cache: false,
    contentType: false,
    processData: false
});

}

}); 
</script>

上传工作正常,但是在完成ajax上传后会显示图像预览.有时页面会冻结,并在显示预览后显示.但是我想在选择图像后立即显示预览,并在显示所选图像后,Ajax得到执行.

我正在使用django-crispy-forms(http://django-crispy-forms.readthedocs.org/),我正在尝试使用Jasny Bootstrap文件上传(http://jasny.github.io/bootstrap/javascript.html #fileupload)使我的网页看起来更好.

据我所知,开箱即用的Crispy表单不支持Jasny文件上传.由于我不是很有经验,我试图使用Crispy表单中的任何可用内容而不是创建自己的布局对象.但是,我已经试了好几天了,但它不起作用.

我知道这不是正确的方法,但到目前为止我的尝试是尝试在forms.py中使用Crispy-form的Div来使django生成类似于Jasny文件上传的示例代码.

来自Jasny文件上传的代码:

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
    <div>
        <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
    </div>
</div>

摘自我的forms.py:

       Div(
           HTML("""<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
        <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
        <div class"smalltest">
            <span class="btn btn-file"><span class="fileupload-new">Select …

我有一些像这样的HTML:

<div class="fileinput fileinput-new" data-provides="fileinput">
    <div class="input-group">
        <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
        <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" id="File" name="..."></span>
        <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
</div>

提交表单后,我想从输入中清除文件,但我不知道该怎么做.

Jansy说我可以通过调用.fileinput("clear")来做到这一点,但这不起作用.有没有人这样做过？如果是这样,我该如何清除它？

干杯

我在验证数据掩码时遇到问题。

<strike><input type="text" data-mask="a-99999999-9"></strike>

我需要你去哪里“a”只有字母“VEJPG”可用。

如果有人知道它是如何做到的，谢谢。

我正在使用jasny bootstrap offcanvas navbar(http://jasny.github.io/bootstrap/components/#navmenu-offcanvas),只要点击事件发生在页面的其他地方,它就会关闭.但是,我们有一个Twitter提要,已被修改为在3个不同的Twitter帐户之间移动.为了在它们之间切换,触发了点击.这导致每次推文切换时导航菜单关闭,我似乎无法阻止它.

这是推特滚动代码:

var tabCarousel = setInterval(function() {
    var tabs = $('#twittertab > li'),
        active = tabs.filter('.active'),
        nextone = active.next('li'),
        toClick = nextone.length ? nextone.find('a') : tabs.eq(0).find('a');
    toClick.trigger('click');
}, 5000)

我试过申请preventDefault(),并stopPropagation()到trigger('click'),但我非常缺乏经验与jQuery和我真的只是猜测哪里放这个.

I work on a French version of WindowsNT (I stated that you are not surprised by the names in French like "Mes Documents").

I want to add the "twbs/bootstrap" package in my symfony2 project. Like I've done a hundred times before, I've add the line :

"twbs/bootstrap": "dev-master",

In the "require" section of my "composer.json" file located in the root of my project.

This is a copy of my "composer.json" file :

{
    "name": "symfony/framework-standard-edition",
    "license": "MIT",
    "type": "project",
    "description": …

有人尝试使用jasny-bootstrap扩展名在angularjs上传图像吗？

我使用http://jasny.github.io/bootstrap/javascript/#fileinput

这就是代码

<div class="fileinput fileinput-new" data-provides="fileinput">
            <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
            <div>
              <span class="btn btn-default btn-file">
                <span class="fileinput-new">Select image</span>
                <span class="fileinput-exists">Change</span>
                <span class="fileinput-upload" ng-click="">Upload</span>
                <input type="file" name="...">
              </span>
              <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
            </div>
          </div>

单击上载时,我想上传服务器上选择的文件.

一些忠告？