87,904
社区成员
发帖
与我相关
我的任务
分享[dojo]点击左侧的list，右侧动态滑动到指定位置，而不是瞬间移动
关于dojo中 mobile部分的问题，请教下懂的朋友
模拟iphone的风格，通过js或者控件的属性设置，来实现点击左侧的list，右侧动态滑动到指定位置，而不是瞬间移动过去。
目前我在js中写的是
dojo.connect(div1, "onclick", scrollToStep1);
dojo.connect(div2, "onclick", scrollToStep2);
function scrollToStep1(e) {
window.location.href='#disp_div1';
}
这样，一点击，就瞬间移动过去了，没有滑动的动画。不知道如何能实现我的需求。
html的示范代码
模拟iphone的风格，通过js或者控件的属性设置，来实现点击左侧的list，右侧动态滑动到指定位置，而不是瞬间移动过去。
目前我在js中写的是
dojo.connect(div1, "onclick", scrollToStep1);
dojo.connect(div2, "onclick", scrollToStep2);
function scrollToStep1(e) {
window.location.href='#disp_div1';
}
这样，一点击，就瞬间移动过去了，没有滑动的动画。不知道如何能实现我的需求。
html的示范代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="overflow:hidden;">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test move</title>
<link id='pagestyle' href='../../dojotk/dojox/mobile/themes/iphone/base.css' rel='stylesheet' type='text/css' title='android'>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style>
@import "../../dojotk/dojox/mobile/themes/common/FixedSplitter.css";
</style>
<script type="text/javascript" src="js/formUtil.js"></script>
<script type="text/javascript" src="../../dojotk/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile.FixedSplitter");
dojo.require("dojox.mobile.ScrollableView");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
dojo.ready(init_form);
</script>
</head>
<body>
<div id="fixedsplitter_menu" dojoType="dojox.mobile.FixedSplitter" orientation="H">
<div id="fixedsplitterpane_left" dojoType="dojox.mobile.FixedSplitterPane" style="width:300px;border-right:1px solid black;">
<div id="guide" dojoType="dojox.mobile.ScrollableView" selected="true">
<h1 dojoType="dojox.mobile.Heading" fixed="top"> head left </h1>
<ul id="list" dojoType="dojox.mobile.EdgeToEdgeList" transition="slide" stateful="true">
<li id="div1" dojoType="dojox.mobile.ListItem">div1</li>
<li id="div2" dojoType="dojox.mobile.ListItem">div2</li>
<li id="div3" dojoType="dojox.mobile.ListItem">div3</li>
<li id="div4" dojoType="dojox.mobile.ListItem">div4</li>
</ul>
</div>
</div>
<div id="fixedsplitterpane_right" dojoType="dojox.mobile.FixedSplitterPane" style="position:relative; overflow-x: hidden; overflow-y: hidden; ">
<div id="detail" dojoType="dojox.mobile.ScrollableView" selected="true">
<div id="main">
<div id="form1">
<div id="disp_control_main">
<div id="dojo_tab_container">
<div id="disp_div1" dojoType="dojox.mobile.RoundRect" shadow="true">
<div>
<div> disp_div1</div>
<table>
<tr><td colspan="2">name</td></tr>
<tr><td colspan="2">sex</td></tr>
<tr><td colspan="2">birth</td></tr>
<tr><td colspan="2">adress</td></tr>
<tr><td colspan="2">tel</td></tr>
<tr><td colspan="2">name1</td></tr>
<tr><td colspan="2">sex1</td></tr>
<tr><td colspan="2">birth1</td></tr>
<tr><td colspan="2">adress1</td></tr>
<tr><td colspan="2">tel1</td></tr>
</table>
</div>
</div>
<div id="disp_div2" dojoType="dojox.mobile.RoundRect" shadow="true">
<div>
<div> disp_div2</div>
<table>
<tr><td colspan="2">name</td></tr>
<tr><td colspan="2">sex</td></tr>
<tr><td colspan="2">birth</td></tr>
<tr><td colspan="2">adress</td></tr>
<tr><td colspan="2">tel</td></tr>
<tr><td colspan="2">name1</td></tr>
<tr><td colspan="2">sex1</td></tr>
<tr><td colspan="2">birth1</td></tr>
<tr><td colspan="2">adress1</td></tr>
<tr><td colspan="2">tel1</td></tr>
</table>
</div>
</div>
<div id="disp_div3" dojoType="dojox.mobile.RoundRect" shadow="true">
<div>
<div> disp_div3</div>
<table>
<tr><td colspan="2">name</td></tr>
<tr><td colspan="2">sex</td></tr>
<tr><td colspan="2">birth</td></tr>
<tr><td colspan="2">adress</td></tr>
<tr><td colspan="2">tel</td></tr>
<tr><td colspan="2">name1</td></tr>
<tr><td colspan="2">sex1</td></tr>
<tr><td colspan="2">birth1</td></tr>
<tr><td colspan="2">adress1</td></tr>
<tr><td colspan="2">tel1</td></tr>
</table>
</div>
</div>
<div id="disp_div4" dojoType="dojox.mobile.RoundRect" shadow="true">
<div>
<div> disp_div4</div>
<table>
<tr><td colspan="2">name</td></tr>
<tr><td colspan="2">sex</td></tr>
<tr><td colspan="2">birth</td></tr>
<tr><td colspan="2">adress</td></tr>
<tr><td colspan="2">tel</td></tr>
<tr><td colspan="2">name1</td></tr>
<tr><td colspan="2">sex1</td></tr>
<tr><td colspan="2">birth1</td></tr>
<tr><td colspan="2">adress1</td></tr>
<tr><td colspan="2">tel1</td></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
persuit666 2011-11-08
- 打赏
- 举报
jquery 的animate动画实现 ，主要是用position的left和top
