对于我更重要的选择,Select2中的搜索框非常棒.但是,在一个例子中,我有一个简单的4个硬编码选择.在这种情况下,搜索框是多余的,看起来有点傻.有可能以某种方式隐藏它吗？我在线查看了文档,但在构造函数中找不到任何选项.
当然,我可以使用常规的html选择,但为了保持一致性,我想尽可能使用Select2.
我创建了一个非常简单的测试用例,它创建了一个Backbone视图,将一个处理程序附加到一个事件,并实例化一个用户定义的类.我相信通过单击此示例中的"删除"按钮,一切都将被清除,并且不应有内存泄漏.
代码的jsfiddle在这里:http://jsfiddle.net/4QhR2/
// scope everything to a function
function main() {
function MyWrapper() {
this.element = null;
}
MyWrapper.prototype.set = function(elem) {
this.element = elem;
}
MyWrapper.prototype.get = function() {
return this.element;
}
var MyView = Backbone.View.extend({
tagName : "div",
id : "view",
events : {
"click #button" : "onButton",
},
initialize : function(options) {
// done for demo purposes only, should be using templates
this.html_text = "<input type='text' id='textbox' /><button id='button'>Remove</button>";
this.listenTo(this,"all",function(){console.log("Event: "+arguments[0]);});
},
render : …如果我打开一个模态对话框,通过Twitter Bootstrap,我注意到它将页面的所有html内容(即,在container)中向左推了一点,然后在关闭之后将其恢复正常.但是,这仅在浏览器宽度足够大而不能在"移动"(即最小)媒体查询上时才会发生.最新版本的FF和Chrome(未测试其他浏览器)会出现这种情况.
你可以在这里看到问题:http://jsfiddle.net/jxX6A/2/
注意:您必须增加"结果"窗口的宽度,以便切换到"med"或"large"媒体查询css.
我根据Bootstrap网站上显示的示例设置了页面的HTML:
<div class='container'>
<div class='page-header'>
<h4>My Heading</h4>
</div>
<div id='content'>
This is some content.
</div>
<div class='footer'>
<p>© 2013, me</p>
</div>
</div>
我猜这不应该发生,但我不确定我做错了什么.
编辑:这是一个已知的错误,有关更多(和最新)的信息,请参阅:https://github.com/twbs/bootstrap/issues/9855
注意:此问题是从其原始版本进行了大量编辑.这个问题已经大大简化了.
以前曾多次提出类似的问题,不同的形式 - 例如,
但是,这个问题涉及Chrome功能的一个非常具体的方面,所以在这方面它是完全不同的.
从过去的答案来看,似乎让Chrome提示密码保存的最佳方法是将表单提交给虚拟iframe,同时实际通过AJAX登录:示例.这对我来说很有意义,所以我现在已经花了几天的时间来摆弄一些示例代码.但是,Chrome在这方面的行为对我来说没有意义.完全没有.因此问题.
出于某种原因,如果在onDomReady之后/之后存在提交到虚拟iframe的表单,则Chrome不会提示您保存密码.
可以在这里找到一个jsfiddle ,但它没什么用处,因为你必须dummy.html在本地创建才能看到所描述的行为.因此,最好的方法是将完整的html复制到您自己的html中index.html,然后创建一个dummy.html文件.
这是完整的代码index.html.这三种方法都突出显示为(1),(2),(3).仅(2)确保提示用户保存其密码,并且(3)不起作用的事实对我来说特别困惑.
<html>
<head>
<title>Chrome: Remember Password</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(function(){
function create_login_form()
{
$('#login_form').html(
"<input type='text' name='email'>" +
"<input type='password' name='password'>" +
"<input id='login-button' type='submit' value='Login'/>");
}
// (1) this does not work. chrome seems to require time after …如果对这个问题有明显的答案,请原谅我,但我找不到它.我正在考虑切换到jQuery 2,虽然我不关心支持旧浏览器,但我希望能够告诉用户使用不受支持的浏览器,他们无法使用该网站.
我在这里(http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/)看到你可以使用条件注释在不同版本的IE上分支.js文件,但是我相信jQuery 2.0也会支持其他一些浏览器,而不仅仅是IE,所以我认为不会单独使用它[ 编辑:这是错误的,请参阅下面的更大编辑].
在一个理想的世界中,我将切换到jQuery 2,然后在jQuery告诉我它不支持浏览器时调用一个javascript函数.有没有一种直截了当的做法让我失踪？
谢谢.
编辑:
我遇到了这篇文章(http://bugs.jquery.com/ticket/13404),它指示我:http://jquery.com/browser-support/.事实证明,就支持而言,jQuery 2仅与IE浏览器上的jQuery 1.9不同.因此,或许更好的问题是如何检测jQuery不支持的浏览器(通常,不仅仅是版本2) - 我已经更新了问题标题.
EDIT2:
由于特征检测是此问题最常推荐的方法,因此jQuery支持方法在此处看起来很相关(http://api.jquery.com/jQuery.support/).然而,依赖它似乎也很不可思议(因为它可以在没有通知的情况下改变).
我认为这会产生关键问题.我怎么知道jQuery的功能是什么,或者不受旧浏览器的潜在不支持？例如,如果有人来与Firefox的4版本,旧版本的网站,我不会有任何的想法有什么特点我需要测试.如果jQuery可以提供某种完全支持的功能测试,就像这样对于HTML5:http://html5test.com/
EDIT3:
好的,所以使用条件包含语句(在下面的答案和jQuery的网站上突出显示),您可以处理旧版本的IE.但是,对于其他浏览器,它有点棘手.既然你不能依赖jQuery来告诉你关于浏览器对函数x,y或z的支持,我的方法就是查询底层的javascript.如果要查询基于CSS的支持,可以使用modernizr.对于基于javascript的支持,这是我用来检测其他浏览器的SUPER旧版本的方法:
function browser_ok() {
if (
( !Array.prototype.indexOf ) ||
( !Array.prototype.forEach ) ||
( !String.prototype.indexOf ) ||
( !String.prototype.trim ) ||
( !Function.prototype.bind ) ||
( !Object.keys ) ||
( !Object.create ) ||
( !JSON ) ||
( !JSON.stringify ) ||
( !JSON.stringify.length …注意:据我所知,其他库(例如,Marionette)可以大大简化基于视图的问题.但是,我们假设这不是一个选项.
假设我们有一个给定"记录"(即模型)的父视图.该父视图有两个子视图,一个用于显示记录的属性,另一个用于编辑它们(假设在这种情况下编辑就地不合适).到目前为止,每当我需要删除/显示子视图时,我确实调用remove了传出视图和new传入视图,因此我每次都在销毁/创建它们.这很简单,易于编码/管理.
然而,似乎有必要弄清楚是否有任何可行的替代方法(看似默认的)删除/创建方法 - 特别是因为之前已被问过几次,但从未完全回答(例如,使用Backbone交换视图？)
所以我一直试图弄清楚如何让两个子视图在父视图中共享一个元素,从而阻止我每次都必须remove和new它们一起.当一个人需要活动时,它会被渲染而另一个被"沉默"(即,不响应事件).因此,它们会不断更换,直到删除父视图,然后将它们全部删除.
我想出的可以在这里找到:http://jsfiddle.net/nLcan/
注意:交换是在RecordView.editRecord和中执行的RecordView.onRecordCancel.
虽然这似乎工作得很好,但我有一些担忧:
(1)即使在"非活动"视图中事件绑定被静音,两个视图是否可能存在设置相同元素的问题？只要呈现"活动"视图,它似乎不应该是一个问题.
(2)当两个子视图remove调用(即Backbone.View.remove)时,它调用this.$el.remove.现在,当删除第一个子视图时,这实际上将删除它们共享的DOM元素.因此,当remove在第二个子视图上调用时,没有要删除的DOM元素,我想知道是否这可能使该子视图难以清理自己 - 特别是如果它本身已经创建了许多DOM元素,那么在第一个子视图被渲染时写入....或者如果涉及子视图...... 似乎可能存在关于内存泄漏的潜在问题.
抱歉,我知道这有点令人费解.我在知识库的边界是正确的,所以我不完全理解这里涉及的所有潜在问题(因此问题).但我确实希望有人处理类似的问题,并能就这一切提供明智的意见.
无论如何,这里是完整的(简化示例)代码:
// parent view for displaying/editing a record. creates its own DOM element.
var RecordView = Backbone.View.extend({
tagName : "div",
className : "record",
events : {
"click button[name=edit]" : "editRecord",
"click button[name=remove]" : "removeRecord",
},
initialize : …我们假设这是在jQuery中执行的:
$.ajax({
url : 'ajaxcall.php',
data : { 'data' : { ary : [1,2,3,3,4,5], txt : "ima let u finish" } },
dataType : 'json',
type : 'post',
timeout : 10000
});
而ajaxcall.php包含:
$return_obj = array();
$return_obj['ary'] = array(9,8,7,6,5);
$return_obj['txt'] = "ok then";
echo json_encode($return_obj);
die();
我期待发生以下情况(由于数据包丢失,连接问题等):
但是,我真正担心的是这样的情况:
这些情况可能吗？
我已经将这个问题分解为可能的最小例子(即,它只是为了证明问题,而不是必然代表一个真实的场景).
假设我有一个父视图(这里是"MainView"),它包含一个子视图(这里是"SubView").如果,在任何时候,我需要重新渲染父视图(从而重新呈现子视图),我在子视图中丢失事件绑定,尽管调用delegateEvents.
可以在这里找到一个jsfiddle:http://jsfiddle.net/ya87u/1/
这是完整的代码:
var MainView = Backbone.View.extend({
tagName : "div",
initialize : function() {
this.subView = new SubView();
},
render : function() {
this.$el.html(this.subView.render().$el); // .html() breaks binds
this.subView.delegateEvents(); // this re-establishes them
return this;
}
});
var SubView = Backbone.View.extend({
tagName : "div",
events : {
"click .button1" : "onButtonPress"
},
onButtonPress : function() {
alert("Button pressed");
},
render : function() {
var html = "<button class='button1'>Button1</button>";
this.$el.html(html);
return this;
}
});
var …我试图找出btn-group在一个元素中居中Bootstrap按钮组(即)的最佳方法.所以,例如,如果你有这个:
<div id='toolbar'>
<div class="btn-group">
<button type="button" class="btn btn-default">Command1</button>
<button type="button" class="btn btn-default">Command2</button>
</div>
</div>
我如何确保btn-group始终居中toolbar(假设它可以适合)？我提出的方法如下:我div绕过它btn-group,找出它的宽度btn-group,然后在包装器上设置该宽度margin:0 auto.但是,我不喜欢这种方法有两件事:
(1)btn-group通过在包装纸上设置边框并不断减小它直到找到合适的宽度,需要反复试验才能确切知道其宽度.
(2)如果内容的宽度改变了一个像素(例如,按钮文本改变,或者由于它们的字体设置等在不同的机器上看起来不同),那么它不再居中而第二个按钮下降一条线.当然,你可以在这里留下几个像素的余地,但是这两个按钮实际上并不是首先完全居中.
肯定有更好的办法.有任何想法吗？这是我的方法(jsfiddle):
HTML:
<div id='toolbar'>
<div class='wrapper'>
<div class="btn-group">
<button type="button" class="btn btn-default">Command1</button>
<button type="button" class="btn btn-default">Command2</button>
</div>
</div>
</div>
css:
#toolbar {
width: 100%;
max-width: 700px;
margin: 10px;
border: 1px solid black;
padding: 10px;
}
#toolbar .wrapper {
width: 197px;
margin: …我正在尝试创建一个标签,我可以写出程序的当前状态 - 例如:
"读数据......"
"处理数据......"
"完成."
如果文本到达标签的底部,那么它应该自动滚动文本,以确保它显示最新消息(就像控制台窗口一样).我一直在摆弄标签和卷轴超过一个小时......但无济于事.我尝试将我的标签放在一个scrollarea(这似乎是这里建议的相关答案) - 这段代码是从Qt Designer生成的:
class Ui_Dialog(object):
def setupUi(self, Dialog):
Dialog.setObjectName(_fromUtf8("Dialog"))
Dialog.resize(218, 137)
self.frame = QtGui.QFrame(Dialog)
self.frame.setGeometry(QtCore.QRect(209, 399, 161, 111))
self.frame.setFrameShape(QtGui.QFrame.StyledPanel)
self.frame.setFrameShadow(QtGui.QFrame.Raised)
self.frame.setObjectName(_fromUtf8("frame"))
self.scrollArea = QtGui.QScrollArea(Dialog)
self.scrollArea.setGeometry(QtCore.QRect(10, 10, 201, 121))
self.scrollArea.setWidgetResizable(True)
self.scrollArea.setObjectName(_fromUtf8("scrollArea"))
self.scrollAreaWidgetContents = QtGui.QWidget()
self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 199, 119))
self.scrollAreaWidgetContents.setObjectName(_fromUtf8("scrollAreaWidgetContents"))
self.label = QtGui.QLabel(self.scrollAreaWidgetContents)
self.label.setGeometry(QtCore.QRect(15, 10, 151, 101))
self.label.setWordWrap(True)
self.label.setObjectName(_fromUtf8("label"))
self.scrollArea.setWidget(self.scrollAreaWidgetContents)
self.retranslateUi(Dialog)
QtCore.QMetaObject.connectSlotsByName(Dialog)
我的主.pyw文件然后包含:
import sys
from gui_test import *
class MyForm(QtGui.QDialog):
def __init__(self,parent=None):
QtGui.QWidget.__init__(self,parent)
self.ui = Ui_Dialog()
self.ui.setupUi(self)
self.ui.label.setText("Warning: When passing a QString to the …我有一个非常简单的jQuery插件,我已经编写并放在github上了.我正在使用Github for Windows和网站本身来管理项目.
不幸的是,如果我尝试通过链接包含我上传的任何文件.js或.css文件,Raw由于MIME类型的原因,它在我的浏览器中会失败plain/text.
所以,在过去的几个小时里,我一直在研究如何通过github获取文件的副本,人们(包括我自己)可以链接到这些文件.第一步似乎是创建一个项目页面(gh-pages分支)......我已经掌握了很多东西.
但是,到目前为止我发现的所有材料都要求你拥有一个基于UNIX的系统,或者做一些基于控制台的技巧:
现在,必须有一种简单的方法来简单地使这些源文件可用.我经历了创建"项目页面"的自动化步骤,现在我遇到了另一个声称是在"主"分支后面的分支,但我看不出接下来应该做什么.我甚至不清楚为什么在地球上我需要建立另一个分支.整个事情似乎远比它需要的复杂得多.
所以,回顾一下:
如果有人能帮助我解决这个问题,我会很感激.此外,我期待很多其他人也会.
编辑:这是一个着名的Github项目的例子,它的文件可以通过Github获得:
选择2:http: //ivaynberg.github.io/select2/select2-3.4.2/select2.js
编辑2:好的,从概念上讲,我现在明白为什么我必须创建一个单独的分支,以便共享文件 - 因为Github的源控制方面并不意味着充当CDN,项目页面只是提供一个公共网站您可以在哪里放置文件.所以问题现在变成:如何将我的文件从主分支放入gh-pages分支？我现在并不担心自动化它或任何东西,我想要的只是访问目录结构,所以我可以在那里放置文件.我尝试过同步并重新同步我的分支与Github Windows,但它告诉我,没有什么可以从gh-pages分支获得,即使它是"10提交落后".到底是怎么回事？
编辑3:添加了我自己的答案,为我提出的(到目前为止).
jquery ×8
javascript ×5
backbone.js ×4
css ×3
ajax ×1
github ×1
html ×1
jquery-2.0 ×1
json ×1
memory-leaks ×1
modal-dialog ×1
php ×1
pyqt ×1
pyqt4 ×1
python ×1
qscrollarea ×1
qt-designer ×1