我想将一个div添加到另一个div中.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
这是我目前使用的CSS.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
正如你所看到的,我现在使用的方法取决于宽度和高度的值innerDiv.如果宽度/高度发生变化,我将不得不修改margin-top和值.margin-left是否有任何通用的解决方案,我可以用它来居中,innerDiv无论是什么它的大小？
我发现使用margin:auto可以将innerDiv水平对齐到中间.但是垂直中间的那个呢？
我正在尝试使用以下代码创建一个简单的backbone.js视图:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<!--<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
var BodyView = Backbone.View.extend({
el:$('body'),
initialize : function() {
console.log("view init");
}
});
new BodyView();
</script>
</body>
</html>
但
我得到一个错误期望在instanceof检查中的函数,但得到[对象对象]
在这条线上 - new BodyView();
如果我使用较旧版本的backbone.js(0.3.3),此代码正常工作
知道为什么会发生这种错误以及如何解决它吗？.提前谢谢.
PS - 我一直主要关注http://backbonetutorials.com/what-is-a-view/和http://documentcloud.github.com/backbone/#View创建这个示例骨干js应用程序.
这是我的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script>
$('#home, #page2, #page3').live('pagebeforeshow',function(event){
$('#' + $(this).attr('id') + '_link').addClass('ui-btn-active');
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
Home Page
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="custom" class="ui-btn-active" id="home_link">Home</a></li>
<li><a href="#page2" data-icon="grid">Second page</a></li>
<li><a href="#page3" data-icon="star">Third page</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" …以下是我的index.html文件中的usemin构建配置示例
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
对于开发版本,我不想缩小脚本,我希望每个模块都有自己的js文件.所以index.html运行后会是
<script src="js/one.js"></script>
<script src="js/two.js"></script>
对于生产版本,我想缩小脚本并将它们连接成一个文件.所以index.html就是
<script src="js/myApp.js"></script>
我尝试了以下,但它不起作用:
<!-- build:myApp js/myApp.js -->
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- endbuild -->
并运行像这样的use-min任务(prod将在prod任务中设置为true,在dev任务中设置为false) -
usemin({
myApp: prod?[uglify({mangle:true})]:'',
js: prod?'':[uglify({mangle:false})]
}).
我可以保留两个index.html文件并管理它.但我想知道这可以用一个index.html实现吗？
在此先感谢您的帮助.
这是我试图在黑莓模拟器浏览器(OS V6.0)中运行的代码.
<html>
<body>
<script type="text/javascript">
var d = Date.parse("Tue Oct 25 2011 18:33:17 GMT+0230");
var d1 = Date.parse("Tue Oct 25 2011 18:33:17");
document.write(d+"::::::"+d1);
</script>
</body>
</html>
每当GMT信息存在于我传递给parse方法的字符串中时,它返回NaN,而如果GMT信息不存在则返回一个值.但是我不能从我的字符串中删除GMT部分.
知道为什么会失败吗？请注意它只发生在黑莓手机上.
提前致谢.
这是我正在使用的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content" data-theme="b">
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="custom" class="ui-btn-active" >Home</a></li>
<li><a href="#first" data-icon="grid">Page1</a></li>
<li><a href="#" data-icon="star">Page2</a></li>
<li><a href="#" data-icon="arrow-r" data-iconpos="notext"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
你可以在这里看到它 - http://jsfiddle.net/PJWQr/
我面临的问题是,在我使用的最后一个按钮中data-iconpos="notext",交互区域的高度小于导航栏中的其他按钮.
请告诉我如何解决这个问题.
我正在使用flex 4.6和air 3.1为android开发AIR应用程序.在应用程序中我有一个视图,其中有一个textinput和一个搜索按钮.输入一些文本并单击搜索按钮将进入结果视图.从结果视图用户可以通过单击后退按钮返回到searchview.SearchView destructonPolicy保持为never和我navigator.popView()用来返回searchview.问题是当我回到搜索视图时textinput是空的,其中它应该显示txt是以前键入.但是当焦点在textnput上时,文本出现.我希望一旦再次显示该视图就会显示该文本.不知道为什么会出现这个问题
PS-当我在Android模拟器(OS 2.3.3)中检查aftr installng apk时发生这个问题.我没有安检设备来检查这个.所以不确定它是否只是模拟器的问题.如果我使用flex 4.5.1sdk这个问题没有发生
这是代码
主要mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.HomeView">
</s:ViewNavigatorApplication>
HomeView.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" destructionPolicy="never">
<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
navigator.pushView(ResultView);
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<s:TextInput prompt="Enter some text"/>
<s:Button label="Search" click="button1_clickHandler(event)"/>
</s:View>
ResultView.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="ResultView">
<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
navigator.popView();
}
]]>
</fx:Script>
<s:navigationContent>
<s:Button label="<" …html ×3
html5 ×3
jquery ×3
css3 ×2
javascript ×2
air ×1
apache-flex ×1
backbone.js ×1
blackberry ×1
css ×1
flex4.6 ×1
gulp ×1
gulp-usemin ×1