AppCan页面跳转和表单提交的实现方法
使用a标签实现页面跳转最常用的方法是使用a标签来实现页面的跳转。通过设置a标签的href属性,可以指定跳转到的页面地址。在AppCan中,给a标签添加class"uinvisible"可以去除下划线。
使用a标签实现页面跳转
最常用的方法是使用a标签来实现页面的跳转。通过设置a标签的href属性,可以指定跳转到的页面地址。在AppCan中,给a标签添加class"uinvisible"可以去除下划线。
优点:
- 简单,代码量少
缺点:
- 链接的颜色是蓝色的,用户体验差
如果希望在首页以外的页面中,链接的颜色为灰色,在首页中链接的颜色为深蓝色,可以使用以下代码:
```html
.inactive {
color: gray !important;
}
.active {
color: blue !important;
}
$(function() {
// 在首页以外的页面中,将首页的链接设置为灰色
$('a[href""]').addClass('inactive');
// 在首页中,将其他页面的链接设置为深蓝色
$('a:not([href""])').addClass('active');
});
```
使用JavaScript实现页面跳转
使用JavaScript的onclick事件可以实现页面的跳转。在AppCan中,可以使用()方法来打开一个新窗口。
```javascript
onclick"({
name: 'index',
dataType: 0,
aniId: 1,
animDuration: 500,
data: '',
extraInfo: {
opaque: true
}
})"
```
()方法的参数解释:
- name:新窗口的名称,如果窗口存在直接打开,如果不存在先创建然后打开
- data:新窗口填充的数据
- dataType:新窗口填充的数据类型,0表示URL,1表示HTML数据
- aniId:动画类型ID,0表示无动画,1表示从左向右推入,2表示从右向左推入,3表示从上向下推入,4表示从下向上推入,5表示淡入淡出,6表示左翻页,7表示右翻页,8表示水波纹,9表示由左向右切入,10表示由右向左切入,11表示由上向下切入,12表示由下向上切入,13表示由左向右切出,14表示由右向左切出,15表示由上向下切出,16表示由下向上切出
- type:窗口类型,0表示普通窗口,1表示OAuth窗口,2表示加密页面窗口,4表示强制刷新,16表示view不透明,32表示隐藏的window,64表示等待popOver加载完毕后显示,128表示支持手势,256表示标记open的window上一个window不隐藏,512表示标记open的浮动窗口用友打开wabapp
- width:要打开的窗口宽度,请传入0
- height:要打开的窗口高度,请传入0
- animDuration:动画执行时间
- extraInfo:扩展参数,设置值时,animDuration参数必须设置
例如,要实现一个按钮点击跳转到的效果,可以使用以下代码:
```html
```
这种方法虽然代码比较复杂,但是效果很好。
简化代码
如果每个功能的跳转div都设置一个id,并且id的名称就是要跳转页面的名称,可以进一步简化代码。
例如,要实现跳转到的功能,可以使用以下代码:
```html
$(function() {
$('index').click(function() {
({
name: 'index',
dataType: 0,
aniId: 1,
animDuration: 500,
data: '',
extraInfo: {
opaque: true
}
});
});
});
```
这样就可以通过点击具有相应id的div实现页面的跳转了。在实际应用中,可以根据需要给不同的功能添加相应的id,并为每个id编写对应的跳转逻辑。