Tag: twitter bootstrap 3

TypeError：$（…）。typeahead不是RequireJS的函数: 我正在使用RequireJS来加载我的依赖项。这是我的配置文件： requirejs.config({ baseUrl: “/js/dist”, paths: { jquery: “../bower_components/jquery/dist/jquery.min”, bootstrap: “../bower_components/bootstrap/dist/js/bootstrap.min”, typeahead: “../bower_components/bootstrap3-typeahead/bootstrap3-typeahead.min”, validator: “../bower_components/bootstrapvalidator/dist/js/bootstrapValidator.min”, openlayers: “../vendor/openlayers/OpenLayers” }, shim: { bootstrap: { deps: [“jquery”] }, validator: { deps: [“bootstrap”] }, openlayers: { exports: “OpenLayers” } } }); 我的主要应用程序文件的一部分： define([“jquery”, “bootstrap”, “openlayers”, “./popup”, “typeahead”], function($, Bootstrap, OpenLayers, Popup) { (…) $(“#textSearch”).typeahead(“destroy”); (…) }); 使用Firebug进行检查，我可以看到所有依赖项都已加载。但是在我的搜索文本框上调用typeahead()输出以下消息： “TypeError: […]

Bootstrap 3.3.2所有视口尺寸的中心模态，带或不带垂直滚动条: 我得到的印象是Bootstrap 3.3.2模式仍然需要大量的工作。不仅是令人讨厌的错误Open模式正在向左移动身体内容＃9855 仍然没有解决，请参阅此处修改滚动条检查，停止静态导航class次＃13103 （评论在底部），不，甚至是直播BS上的默认模式网站没有居中，我认为错误＃9855（上面链接）也导致此Modal隐藏了垂直浏览器滚动条＃1081 。如果您将BS站点检查为代码示例Bootstrap模态可选大小，请单击大型或小型模式演示，其中video宽度为“似乎”居中。虽然不是。当调整浏览器的大小以使模态几乎填满视口宽度时，可以清楚地观察到模态倾向于浏览器的左侧，我假设由于Bootstrap搞乱滚动条宽度计算或者通常与滚动条混乱并且它的宽度。现在有两种选择，要么使用不是来自BS的模态插件（有很多模态插件完全在视口中水平和垂直居中以及响应），或者，不知何故开始将一些工作放入BS模态并解决这些问题。我仍然试图使用BS默认模态并尝试将其居中（在这种情况下是水平）在所有视口大小上，考虑到是否显示垂直滚动条，具体取决于模态的高度。从这个漂亮的示例中心百分比宽度/高度元素可以看出，可以使元素居中，甚至在视口中具有百分比值作为宽度和高度。为了解决我的问题，Chris Coyier展示了这项技术吗，在这里你有一个示例代码， Codepen：百分比大小并且仍然以 BS 3.3.2 为中心工作？ div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 我确信有很多开发人员都有这个完全相同的问题，只需将模态居中放在所有视口大小上，无论是否有垂直滚动条。 Chris的例子适用于垂直滚动条。那么将.modal对话框包含在一个div中，而Chris的中心技术最终会摆脱这个和随后的错误？在有或没有显示垂直滚动条的情况下，如何将BS 3.3.2模态置于所有视口大小的中心，具体取决于模态的高度？说实话，我真的没有对BS模式感到好笑，乍一看它看起来一切都看起来很顺利但是如果你真的开始用它开发那么有很多问题出现并且已经很老了，它有点沮丧我，所以请原谅我这里可能刺耳的语调。我只是真的想要使用BS，而不是花时间如何解决其他插件似乎完全掌握几行代码的问题。任何帮助，或技术（包括代码）真正在视口中水平居中模式真的非常感谢，使用CSS或jQuery。谢谢您的帮助。

Twitter TypeAhead.js没有更新输入: 我在我的bootstrap 3项目中使用Twitter的TypeAhead.js库。这看起来很棒，但是我的输入字段很麻烦。一旦我开始填写，就会触发预先输入并相应地显示建议框。但是，在选择任何条目后，输入字段根本不会被填充。有谁可以帮助我吗？这是我现在正在使用的代码： HTML： Javascript代码 – 激活字段： $(‘.typeahead’).typeahead({ name: ‘parceiro’, remote: ‘../api/index.php/parceiro/busca/%QUERY’, template: [ ‘{{RAZAO_SOCIAL}}’, ‘{{DESCRICAO_TIPOPARCEIRO}}’, ‘{{CNPJ}}’ ].join(”), engine: Hogan }); 最后，从服务器返回的JSON： [{ “ID”:”17″, “TIPOPARCEIRO”:”C”, “DESCRICAO_TIPOPARCEIRO”:”CLIENTE”, “RAZAO_SOCIAL”:”VINICIUS SOARES BATISTA”, “CNPJ”:”12344123213123″ }] 提前致谢！ [编辑] 感谢@ bass-jobsen，我已经能够部署它了。正如他所说，秘密在于TypeAhead提供的filter（）函数。贝娄是这种function的书面代码。 … $(‘#txtCliente’).typeahead({ header: ‘Clientes’, template: [ ‘{{RAZAO_SOCIAL}}{{CNPJ}}’, ].join(”), limit: 3, remote: { url: ‘../api/index.php/parceiro/busca/%QUERY’, […]

在btn点击上创建一个带有自动填充输入字段的模态窗口: 尝试将json代码分配给field.values时遇到了问题。一切正常[生成器，id查找]只是我不知道它为什么不将值分配给字段。它的工作原理如下。我有一个按钮，当点击一个模态打开时，id在正确显示我只需要一个填充on.modal的动作用json.value / name = input加载字段。值。 $(‘.getUserEditID’).on(‘click’, function (event) { $(‘.userId’).text($(this).data(‘useredit’)); //$(‘input[name=”id”]’).val($(this).data(‘useredit’)); $(‘#editModal’).modal(); $.ajax({ type: “GET”, url: “getuserdata.php?id=” + $(this).data(‘useredit’), success: function(data) { // data is the text returned from your php script $(‘input[name=”username”]’).val(data.username); $(‘input[name=”password”]’).val(data.password); //$(‘input[name=”name”]’).val(data.name); // You don’t seem to have name in your script?? $(‘input[name=”surname”]’).val(data.surname); $(‘select[name=”level”] option[value=”‘ + data.level + ‘”]’).prop(‘selected’, […]

Bootstrap轮播忽略数据区间属性: 这是我的标记： Slide 1 … Slide 2 … Slide 3 … 我正在使用bootstrap v3.0.3，但是在加载页面后轮播仍然开始滚动。我也试过包括： $(function () { $(“.carousel”).carousel({ interval: false }); }); 我已经使用和没有data-interval属性完成了这一切，但都无济于事。加载页面后，轮播会自动开始滚动。我已经看到了有关此问题的其他问题，但它们都是指旧版本，并暗示它现在已经修复。有什么想法吗？

在具有特定视口的设备上显示完整（桌面视图）网站（例如，低于320px）？: 我一直在完全响应的网站上完成我的工作（使用Bootstrap 3框架），最近客户端询问是否可以在较小的设备上拥有该网站的完整（桌面）版本（例如，低于320px））。由于我之前从未遇到过这样的要求，我想知道是否有任何法律解决方法，例如在头部添加一个额外的视口元标记，如下所示：如果有任何已知的（合法的）方法来实现这一点（无论是在JS / jQuery还是CSS中），我很高兴知道您对此的看法。谢谢！

Bootstrap表和分页分页插件第一页最后一页: 我有以下bootstrap插件用于分页表行/项。 Bootply示例使用当前版本，我可以转到上一页和下一页（一次一页）如何实现另外两个按钮< first and last >将进入分页的第一页或最后一页？另一件事是当我滚动到最后几页并点击任何最后一页时，视图不再显示页面数量而是显示单页面。它应始终显示设置中设置的页面数量。如果我有20页，我想一次看到5页，当我走到最后17 18 19 20然后点击它们中的任何一个然后我看不到最后五个而只是我点击的那个。

使用jQuery cookie或本地存储保存.addClass: 我每次保存样式表时都试图保存.addClass，以便按钮记住用户可以打开/关闭选项。我的简单html： off on 这是我的代码： $(document).ready(function() { if ($.cookie(“css”)) { $(“#bg”).attr(“href”, $.cookie(“css”)); } $(“#btn-switch button”).click(function() { $(“#bg”).attr(“href”, $(this).attr(‘data-color’)); $(“#btn-switch .active”).removeClass(“active”); $(this).addClass(“active”); $.cookie(“css”, $(this).attr(‘data-color’), { expires: 365, path: ‘/’ }); return false; }); }); 如何使用相同的cookie来保存.active类？我也会使用本地存储所有这些，但我不知道如何启动我上面实现的代码片段

按顺序加载图像: 我正在构建一个包含大量大图像（10-40，~300kb / img）的网站，并寻找一种顺序加载（不显示！）的方式。我已经有一块js，一旦前3个图像被加载就会显示并触发旋转木马（其他的将在前3个显示时加载到背景上），因为图像将异步加载，它没有多大用处。这样，有没有一种方法只在加载前一个图像时加载图像？这是我的HTML。我的js： var numImagesLoaded = 0; function incrementAndCheckLoading(){ numImagesLoaded++; if(numImagesLoaded == 4){ // trigger carousel } } image1 = new Image(); image1.src = “http://cccctanger.com/test/img/1.jpg” image1.onload = incrementAndCheckLoading; image2 = new Image(); image2.src = “http://cccctanger.com/test/img/2.jpg” image2.onload = incrementAndCheckLoading; image3 = new Image(); image3.src = “http://cccctanger.com/test/img/3.jpg” image3.onload = incrementAndCheckLoading; image4 = new […]

使用JQuery事件在Bootstrap幻灯片操作后显示文本: 我想在Bootstrap中为每个图像（我有三个幻灯片）完成幻灯片操作后，在链接下方显示一个链接。我试图使用slid.bs.carousel方法，它不起作用。这是我正在使用的JQuery，如果您有任何建议，请告诉我 – 包含轮播的div是#sticksCarousel（而不是默认的’#myCarousel’） $(‘#sticksCarousel’).on(‘slid.bs.carousel’, function() { alert(“BALLS”); }); 谢谢！编辑：这是我对旋转木马的HTML … HEY! $(‘.carousel’).carousel({ interval: 4000 }) $(‘#sticksCarousel’).on(‘slid.bs.carousel’, function() { alert(“BALLS”); }); 基本上我要做的是在每次旋转木马幻灯片操作完成时，在id“sticksCarouselMessage”下获取段落，现在它只是设置为’HEY’。我正在使用javascript警报function作为测试，以查看引导方法slid.bs.carousel是否正在我的网站上工作，现在它不是。更新：这里我对所有HTML内容所做的更改……它仍然不起作用 Untitled Document body { background:url(img/body_bg.png) repeat; } .sticksNav { height:70px; } .headerImg{ margin-bottom:20px; } $(document ).ready.(function() { $(‘.carousel’).carousel({ interval: 4000 }); $(‘#sticksCarousel’).on(‘slid.bs.carousel’, function() { $(“#sticksCarouselMessage”).text(“It worked!”); }); }); […]