问题标签 [jasny-bootstrap]

我在侧边栏使用Jasny Bootstrap，但我想让主容器不被推到窗口的右侧，而是被挤进去。

我注意到这this.slide(elements, offset, $.proxy(complete, this))条线OffCanvas.prototype.show导致它被推到一边。

我能够让它“挤压”，但动画不再起作用。我在以下位置添加了这些行OffCanvas.prototype.slide：

这是一个jsfiddle：https ://jsfiddle.net/e02e1rwp/1/

问题背景：

我有一个有 2 个视图的 Angular 应用程序，使用 UIRouter 我交换了 URL 也被路由的视图

在我的观点中，我正在使用 Jasny Bootstrap 生成一个画布外菜单“推送”菜单，如图所示：

https://codepen.io/rugor/pen/eiyzh

当菜单显示时，这将添加到 body 标签的样式，如下所示：

问题：

我有以下 Index.html 视图，它用作要注入的每个应用程序页面的主要 ui-view 容器：

如果我浏览到我的主页，即 Home.cshtml，我会看到以下页面：

主页的正文样式：

然后我浏览到 Update.html 页面并显示 Jansy Off Canvas 菜单：

请注意，Index.cshtml 页面的 body 标记添加了以下样式，用于显示关闭画布菜单：

这就是问题开始的地方。

如果我现在单击浏览器上的后退按钮并显示Jansy 关闭画布菜单，则不会从 body 标记中删除 body 样式，如下所示：

身体风格仍然适用：

我应该如何克服这个问题？当用户单击浏览器上的后退按钮时，我可以删除 ui-view Index.html 中 body 标记上的任何样式吗？如果有怎么办？

我理解为什么会发生这种情况，如果用户关闭画布菜单并单击返回，则不会发生此问题。

由于主体在视图之间共享，我需要一种在单击后清除样式的方法，以有效地将其重置为空。

我在反应应用程序中包含了 jasny 的 bootstrap offcanvas 菜单。虽然我可以在jasny 的示例中通过控制台触发和隐藏打开的菜单，但如下所示：

但是在我的反应应用程序中做同样的事情会抛出错误：Uncaught TypeError: $(...).offcanvas is not a function(...)

我猜它与javascript关闭有关。还有其他方法可以触发吗？

我正在尝试将 jasny 引导输入掩码应用于使用敲除进行数据绑定的文本输入。但是，直到您单击输入框，才会显示数据掩码。我不确定为什么。我希望输入掩码立即显示。这是小提琴。 http://jsfiddle.net/LkqTU/31938/

这是html

这是javascript。

如何将 jasny-bootstrap 导入到我的 ES6 类中？

ES6：

当我尝试用 gulp 编译它时出现错误：

我确定我已经在其 npm 页面之后使用 npm 安装了它：

任何想法为什么以及如何解决这个问题？

编辑：

我设法使用完整路径手动加载它：

但它在没有错误提示的情况下不起作用。

编辑2：

我试图用以下方法粘合它：

但仍然没有运气。错误：

未捕获的类型错误：无法读取未定义的属性“选项”

整个代码：

我正在开发一个网站http://maypoprestaurant.com/location

在移动设备（ < 768px ）上，通过汉堡图标折叠画布外导航后，单击其中一个链接后，我需要关闭画布外导航。

任何帮助将不胜感激，因为我在这里拉头发。：X

// 导航代码

我在标题中添加了这个 Javascript：

**更新/编辑**

我已经成功地让移动侧边栏在点击时隐藏了这个代码：

现在的问题是汉堡图标不知道我已经这样做了，所以需要点击 2 次才能打开菜单，而不仅仅是一次。我需要以某种方式告诉该事件重置。

有什么想法吗？

我在模态中使用 AngularJS 中jasny-boostrap 的文件输入，所以我也使用了jasny-bootstrap-angular。我有两个疑问：

1. 当我单击按钮打开模型时，我可以选择我想要的文件。如果我选择一个文件并关闭模型，当我再次打开模型时，该文件将处于数据预览中，它不会被清理。当我单击按钮打开模式时，我想在我的 angularjs 中传递空值（或重置）此图像预览（文件输入预览缩略图）；

2. 如果单击调用模态的按钮，我想自动将图像从我的 Web 服务获取到数据预览，并自动将按钮更改为“删除”和“更改”，然后我得到一张图片来服务。

我的 HTML：

如果我单击“显示输入”，我可以看到图像二进制文件，我使用了这个 angularjs：

我正在使用这个 HTML 代码和我的 angularjs 来查看来自 Web 服务的图像，并且一切正常：

我正在使用 Jasny 的 Bootstrap 显示图像预览并上传。

HTML结构如下所述。

因此，使用上面的代码片段，在浏览完选择的图像后，它会立即显示图像的预览，而无需将其上传到服务器上。它在“fileinput-preview thumbnail”div 中创建一个 img 标签，如下所示。

我在同一个表单中有一个“添加另一个图像”按钮，它创建另一个图像上传块（它添加了上面的另一个 div 块）。

现在，我想整合图像尺寸（即宽度和高度的尺寸）验证。最小宽度应为 600 像素，最小高度应为 700 像素。如果用户要上传不满足最小宽度和高度的图像，则不会显示预览。相反，可以显示一条消息，或者可以将标签文本更改为不同的颜色。

所以，我尝试使用下面的代码

我试图从http://www.jasny.net/bootstrap/2.3.1/javascript.html#fileupload和https://coderwall.com/p/avyx3a/jasny-bootstrap-file-upload-with寻求帮助-existing-file，但没​​有得到它。有没有办法做到这一点？

我尝试使用带有 wp-bootstrap-navwalker 的 wordpress 实现 Jasny Bootstrap Off Canvas 菜单。幻灯片效果很好，但它是空的。你可以在这里看到 Jasny Bootstrap Off Canvas 菜单

这是我的代码：

我认为我的问题来自菜单类、容器类和容器 id。

谢谢。

我无法使用Jasny Bootstrap将画布外与模态功能结合起来

这些是我采取的步骤：

1.我使用 jasny bootstrap 创建了一个画布外菜单，它按预期工作，仅Off Canvas

2.但是，当我添加模态功能时，它使画布外菜单在将屏幕拉伸到 992px 宽度后消失。此外，我无法通过单击元素外部来关闭模式。模态功能 + 非画布

我遇到的问题是data-toggle="modal"或data-toggle="offcanvas"我只能使用其中一个。有没有另一种方法来添加两个数据切换？或者更好：

我必须使用哪些选项才能同时使用具有模态功能的画布菜单？

先决条件：

• Bootstrap.min.css
• Bootstrap.min.js
• jasny-bootstrap.css
• jasny-bootstrap.js

HTML

CSS：