【必发88】之可折叠面板动态加载无效劳的化解方法,Jquery组件easyUi完结表单验证示例

by admin on 2019年7月7日

本文实例为大家大饱眼福了Jquery
easyUi表单验证达成代码,供我们参考,具体内容如下

jQuery EasyUI Layout是一种基于jQuery的布局框架,今日早先采纳Jquery
EasyUi,轻易的做了个布局页面以为还不易,给大家享受一下,正是不理解Jquery
EasyUi浏览器包容性如何。

EasyUI 简介

在上篇小说给大家介绍了jQuery
Easyui使用(一)之可折叠面板的布局手风琴菜单

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Basic Form - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="demo.css">
 <script type="text/javascript" src="../jquery.min.js"></script>
 <script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body>
 <h2>基本表单</h2>
 <p>Fill the form and submit it.</p>
 <div style="margin:20px 0;"></div>
 <div class="easyui-panel" title="新主题" style="width:400px">
 <div style="padding:10px 60px 20px 60px">
 <form id="ff" method="post">
 <table cellpadding="5">
 <tr>
 <td>姓名:</td>
 <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
 </tr>
 <tr>
 <td>邮件:</td>
 <td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
 </tr>
 <tr>
 <td>主题:</td>
 <td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
 </tr>
 <tr>
 <td>消息:</td>
 <td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:60px"></input></td>
 </tr>
 <tr>
 <td>语言:</td>
 <td>
  <select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
 </td>
 </tr>
 </table>
 </form>
 <div style="text-align:center;padding:5px">
 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>
 </div>
 </div>
 </div>
 <script>
 function submitForm(){
 $('#ff').form('submit');
 }
 function clearForm(){
 $('#ff').form('clear');
 }
 </script>
</body>
</html>

最后效果图如下:

easyui是一种基于jQuery的用户分界面插件集结。

先上代码:

必发88 1

必发88 2

easyui为创设今世化,互动,JavaScript应用程序,提供必需的意义。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用车管理</title>
<link href="../JQuery/easyui/themes/icon.css" rel="stylesheet" />
<link href="../JQuery/easyui/themes/default/easyui.css" rel="stylesheet" />
<script src="../JQuery/jquery.min.js"></script>
<script src="../JQuery/easyui/jquery.easyui.min.js"></script>
<script src="../JQuery/easyui/locale/easyui-lang-zh_CN.js"></script>
<style>
#div_left {
width: 250px;
background-color: powderblue;
font-size: inherit;
}
#div_welcome {
margin: 15px 0 15px 0;
text-align: center;
}
#div_leftmenu div {
font-size: 15px;
}
#div_leftmenu div ul {
margin: 15px 15px 15px 15px;
padding: 0;
overflow: hidden;
line-height: 40px;
max-height: 200px;
}
#div_leftmenu div ul li {
list-style-type: none;
background-color: #DFE2E3;
text-align: center;
margin-bottom: 15px;
}
#div_leftmenu div ul li:hover{
list-style-type: none;
background-color: powderblue;
text-align: center;
margin-bottom: 15px;
cursor:pointer;
}
#div_leftmenu div ul li:last-of-type {
margin-bottom: 0;
}
</style>
</head>
<body class="easyui-layout" style="font-size: 15px;" data-options="fit:true">
<form id="form1" runat="server">
<!--左侧-->
<div id="div_left" data-options="region:'west',title:' '">
<div id="div_welcome">admin,欢迎您</div>
<div id="div_leftmenu" class="easyui-accordion">
</div>
</div>
<!--右侧-->
<div data-options="region:'center',title:' '" style="padding: 5px;">
</div>
</form>
<script type="text/javascript">
var usertype = "0";
$(document).ready(function () {
var div_leftmenu_html = '';
switch (usertype) {
case "0"://车辆管理员
div_leftmenu_html += '<div title="车辆登记">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>车辆登记</li>';
div_leftmenu_html += ' <li>添加</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车分派">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车分派</li>';
div_leftmenu_html += ' <li>分派</li>';
div_leftmenu_html += ' <li>详情</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="审核人管理">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>审核人管理</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "1"://学校领导
div_leftmenu_html += '<div title="用车审批">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车审批</li>';
div_leftmenu_html += ' <li>审批</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "2"://司机
div_leftmenu_html += '<div title="司机确认">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>司机确认</li>';
div_leftmenu_html += ' <li>确认</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "3"://普通教师
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
default:
break;
}
$("#div_leftmenu").html(div_leftmenu_html);
});
</script>
</body>
</html>

【必发88】之可折叠面板动态加载无效劳的化解方法,Jquery组件easyUi完结表单验证示例。上述正是本文的全体内容,希望对大家的读书抱有帮忙,也盼望大家多多协理脚本之家。

行使Jquery EasyUi开垦从前率先要引用Jquery
EasyUi的Js和Css文件,援引如下:

必发88,应用easyui你没有须要写过多代码,你只需求经过编写制定一些简约HTML标志,就能够定义用户分界面。

结果:

你或者感兴趣的稿子:

  • jQuery
    Easyui使用(一)之可折叠面板的布局手风琴菜单
  • JQuery EasyUI Layout
    在from布局自适应窗口大小的兑现情势
  • jQuery
    EasyUi实战教程之布局篇
  • jQuery Easyui达成左右布局
  • jQuery EasyUI
    布局之动态增多tabs标签页
  • JQueryEasyUI
    Layout布局框架的行使
  • 【必发88】之可折叠面板动态加载无效劳的化解方法,Jquery组件easyUi完结表单验证示例。Jquery组件easyUi实现手风琴(折叠面板)示例
  • Jquery组件easyUi完结选项卡切换示例
  • jQuery EasyUI API 中文文书档案 –
    DataGrid数据表格
  • jQuery组件easyui基本布局达成代码
<script src="../jquery.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />

easyui是个健全支持HTML5网页的一体化框架。

必发88 3

OK,上面就起来大家的布局。

easyui节省您网页开采的流年和层面。

接下去不断尝试

一、使用布局面板实行完全布局,直接贴代码:

easyui很轻便但作用庞大的。

一:usertype = “1”;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LayOut</title>
<script src="../jquery.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
$(document).ready(function () {
});
</script>
<style>
.footer {
width: 100%;
text-align: center;
line-height: 35px;
}
.top-bg {
background-color: #d8e4fe;
height: 80px;
}
</style>
</head>
<body class="easyui-layout">
<div region="north" border="true" split="true" style="overflow: hidden; height: 80px;">
<div class="top-bg"></div>
</div>
<div region="south" border="true" split="true" style="overflow: hidden; height: 40px;">
<div class="footer">版权所有:<a href="http://www.kwstu.com">酷网工作室</a></div>
</div>
<div region="west" split="true" title="导航菜单" style="width: 200px;">
</div>
<div id="mainPanle" region="center" style="overflow: hidden;">
</div>
</body>
</html>

在后台管理种类开荒的长河中,上左右的布局是最广泛的页面布局情势,今后我们来拜会使用easyui那几个jquery前端框架怎么着飞快搭建二个可用的页面框架。

必发88 4

如上代码效果如下(完结部分第一步):

1.在页面中引入easyui所需的文书

二:usertype = “2”;

必发88 5

<%-- 加载easyui的样式文件,bootstrap风格 --%>
<link href="${ctx }/css/themes/bootstrap/easyui.css" rel="stylesheet">
<link href="${ctx }/css/themes/icon.css" rel="stylesheet">
<%-- 加载jquery和easyui的脚本文件 --%>
<script src="${ctx }/js/jquery-easyui-../jquery.min.js"></script>
<script src="${ctx }/js/jquery-easyui-../jquery.easyui.min.js"></script>
<script src="${ctx }/js/jquery-easyui-../locale/easyui-lang-zh_CN.js"></script> 

必发88 6

二、增加右手菜单

2.在页面body部分创设须要的html结构

三:usertype = “3”;

左侧菜单使用的是jquery
easyui的可伸缩面板控件和树形控件的结缘,直接将可伸缩面板控件和树形控件放到west域中就可以,况且编写点击事件,代码如下:

<body>
<div id="home-layout">
<!-- 页面北部,页面标题 -->
<div data-options="region:'north'" style="height:50px;">
<!-- add your code -->
</div>
<!-- 页面西部,菜单 -->
<div data-options="region:'west',title:'菜单栏'" style="width:200px;">
<div class="home-west">
<ul id="home-west-tree"></ul>
</div>
</div>
<!-- 页面中部,主要内容 -->
<div data-options="region:'center'">
<div id="home-tabs">
<div title="首页">
<h2 style="text-align: center">欢迎登录</h2>
</div>
</div>
</div>
</div>
</body> 

必发88 7

页面代码:

此处须要留心一点:easyui在行使layout布局的时候,north、south须要钦点中度,west、east需求钦点宽度,而center会自动适应高和宽。

四:

<div region="west" split="true" title="导航菜单" style="width: 200px;">
<div id="aa" class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">
<div title="博文管理" iconcls="icon-save" style="overflow: auto; padding: 10px;">
<ul class="easyui-tree">
<li>
Folder
<ul>
<li>
Sub Folder 1
<ul>
<li>
<a target="mainFrame" href="http://www.baidu.com">审核博客</a>
</li>
<li>
<a href="#">File 12</a>
</li>
<li>
File 13
</li>
</ul>
</li>
<li>
File 2
</li>
<li>
File 3
</li>
</ul>
</li>
<li>
<a href="#">File21</a>
</li>
</ul>
</div>
<div title="新闻管理" iconcls="icon-reload" selected="true" style="padding: 10px;">
content2 
</div>
<div title="资源管理">
content3 
</div>
</div>
</div>

3.使用js初始化easyui组件

//导航菜单绑定初始化
$(".easyui-accordion").accordion();

Js点击事件代码:

自个儿个人比较推荐应用js代码去起先化easyui组件,而不使用easyui标签中的data-options属性去起始化。因为对此后台开荒职员来讲,写js代码恐怕比写html标签越来越熟练,而且那样使得html代码尤其简洁。

结果:没效果

<script language="JavaScript">
$(document).ready(function () {
$('.easyui-accordion li a').click(function () {
var tabTitle = $(this).text();
var url = $(this).attr("href");
addTab(tabTitle, url);
$('.easyui-accordion li div').removeClass("selected");
$(this).parent().addClass("selected");
}).hover(function () {
$(this).parent().addClass("hover");
}, function () {
$(this).parent().removeClass("hover");
});
function addTab(subtitle, url) {
if (!$('#tabs').tabs('exists', subtitle)) {
$('#tabs').tabs('add', {
title: subtitle,
content: createFrame(url),
closable: true,
width: $('#mainPanle').width() - 10,
height: $('#mainPanle').height() - 26
});
} else {
$('#tabs').tabs('select', subtitle);
}
tabClose();
}
function createFrame(url) {
var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
return s;
}
function tabClose() {
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function () {
var subtitle = $(this).children("span").text();
$('#tabs').tabs('close', subtitle);
})
$(".tabs-inner").bind('contextmenu', function (e) {
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY,
});
var subtitle = $(this).children("span").text();
$('#mm').data("currtab", subtitle);
return false;
});
}
//绑定右键菜单事件
function tabCloseEven() {
//关闭当前
$('#mm-tabclose').click(function () {
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close', currtab_title);
})
//全部关闭
$('#mm-tabcloseall').click(function () {
$('.tabs-inner span').each(function (i, n) {
var t = $(n).text();
$('#tabs').tabs('close', t);
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function () {
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function (i, n) {
var t = $(n).text();
if (t != currtab_title)
$('#tabs').tabs('close', t);
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function () {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == 0) {
//msgShow('系统提示','后边没有啦~~','error');
alert('后边没有啦~~');
return false;
}
nextall.each(function (i, n) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function () {
var prevall = $('.tabs-selected').prevAll();
if (prevall.length == 0) {
alert('到头了,前边没有啦~~');
return false;
}
prevall.each(function (i, n) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
});
return false;
});
//退出
$("#mm-exit").click(function () {
$('#mm').menu('hide');
})
}
});
<script>
$(function(){
/*
* 初始化layout
*/
$("#home-layout").layout({
//使layout自适应容器
fit: true
});
/*
* 获取左侧菜单树,并为其节点指定单击事件
*/
$("#home-west-tree").tree({
    //加载菜单的数据,必需
url: "${ctx }/pages/home-west-tree.json",
method: "get",
    //是否有层次线
lines: true,
    //菜单打开与关闭是否有动画效果
animate: true,
    //菜单点击事件
onClick: function(node){
if(node.attributes && node.attributes.url){
         //打开内容区的tab,代码在其后
addTab({
url: "${ctx }/" + node.attributes.url,
title: node.text
});
}
}
});
  /*
* 初始化内容区的tabs
*/
$("#home-tabs").tabs({
fit : true,
    //tab页是否有边框
border : false
});})
</script>
<script>
/*
* 在内容区添加一个tab
*/
function addTab(params){
var t = $("#home-tabs");
var url = params.url;
var opts = {
title: params.title,
closable: true,
href: url,
fit: true,
border: false
};
//如果被选中的节点对应的tab已经存在,则选中该tab并刷新内容
//否则打开一个新的tab
if(t.tabs("exists", opts.title)){
var tab = t.tabs("select", opts.title).tabs("getSelected");
t.tabs("update", {
tab: tab,
options: opts
});
}else{
t.tabs("add", opts);
}
}
</script> 

五:修改后的代码如下

上述代码效果图:

4.easyui-tree组件所需的json格式

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用车管理</title>
<link href="../JQuery/easyui/themes/icon.css" rel="stylesheet" />
<link href="../JQuery/easyui/themes/default/easyui.css" rel="stylesheet" />
<script src="../JQuery/jquery.min.js"></script>
<script src="../JQuery/easyui/jquery.easyui.min.js"></script>
<script src="../JQuery/easyui/locale/easyui-lang-zh_CN.js"></script>
<style>
#div_left {
width: 250px;
background-color: powderblue;
font-size: inherit;
}
#div_welcome {
margin: 15px 0 15px 0;
text-align: center;
}
#div_leftmenu div {
font-size: 15px;
}
#div_leftmenu div ul {
margin: 15px 15px 15px 15px;
padding: 0;
overflow: hidden;
line-height: 40px;
max-height: 200px;
}
#div_leftmenu div ul li {
list-style-type: none;
background-color: #DFE2E3;
text-align: center;
margin-bottom: 15px;
}
#div_leftmenu div ul li:hover{
list-style-type: none;
background-color: powderblue;
text-align: center;
margin-bottom: 15px;
cursor:pointer;
}
#div_leftmenu div ul li:last-of-type {
margin-bottom: 0;
}
</style>
</head>
<body class="easyui-layout" style="font-size: 15px;" data-options="fit:true">
<form id="form1" runat="server">
<!--左侧-->
<div id="div_left" data-options="region:'west',title:' '">
<div id="div_welcome">车辆管理员1,欢迎您</div>
</div>
<!--右侧-->
<div data-options="region:'center',title:' '" style="padding: 5px;">
</div>
</form>
<script type="text/javascript">
var usertype = "0";
$(document).ready(function () {
var div_leftmenu_html = '<div id="div_leftmenu" class="easyui-accordion">';//
switch (usertype) {
case "0"://车辆管理员
div_leftmenu_html += '<div title="车辆登记">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>车辆登记</li>';
div_leftmenu_html += ' <li>添加</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车分派">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车分派</li>';
div_leftmenu_html += ' <li>分派</li>';
div_leftmenu_html += ' <li>详情</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="审核人管理">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>审核人管理</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "1"://学校领导
div_leftmenu_html += '<div title="用车审批">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车审批</li>';
div_leftmenu_html += ' <li>审批</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "2"://司机
div_leftmenu_html += '<div title="司机确认">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>司机确认</li>';
div_leftmenu_html += ' <li>确认</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "3"://普通教师
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
default:
break;
}
div_leftmenu_html += '</div>';
$("#div_left").append(div_leftmenu_html);
//导航菜单绑定初始化
$(".easyui-accordion").accordion();
});
</script>
</body>
</html> 

必发88 8

easyui使用的传输格式为json,它对json内容的格式有比较严谨的范围,所以请留神查看api

结果:

三、最终点击菜单时须求在center域展现点击后的剧情页面,代码如下:

[{
"text":"区域管理",
"attributes":{
"url":"pages/consume/area/areaList.jsp"
}
},{
"text":"预约信息管理",
"children":[{
"text":"商户预约信息查询",
"attributes":{
"url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"
}
}]
},{
"text":"准入申请管理",
"children":[{
"text":"商户准入申请",
"state":"closed",
"children":[{
"text":"商户待处理申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_wait"
}
},{
"text":"商户审批中申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_current"
}
},{
"text":"商户审批通过申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_pass"
}
},{
"text":"商户被拒绝申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_refuse"
}
}]
}]
},{
"text":"准入审批管理",
"children":[{
"text":"商户审批管理",
"state":"closed",
"children":[{
"text":"当前任务",
"children":[{
"text":"商户当前初审任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"
}
},{
"text":"商户当前复审任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"
}
}]
},{
"text":"商户已完成任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"
}
},{
"text":"商户不通过任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"
}
}]
}]
}]

必发88 9

<div id="tabs" class="easyui-tabs" fit="true" border="false">
<div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
<h1>Welcome to jQuery UI!</h1>
</div>
</div>

就这么,我们运用easyui达成了大约的左右搭架子。

手风琴加载出来了。

正文已完到此停止。希望本文分享对大家有所援助。

如上所述是作者给我们享用的jQuery
Easyui完成上左右布局的相干内容,希望对大家持有帮助。

上述所述是小编给大家介绍的jQuery
Easyui使用(二)之可折叠面板动态加载无效果与利益的消除措施,希望对我们有着扶助,假设大家有任何疑问请给自家留言,笔者会及时恢复大家的。在此也特别感激大家对台本之家网址的支撑!

您可能感兴趣的小说:

  • jQuery
    Easyui使用(一)之可折叠面板的布局手风琴菜单
  • JQuery EasyUI Layout
    在from布局自适应窗口大小的兑现格局
  • jQuery Easyui达成左右搭架子
  • jQuery EasyUI
    布局之动态增加tabs标签页
  • JQueryEasyUI
    Layout布局框架的选用
  • Jquery组件easyUi完结手风琴(折叠面板)示例
  • Jquery组件easyUi实现选项卡切换示例
  • Jquery组件easyUi实现表单验证示例
  • jQuery EasyUI API 汉语文书档案 –
    DataGrid数据表格
  • jQuery组件easyui基本布局达成代码

你可能感兴趣的稿子:

  • jQuery
    Easyui使用(一)之可折叠面板的布局手风琴菜单
  • JQuery EasyUI Layout
    在from布局自适应窗口大小的贯彻方式
  • jQuery
    EasyUi实战教程之布局篇
  • jQuery EasyUI
    布局之动态加多tabs标签页
  • JQueryEasyUI
    Layout布局框架的运用
  • Jquery组件easyUi达成手风琴(折叠面板)示例
  • Jquery组件easyUi达成选项卡切换示例
  • Jquery组件easyUi达成表单验证示例
  • jQuery EasyUI API 国语文书档案 –
    DataGrid数据表格
  • jQuery组件easyui基本布局达成代码

你恐怕感兴趣的稿子:

  • jQuery EasyUI
    折叠面板accordion的运用实例(分享)
  • Jquery组件easyUi完结手风琴(折叠面板)示例
  • jQuery
    Easyui使用(一)之可折叠面板的布局手风琴菜单
  • jQuery完成的粗略折叠菜单(折叠面板)效果代码
  • jquery完结的MARCHion折叠面板效果代码
  • jQuery之折叠面板的深入分析
  • 微信小程序达成折叠面板

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图