第14天:
问题1:Framework7 框架里面默认使用ajax提交数据,导致我的某个a标签跳转后仍有导航拦:
解决方法:使用属性 external, 声明为外部链接
问题2:我的表单中想使用提交按钮,但是framework7中的按钮都是用a + 类名button 标签实现的,我还能继续使用a标签吗?
解决方法:用js函数绑定该按钮,点击时通过绑定id触发表单元素的submit()函数
参考了: http://www.cnblogs.com/siqi/archive/2012/11/30/2796671.html
示例代码:
function click_to_submit(){ //点击提交按钮提交表单
document.getElementById("myForm").submit();
}
问题3:下拉菜单的使用,以及默认选中某个默认值
解决方法: 这种问题度娘见的多啦,w3c,runoob——selected = "selected"
问题4:使用Framwork7 的二级导航栏,学习其用法
解决方法:那就查看官方文档: http://docs.framework7.cn/Index/sub_navbar.html
问题5: 如何使用返回标签可以回到上一个页面
解决方法: 我用了js的点击触发的跳转函数,使用window.location.href 赋新值强制改变链接地址
问题7: 如何使用弹窗, 应用场景:在放弃编辑和删除项目的时候,应该弹出一个窗口让用户再次确认,避免用户误点
解决方法:利用js中的confirm函数,详情参考: http://www.runoob.com/js/js-popup.html
问题8: js的弹窗没问题了,我能不能用framework7里面的弹窗来实现更加美观的效果吗?
解决方法:看官方文档:http://docs.framework7.cn/Index/modal.html 中的confirm框即可。
示例代码如下:
$$('.confirm_save').on('click', function () {
myApp.confirm('你确定要保存结果吗?','温馨提示', function () {
click_to_submit()
});
});
问题9: framework7 中的弹窗带参数问题:
解决方法:只能在该html页面嵌入script,里面的函数直接使用{{}} jinja2得到数据,也就说不能将需要使用参数的js代码放入到外部js脚本中
比如说,代码如下:
<script>
{%for item in data%}
$$('.delete_program').on('click', function () {
myApp.confirm('你确定要删除该项目吗?','温馨提示', function () {
delete_program({{item.id}});
});
});
{%endfor%}
</script>
后来想想,当然也可以封装成一个function(argu){}这样的方式封装进外部js脚本
问题10: 确认删除或者更新或者发布某条项目资料之后,希望可以弹出一个窗口提示操作成功,约1s后自动消失,并且返回主界面
解决方法:使用Framework7的confirm组件
可以参考:http://docs.framework7.cn/Index/preloader.html
<script>
myApp.showPreloader('更新数据中')
setTimeout(
function()
{
myApp.hidePreloader();
var id = 0
id = {{data}}
this.location.href= "program_detail" + "?id=" + id;
}
,1000)
</script>