我把项目整个按照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-21 14:04