108 Star 341 Fork 138

DWZ团队 / DWZ_JUI

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
miscDrag.html 11.36 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
张慧华 提交于 2020-12-10 12:57 . fixed bugs
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)</title>
<link href="themes/default/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="themes/css/core.css" rel="stylesheet" type="text/css" media="all"/><link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen"/>
<!--[if IE]>
<link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->
<!--[if lt IE 9]><script src="js/speedup.js" type="text/javascript"></script><script src="js/jquery-1.12.4.js" type="text/javascript"></script><![endif]-->
<!--[if gte IE 9]><!--><script src="js/jquery-3.4.1.js" type="text/javascript"></script><!--<![endif]-->
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.bgiframe.js" type="text/javascript"></script>
<script src="xheditor/xheditor-1.2.2.min.js" type="text/javascript"></script>
<script src="xheditor/xheditor_lang/zh-cn.js" type="text/javascript"></script>
<script src="uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script>
<!-- svg图表 supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ -->
<script type="text/javascript" src="chart/raphael.js"></script>
<script type="text/javascript" src="chart/g.raphael.js"></script>
<script type="text/javascript" src="chart/g.bar.js"></script>
<script type="text/javascript" src="chart/g.line.js"></script>
<script type="text/javascript" src="chart/g.pie.js"></script>
<script type="text/javascript" src="chart/g.dot.js"></script>
<script src="js/dwz.core.js" type="text/javascript"></script>
<script src="js/dwz.util.date.js" type="text/javascript"></script>
<script src="js/dwz.validate.method.js" type="text/javascript"></script>
<script src="js/dwz.barDrag.js" type="text/javascript"></script>
<script src="js/dwz.drag.js" type="text/javascript"></script>
<script src="js/dwz.tree.js" type="text/javascript"></script>
<script src="js/dwz.accordion.js" type="text/javascript"></script>
<script src="js/dwz.ui.js" type="text/javascript"></script>
<script src="js/dwz.theme.js" type="text/javascript"></script>
<script src="js/dwz.switchEnv.js" type="text/javascript"></script>
<script src="js/dwz.alertMsg.js" type="text/javascript"></script>
<script src="js/dwz.contextmenu.js" type="text/javascript"></script>
<script src="js/dwz.navTab.js" type="text/javascript"></script>
<script src="js/dwz.tab.js" type="text/javascript"></script>
<script src="js/dwz.resize.js" type="text/javascript"></script>
<script src="js/dwz.dialog.js" type="text/javascript"></script>
<script src="js/dwz.dialogDrag.js" type="text/javascript"></script>
<script src="js/dwz.sortDrag.js" type="text/javascript"></script>
<script src="js/dwz.miscDrag.js" type="text/javascript"></script>
<script src="js/dwz.cssTable.js" type="text/javascript"></script>
<script src="js/dwz.stable.js" type="text/javascript"></script>
<script src="js/dwz.taskBar.js" type="text/javascript"></script>
<script src="js/dwz.ajax.js" type="text/javascript"></script>
<script src="js/dwz.pagination.js" type="text/javascript"></script>
<script src="js/dwz.database.js" type="text/javascript"></script>
<script src="js/dwz.datepicker.js" type="text/javascript"></script>
<script src="js/dwz.effects.js" type="text/javascript"></script>
<script src="js/dwz.panel.js" type="text/javascript"></script>
<script src="js/dwz.checkbox.js" type="text/javascript"></script>
<script src="js/dwz.history.js" type="text/javascript"></script>
<script src="js/dwz.combox.js" type="text/javascript"></script>
<script src="js/dwz.print.js" type="text/javascript"></script>
<!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意:替换时下面dwz.regional.zh.js还需要引入)
<script src="bin/dwz.min.js" type="text/javascript"></script>
-->
<script src="js/dwz.regional.zh.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
DWZ.init("dwz.frag.xml", {
loginUrl:"login_dialog.html", loginTitle:"登录", // 弹出登录对话框
// loginUrl:"login.html", // 跳到登录页面
statusCode:{ok:200, error:300, timeout:301}, //【可选】
pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】
keys: {statusCode:"statusCode", message:"message"}, //【可选】
ui:{hideMode:'offsets'}, //【可选】hideMode:navTab组件切换的隐藏方式,支持的值有’display’,’offsets’负数偏移位置的值,默认值为’display’
debug:false, // 调试模式 【true|false】
callback:function(){
initEnv();
$("#themeList").theme({themeBase:"themes"}); // themeBase 相对于index页面的主题base路径
}
});
DWZ.regPlugins.push(function($p){
$("dl.miscDrag", $p).miscDrag();
$("dl.miscSortDrag", $p).miscSortDrag();
});
});
</script>
<link href="themes/miscDrag/styles.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<div id="layout">
<div id="header">
<div class="headerNav">
<a class="logo" href="http://j-ui.com">标志</a>
<ul class="nav">
<li id="switchEnvBox"><a href="javascript:"><span>北京</span>)切换城市</a>
<ul>
<li><a href="sidebar_1.html">北京</a></li>
<li><a href="sidebar_2.html">上海</a></li>
<li><a href="sidebar_2.html">南京</a></li>
<li><a href="sidebar_2.html">深圳</a></li>
<li><a href="sidebar_2.html">广州</a></li>
<li><a href="sidebar_2.html">天津</a></li>
<li><a href="sidebar_2.html">杭州</a></li>
</ul>
</li>
<li><a href="https://me.alipay.com/dwzteam" target="_blank">捐赠</a></li>
<li><a href="changepwd.html" target="dialog" width="600">设置</a></li>
<li><a href="http://www.cnblogs.com/dwzjs" target="_blank">博客</a></li>
<li><a href="http://weibo.com/dwzui" target="_blank">微博</a></li>
<li><a href="login.html">退出</a></li>
</ul>
<ul class="themeList" id="themeList">
<li theme="default"><div class="selected">蓝色</div></li>
<li theme="green"><div>绿色</div></li>
<!--<li theme="red"><div>红色</div></li>-->
<li theme="purple"><div>紫色</div></li>
<li theme="silver"><div>银色</div></li>
<li theme="azure"><div>天蓝</div></li>
</ul>
</div>
<!-- navMenu -->
</div>
<div id="leftside">
<div id="sidebar_s">
<div class="collapse">
<div class="toggleCollapse"><div></div></div>
</div>
</div>
<div id="sidebar">
<div class="toggleCollapse"><h2>主菜单</h2><div>收缩</div></div>
<div class="accordion" fillSpace="sidebar">
<div class="accordionHeader">
<h2><span>Folder</span>界面组件</h2>
</div>
<div class="accordionContent">
<ul class="tree treeFolder">
<li><a href="tabsPage.html" target="navTab">主框架面板</a>
<ul>
<li><a href="demo/sortDrag/1.html" target="navTab" rel="sortDrag">单个sortDrag示例</a></li>
<li><a href="demo/sortDrag/2.html" target="navTab" rel="sortDrag">多个sortDrag示例</a></li>
<li><a href="demo/sortDrag/form.html" target="navTab" rel="sortDrag">可拖动表单示例</a></li>
<li><a href="miscDrag2.html" target="_blank">炉门 Furnace door</a></li>
</ul>
</li>
<li><a href="dwz.frag.xml" target="navTab" external="true">dwz.frag.xml</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="container">
<div id="navTab" class="tabsPage">
<div class="tabsPageHeader">
<div class="tabsPageHeaderContent"><!-- 显示左右控制时添加 class="tabsPageHeaderMargin" -->
<ul class="navTab-tab">
<li tabid="main" class="main"><a href="javascript:;"><span><span class="home_icon">我的主页</span></span></a></li>
</ul>
</div>
<div class="tabsLeft">left</div><!-- 禁用只需要添加一个样式 class="tabsLeft tabsLeftDisabled" -->
<div class="tabsRight">right</div><!-- 禁用只需要添加一个样式 class="tabsRight tabsRightDisabled" -->
<div class="tabsMore">more</div>
</div>
<ul class="tabsMoreList">
<li><a href="javascript:;">我的主页</a></li>
</ul>
<div class="navTab-panel tabsPageContent layoutBox">
<div class="page unitBox" layoutH="5">
<!-- start自定义拖拽示例 -->
<div class="pageContent">
<dl id="myMiscDrag" class="miscDrag" drag-rel="dd .door" rel="#myMiscSortDrag dd">
<dt>
<div class="dragBox" data-sn="box1">容器1</div>
<div class="dragBox" data-sn="box2">容器2</div>
<div class="dragBox" data-sn="box3">容器3</div>
<div class="dragBox" data-sn="box4">容器4</div>
<div class="dragBox" data-sn="box5">容器5</div>
</dt>
<dd>
<h2 style="text-align: center; font-size: 20px">炉门 Furnace door</h2>
<div class="door"></div>
</dd>
</dl>
<div class="divider"></div>
<dl id="myMiscSortDrag" class="miscSortDrag" drag-rel="dd .sortDrag">
<dt>
<div class="dragItem" data-sn="A1">A1</div>
<div class="dragItem" data-sn="A2">A2</div>
<div class="dragItem" data-sn="A3">A3</div>
<div class="dragItem" data-sn="A4">A4</div>
<div class="dragItem" data-sn="A5">A5</div>
<div class="dragItem" data-sn="A6">A6</div>
<div class="dragItem" data-sn="A7">A7</div>
<div class="dragItem" data-sn="A8">A8</div>
<div class="dragItem" data-sn="A9">A9</div>
<div class="dragItem" data-sn="A10">A10</div>
</dt>
<dd>
<div class="arrow">
<p style="margin-bottom: 20px"><button type="button" onclick="$('#myMiscDrag dt, #myMiscSortDrag dt').add(this).hide()">隐藏</button></p>
<p>上 Up</p>
<img src="themes/miscDrag/images/arrow-up.png" height="200"/>
<p>下 Down</p>
</div>
<!--<div class="sortDrag">-->
<!--<p>容器1</p>-->
<!--<div class="dragItem">A1<span class="close">×</span></div>-->
<!--<div class="dragItem">A2<span class="close">×</span></div>-->
<!--<div class="dragItem">A3<span class="close">×</span></div>-->
<!--<div class="dragItem">A4<span class="close">×</span></div>-->
<!--<div class="dragItem">A5<span class="close">×</span></div>-->
<!--</div>-->
<!--<div class="sortDrag">-->
<!--<p>容器2</p>-->
<!--<div class="dragItem">B1<span class="close">×</span></div>-->
<!--<div class="dragItem">B2<span class="close">×</span></div>-->
<!--<div class="dragItem">B3<span class="close">×</span></div>-->
<!--<div class="dragItem">B4<span class="close">×</span></div>-->
<!--<div class="dragItem">B5<span class="close">×</span></div>-->
<!--</div>-->
</dd>
</dl>
</div>
<!-- end自定义拖拽示例 -->
</div>
</div>
</div>
</div>
</div>
<div id="footer">Copyright &copy; 2010 <a href="demo_page2.html" target="dialog">DWZ团队</a> 京ICP备15053290号-2</div>
</body>
</html>
JavaScript
1
https://gitee.com/dwzteam/dwz_jui.git
git@gitee.com:dwzteam/dwz_jui.git
dwzteam
dwz_jui
DWZ_JUI
master

搜索帮助

14c37bed 8189591 565d56ea 8189591