mui 父页面怎么使用子页面的元素

mui 父页面怎么使用子页面的元素,第1张

js获取父页面元素可以用$(windowparentdocument)find("#customer_id")val();这里的customer_id表示父页面某一个元素的id。 比如:父页面有一个隐藏的input框,那么在子页面就可以用上述的语句取到父页面的id为customer_id的值。

方法1:先设置同步在进行Ajax *** 作

//在全局或某个需要的函数内设置Ajax异步为false,也就是同步

$ajaxSetup({

async : false

});

//然后再进行你的Ajax *** 作

$post(地址, 参数, function(data, status) {

if (status == "success") {

//赋值给全局变量

}

else {

alert("wrong");

}

});

方法2:直接用$ajax

$ajax({

type : "post",

url :地址,

data : "参数" + 参数的值,

async : false,

success : function(data){

//赋值给全局变量;

}

});

让popverd出框始终显示在中间位置 就不要用 <a href='#popver'>,自己写一个标签,比如:

<button type="button" @click="transferOder">转移订单</button>

通过点击事件 控制 popver的显示和<div class="mui-backdrop "></div>的显示

并且在点击事件中控制popver的定位: $('#middlePopover')css('top',$(window)scrollTop()+180)//定位的关键代码

这样不管页面如何滚动 popver始终处于最中间的位置。

############

刚好最近在写一个vue 和mui的项目,mui的popver封装的js是定位点击的位置,不能让他始终在中间,又看了网上各种各样的答案都不太符合,然后自己写了一个。有什么不懂的可以邮件635036447@qqcom

DOM结构

关于mui页面的dom,你需要知道如下规则。

固定栏靠前

所谓的固定栏,也就是带有mui-bar属性的节点,都是基于fixed定位的元素;常见组件包括:顶部导航栏(mui-bar-nav)、底部工具条(mui-bar-footer)、底部选项卡(mui-bar-tab);这些元素使用时需遵循一个规则:放在mui-content元素之前,即使是底部工具条和底部选项卡,也要放在mui-content之前,否则固定栏会遮住部分主内容;

### 一切内容都要包裹在mui-content中

除了固定栏之外,其它内容都要包裹在mui-content中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮罩,mui为了解决这个问题,定义了如下css代码:

[css] view plain copy

mui-bar-nav ~ mui-content {

padding-top: 44px;

}

mui-bar-footer ~ mui-content {

padding-bottom: 44px;

}

mui-bar-tab ~ mui-content {

padding-bottom: 50px;

}

你当然可以通过自定义CSS的方式实现如上类似效果,但为了使用简便,建议将除固定栏之外的所有内容,全部放在mui-content中。

始终为button按钮添加type属性

若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。

窗口管理

页面初始化:必须执行muiinit方法

mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次muiinit()方法;

页面跳转:抛弃href跳转

当浏览器加载一个新页面时,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越的体验障碍;为解决这个问题,建议使用[muiopenWindow方法](>

以上就是关于mui 父页面怎么使用子页面的元素全部的内容,包括:mui 父页面怎么使用子页面的元素、用mui.ajax从后台获取到的data怎么赋值给全局变量、mui怎样让popverd出框始终显示在中间位置等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/10066005.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-04
下一篇2023-05-04

发表评论

登录后才能评论

评论列表(0条)

    保存