全国服务热线:4008-888-888

技术知识

AmazeUI在多形式框中✤置入表格产生多形式键入框

在《【AmazeUI】多形式框》(点一下开启连接)一原文中,早已详细介绍过在AmazeUI这一手机上版前端开发架构中,如何应用多形式框了,可是本文提及的多形式框仅仅这些单纯性的多形式框。假如要完成一个有表格,同时又有“递交”与“关掉”的按键,要作出以下的实际效果,哪应当如何完成呢?

最先一样是HTML合理布局:

<!--应用HTML5开发设计-->
<!doctype html>
<html class="no-js">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--全自动适应移动显示屏-->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!--优先选择应用webkit核心3D渲染-->
        <meta name="renderer" content="webkit">
        <!--不必被百度搜索转换格式-->
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <!--下列才算是引进amazeui資源-->
        <link rel="stylesheet" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <!--引进js的情况下要留意,务必先引进jQuery,再引进amazeui,由于这一架构是根据jQuery开发设计的-->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        <title>Modal</title>
    </head>    
    <body>
        <button class="am-btn am-btn-primary" onClick="openModal()">登陆</button>
        <!--多形式框-->
        <div class="am-modal am-modal-alert" tabindex="-1" id="login">
            <div class="am-modal-dialog">
            	<div class="am-modal-hd">登陆</div>
                <div class="am-modal-bd">
                <!--多形式框中容-->
                    <table>
                        <tr>
                            <td>客户名:</td>
                            <td><input type="text" id="username"/></td>
                        </tr>
                        <tr>
                            <td>登陆密码:</td>
                            <td><input type="password" id="password"/></td>
                        </tr>
                    </table>
                </div>
                <div class="am-modal-footer">
                	<!--重要是在这里里为2个按键再加data-am-modal-confirm与data-am-modal-cancel特性-->
                    <span class="am-modal-btn" data-am-modal-confirm>递交</span>
                    <span class="am-modal-btn" data-am-modal-cancel>关掉</span>     
                </div>
            </div>
        </div>       
        
    </body>
</html>

以后,这一段HTML脚本制作要跟下边的JavaScript联络起來。

例如一按“登陆”按键,则显示信息这一多形式键入框,JavaScript脚本制作则以下完成: 

<script>
function openModal(){
	$('#login').modal({
		onConfirm: function() {
			var username=document.getElementById("username").value;
			var password=document.getElementById("password").value;
			alert("客户点一下了递交,键入了客户名:"+username+",登陆密码:"+password+",接下来通常为ajax递交表格");
		},
		onCancel: function() {
			alert("客户点一下了关掉按键");
		}
	});
}
</script>

到此这篇有关AmazeUI在多形式框中置入表格产生多形式键入框的文章内容就详细介绍到这了,大量有关AmazeUI多形式键入框中容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服