缘多多
缘多多
  • 发布:2015-07-03 15:32
  • 更新:2019-11-08 17:47
  • 阅读:6437

急!关于MUI中switch开关问题!

分类:MUI

我把项目整个按照Angularjs的格式,把login的css样式代码放在一个公用的css文件中,js代码也是放在一个公用的js中,然后统一把需要引用的js和css的引用写到了index.html中。现在我的登录界面有一个开关按钮,用来切换是否显示密码,但是现在这个login.html界面中只有一部分代码了,如下:

<header class="mui-bar mui-bar-nav" >  
<h1 class="mui-title" id="title" style="font-weight:bold;">{{appTitle}}</h1>  
</header>  
<div>  
<form id='login-form' class="mui-input-group" style="margin-top: 80px;" name="form" ng-submit="processForm()" novalidate="novalidate">  
    <div >  
        <div class="mui-input-row">  
        <label style="width: 20%;">  
        <span class=" mui-icon mui-icon-person"></span>  
        </label>  
        <input id='username' ng-model="user.username" type="text" class="mui-input-clear mui-input"   
        placeholder="请输入账号" style="max-width: 50%;" name="username" required ng-minlength="3" ng-maxlength="10" />  
        </div>  
    </div>  
    <div>  
        <span class="passwords" style="margin-bottom: 5px;margin-top: 5px;">  
            <div id="switch-number" ng-click="changeType()" class="mui-switch">  
                <div class="mui-switch-handle"></div>  
            </div>  
        </span>  
        <div class="mui-input-row">  
        <label style="width: 26%;">  
        <span class="password-left mui-icon mui-icon-locked" >  
        </label>  
        <input id='password' type={{type}} class="mui-input-clear mui-input" placeholder="请输入密码" style="max-width: 50%;"  
        name="password" ng-model="user.password" required ng-minlength="3" ng-maxlength="10" />  
        </div>  
    </div>  
<div class="mui-content-padded" id="field-car-logo" style="margin-top: 50px;">  
    <!--//ng-disabled在表单验证失败时无法选中-->  
    <button id="main" class="mui-btn mui-btn-block mui-btn-primary car-button-login" ng-disabled="login-form.$invalid" type="submit">立即登录</button>  
</div>  
</div>  
</form>  
<div class="mui-content-padded oauth-area">  
</div>  

这个开关按钮现在功能是可以实现的,但是动画效果没了,上面的原型不能左右滑动了,请问有什么解决办法么?我之前没有分离代码的时候,只需要引用MUI官方的MUI.css文件和MUI.js文件就可以是实现了啊。

2015-07-03 15:32 负责人:无 分享
已邀请:
缘多多

缘多多 (作者)

mui('.mui-switch')['switch']();

问题已经解决了,来结贴。在控制器里添加这个方法,就可以了。我的理解是这个方法会通过控制器在渲染页面的过程中加载进去,我觉得这个问题属于angularjs不熟,不知道控制器加载机制,导致的。

  • 盘龍

     是这个方法。这个方法是属于mui.js里的,负责对switch组件初始化。  
    在页面载入后,mui.js的switch部分会对包含有.mui-switch类的元素进行查找,验证其是switch组件结构后,对其进行初始化。
    而动态处理的switch组件结构,是没有经过上面的初始化的,所以不能用。就需要手动调用上面提到的这个方法进行初始化了。

    2015-07-21 14:04

缘多多

缘多多 (作者)

显示都是正常的,只有开关的动画不能显示了。

缘多多

缘多多 (作者)

switch开关动画样式应该是css控制的,我导入了mui.css应该就可以了 啊,但是还是不显示。。。

缘多多

缘多多 (作者)

能讲解一下这个按钮实现的动画原理么?

缘多多

缘多多 (作者)

问题还没解决,来个题外话,周六谁去H5开发者大会了,王总千呼万唤后姗姗来迟,大家听王总讲360生活区+火锅的感觉如何(>_<),吐槽一下,D-Cloud没啥礼品,9秒发了鼠标垫T恤和腕带优盘。

r***@qq.com

r***@qq.com - 90后IT

mui开关能不能写三种状态,三种状态如何实现

该问题目前已经被锁定, 无法添加新回复