JqueryEasyUI 模态框


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indextitle>
    <link rel="stylesheet" type="text/css" href="./jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./jquery-easyui-1.7.0/themes/icon.css">
    <script type="text/javascript" src="./jquery-easyui-1.7.0/jquery.min.js">script>
    <script type="text/javascript" src="./jquery-easyui-1.7.0/jquery.easyui.min.js">script>
head>
<body>
<h2>Toolbar and Buttonsh2>
<p>The toolbar and buttons can be added to dialog.123123123123p>
<div style="margin:20px 0;">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Opena>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Closea>
div>
<div id="dlg" class="easyui-dialog" title="Toolbar and Buttons" style="width:400px;height:500px;padding:10px"
     data-options="
				iconCls: 'icon-save',
				toolbar: [{
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
                        $('#ff').submit();
					}
				},'-',{
					text:'Save',
					iconCls:'icon-save',
					handler:function(){
						alert('save')
					}
				}],
				buttons: [{
					text:'Ok',
					iconCls:'icon-ok',
					handler:function(){
						alert('ok');
						$('#dlg').dialog('close');
					}
				},{
					text:'Cancel',
					handler:function(){
						alert('cancel');;
					}
				}]
			">
    <form id="ff" method="post" action="/demo">
        <table cellpadding="5">
            <tr>
                <td>Name:td>
                <td><input class="easyui-textbox" type="text" name="name" data-options="required:true">input>td>
            tr>
            <tr>
                <td>Email:td>
                <td><input class="easyui-textbox" type="text" name="email"
                           data-options="required:true,validType:'email'">input>td>
            tr>
            <tr>
                <td>Subject:td>
                <td><input class="easyui-textbox" type="text" name="subject" data-options="required:true">input>td>
            tr>
            <tr>
                <td>Message:td>
                <td><input class="easyui-textbox" name="message" data-options="multiline:true"
                           style="height:60px">input>td>
            tr>
            <tr>
                <td>Language:td>
                <td>
                    <select class="easyui-combobox" name="language">
                        <option value="ar">Arabicoption>
                        <option value="bg">Bulgarianoption>
                        <option value="ca">Catalanoption>
                    select>
                td>
            tr>
        table>
    form>
div>
div>
body>
<script>
    $(function () {
        $('#ff').form({
            success: function (data) {
                $.messager.alert('Info', data, 'info');
            }
        });
    });
script>
html>

JqueryEasyUI 模态框_第1张图片

你可能感兴趣的:(前端)