first commit
This commit is contained in:
12
bin/WebRoot/JS/jquery-easyui-portal/datagrid_data.json
Normal file
12
bin/WebRoot/JS/jquery-easyui-portal/datagrid_data.json
Normal file
@ -0,0 +1,12 @@
|
||||
{"total":28,"rows":[
|
||||
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
|
||||
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
|
||||
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
|
||||
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
|
||||
{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
|
||||
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
|
||||
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
|
||||
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
|
||||
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
|
||||
{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
|
||||
]}
|
||||
308
bin/WebRoot/JS/jquery-easyui-portal/jquery.portal.js
Normal file
308
bin/WebRoot/JS/jquery-easyui-portal/jquery.portal.js
Normal file
@ -0,0 +1,308 @@
|
||||
/**
|
||||
* portal - jQuery EasyUI
|
||||
*
|
||||
* Licensed under the GPL:
|
||||
* http://www.gnu.org/licenses/gpl.txt
|
||||
*
|
||||
* Copyright 2010-2012 stworthy [ stworthy@gmail.com ]
|
||||
*
|
||||
* Dependencies:
|
||||
* draggable
|
||||
* panel
|
||||
*
|
||||
*/
|
||||
(function($){
|
||||
/**
|
||||
* initialize the portal
|
||||
*/
|
||||
function init(target){
|
||||
$(target).addClass('portal');
|
||||
var table = $('<table border="0" cellspacing="0" cellpadding="0"><tr></tr></table>').appendTo(target);
|
||||
var tr = table.find('tr');
|
||||
|
||||
var columnWidths = [];
|
||||
var totalWidth = 0;
|
||||
$(target).children('div:first').addClass('portal-column-left');
|
||||
$(target).children('div:last').addClass('portal-column-right');
|
||||
$(target).find('>div').each(function(){ // each column panel
|
||||
var column = $(this);
|
||||
totalWidth += column.outerWidth();
|
||||
columnWidths.push(column.outerWidth());
|
||||
|
||||
var td = $('<td class="portal-column-td"></td>').appendTo(tr)
|
||||
column.addClass('portal-column').appendTo(td);
|
||||
column.find('>div').each(function(){ // each portal panel
|
||||
var p = $(this).addClass('portal-p').panel({
|
||||
doSize:false,
|
||||
cls:'portal-panel'
|
||||
});
|
||||
makeDraggable(target, p);
|
||||
});
|
||||
});
|
||||
for(var i=0; i<columnWidths.length; i++){
|
||||
columnWidths[i] /= totalWidth;
|
||||
}
|
||||
|
||||
$(target).bind('_resize', function(){
|
||||
var opts = $.data(target, 'portal').options;
|
||||
if (opts.fit == true){
|
||||
setSize(target);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
return columnWidths;
|
||||
}
|
||||
|
||||
function setSize(target){
|
||||
var t = $(target);
|
||||
var opts = $.data(target, 'portal').options;
|
||||
if (opts.fit){
|
||||
var p = t.parent();
|
||||
opts.width = p.width();
|
||||
opts.height = p.height();
|
||||
}
|
||||
if (!isNaN(opts.width)){
|
||||
t._outerWidth(opts.width);
|
||||
} else {
|
||||
t.width('auto');
|
||||
}
|
||||
if (!isNaN(opts.height)){
|
||||
t._outerHeight(opts.height);
|
||||
} else {
|
||||
t.height('auto');
|
||||
}
|
||||
|
||||
var hasScroll = t.find('>table').outerHeight() > t.height();
|
||||
var width = t.width();
|
||||
var columnWidths = $.data(target, 'portal').columnWidths;
|
||||
var leftWidth = 0;
|
||||
|
||||
// calculate and set every column size
|
||||
for(var i=0; i<columnWidths.length; i++){
|
||||
var p = t.find('div.portal-column:eq('+i+')');
|
||||
var w = Math.floor(width * columnWidths[i]);
|
||||
if (i == columnWidths.length - 1){
|
||||
// w = width - leftWidth - (hasScroll == true ? 28 : 10);
|
||||
w = width - leftWidth - (hasScroll == true ? 18 : 0);
|
||||
}
|
||||
p._outerWidth(w);
|
||||
leftWidth += p.outerWidth();
|
||||
|
||||
// resize every panel of the column
|
||||
p.find('div.portal-p').panel('resize', {width:p.width()});
|
||||
}
|
||||
opts.onResize.call(target, opts.width, opts.height);
|
||||
}
|
||||
|
||||
/**
|
||||
* set draggable feature for the specified panel
|
||||
*/
|
||||
function makeDraggable(target, panel){
|
||||
var spacer;
|
||||
panel.panel('panel').draggable({
|
||||
handle:'>div.panel-header>div.panel-title',
|
||||
proxy:function(source){
|
||||
var p = $('<div class="portal-proxy">proxy</div>').insertAfter(source);
|
||||
p.width($(source).width());
|
||||
p.height($(source).height());
|
||||
p.html($(source).html());
|
||||
p.find('div.portal-p').removeClass('portal-p');
|
||||
return p;
|
||||
},
|
||||
onBeforeDrag:function(e){
|
||||
e.data.startTop = $(this).position().top + $(target).scrollTop();
|
||||
},
|
||||
onStartDrag:function(e){
|
||||
$(this).hide();
|
||||
spacer = $('<div class="portal-spacer"></div>').insertAfter(this);
|
||||
setSpacerSize($(this).outerWidth(), $(this).outerHeight());
|
||||
},
|
||||
onDrag:function(e){
|
||||
var p = findPanel(e, this);
|
||||
if (p){
|
||||
if (p.pos == 'up'){
|
||||
spacer.insertBefore(p.target);
|
||||
} else {
|
||||
spacer.insertAfter(p.target);
|
||||
}
|
||||
setSpacerSize($(p.target).outerWidth());
|
||||
} else {
|
||||
var c = findColumn(e);
|
||||
if (c){
|
||||
if (c.find('div.portal-spacer').length == 0){
|
||||
spacer.appendTo(c);
|
||||
setSize(target);
|
||||
setSpacerSize(c.width());
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onStopDrag:function(e){
|
||||
$(this).css('position', 'static');
|
||||
$(this).show();
|
||||
spacer.hide();
|
||||
$(this).insertAfter(spacer);
|
||||
spacer.remove();
|
||||
setSize(target);
|
||||
panel.panel('move');
|
||||
|
||||
var opts = $.data(target, 'portal').options;
|
||||
opts.onStateChange.call(target);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* find which panel the cursor is over
|
||||
*/
|
||||
function findPanel(e, source){
|
||||
var result = null;
|
||||
$(target).find('div.portal-p').each(function(){
|
||||
var pal = $(this).panel('panel');
|
||||
if (pal[0] != source){
|
||||
var pos = pal.offset();
|
||||
if (e.pageX > pos.left && e.pageX < pos.left + pal.outerWidth()
|
||||
&& e.pageY > pos.top && e.pageY < pos.top + pal.outerHeight()){
|
||||
if (e.pageY > pos.top + pal.outerHeight() / 2){
|
||||
result = {
|
||||
target:pal,
|
||||
pos:'down'
|
||||
};
|
||||
} else {
|
||||
result = {
|
||||
target:pal,
|
||||
pos:'up'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* find which portal column the cursor is over
|
||||
*/
|
||||
function findColumn(e){
|
||||
var result = null;
|
||||
$(target).find('div.portal-column').each(function(){
|
||||
var pal = $(this);
|
||||
var pos = pal.offset();
|
||||
if (e.pageX > pos.left && e.pageX < pos.left + pal.outerWidth()){
|
||||
result = pal;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* set the spacer size
|
||||
*/
|
||||
function setSpacerSize(width, height){
|
||||
spacer._outerWidth(width);
|
||||
if (height){
|
||||
spacer._outerHeight(height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$.fn.portal = function(options, param){
|
||||
if (typeof options == 'string'){
|
||||
return $.fn.portal.methods[options](this, param);
|
||||
}
|
||||
|
||||
options = options || {};
|
||||
return this.each(function(){
|
||||
var state = $.data(this, 'portal');
|
||||
if (state){
|
||||
$.extend(state.options, options);
|
||||
} else {
|
||||
state = $.data(this, 'portal', {
|
||||
options: $.extend({}, $.fn.portal.defaults, $.fn.portal.parseOptions(this), options),
|
||||
columnWidths: init(this)
|
||||
});
|
||||
}
|
||||
if (state.options.border){
|
||||
$(this).removeClass('portal-noborder');
|
||||
} else {
|
||||
$(this).addClass('portal-noborder');
|
||||
}
|
||||
setSize(this);
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.portal.methods = {
|
||||
options: function(jq){
|
||||
return $.data(jq[0], 'portal').options;
|
||||
},
|
||||
resize: function(jq, param){
|
||||
return jq.each(function(){
|
||||
if (param){
|
||||
var opts = $.data(this, 'portal').options;
|
||||
if (param.width) opts.width = param.width;
|
||||
if (param.height) opts.height = param.height;
|
||||
}
|
||||
setSize(this);
|
||||
});
|
||||
},
|
||||
getPanels: function(jq, columnIndex){
|
||||
var c = jq; // the panel container
|
||||
if (columnIndex >= 0){
|
||||
c = jq.find('div.portal-column:eq(' + columnIndex + ')');
|
||||
}
|
||||
var panels = [];
|
||||
c.find('div.portal-p').each(function(){
|
||||
panels.push($(this));
|
||||
});
|
||||
return panels;
|
||||
},
|
||||
add: function(jq, param){ // param: {panel,columnIndex}
|
||||
return jq.each(function(){
|
||||
var c = $(this).find('div.portal-column:eq(' + param.columnIndex + ')');
|
||||
var p = param.panel.addClass('portal-p');
|
||||
p.panel('panel').addClass('portal-panel').appendTo(c);
|
||||
makeDraggable(this, p);
|
||||
p.panel('resize', {width:c.width()});
|
||||
});
|
||||
},
|
||||
remove: function(jq, panel){
|
||||
return jq.each(function(){
|
||||
var panels = $(this).portal('getPanels');
|
||||
for(var i=0; i<panels.length; i++){
|
||||
var p = panels[i];
|
||||
if (p[0] == $(panel)[0]){
|
||||
p.panel('destroy');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
disableDragging: function(jq, panel){
|
||||
panel.panel('panel').draggable('disable');
|
||||
return jq;
|
||||
},
|
||||
enableDragging: function(jq, panel){
|
||||
panel.panel('panel').draggable('enable');
|
||||
return jq;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.portal.parseOptions = function(target){
|
||||
var t = $(target);
|
||||
return {
|
||||
width: (parseInt(target.style.width) || undefined),
|
||||
height: (parseInt(target.style.height) || undefined),
|
||||
border: (t.attr('border') ? t.attr('border') == 'true' : undefined),
|
||||
fit: (t.attr('fit') ? t.attr('fit') == 'true' : undefined)
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.portal.defaults = {
|
||||
width:'auto',
|
||||
height:'auto',
|
||||
border:true,
|
||||
fit:false,
|
||||
onResize:function(width,height){},
|
||||
onStateChange:function(){}
|
||||
};
|
||||
})(jQuery);
|
||||
33
bin/WebRoot/JS/jquery-easyui-portal/portal.css
Normal file
33
bin/WebRoot/JS/jquery-easyui-portal/portal.css
Normal file
@ -0,0 +1,33 @@
|
||||
.portal{
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:1px solid #99BBE8;
|
||||
overflow:auto;
|
||||
}
|
||||
.portal-noborder{
|
||||
border:0;
|
||||
}
|
||||
.portal-panel{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.portal-column-td{
|
||||
vertical-align:top;
|
||||
}
|
||||
.portal-column{
|
||||
padding:10px 0 10px 10px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.portal-column-left{
|
||||
padding-left:10px;
|
||||
}
|
||||
.portal-column-right{
|
||||
padding-right:10px;
|
||||
}
|
||||
.portal-proxy{
|
||||
opacity:0.6;
|
||||
filter:alpha(opacity=60);
|
||||
}
|
||||
.portal-spacer{
|
||||
border:3px dashed #eee;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
110
bin/WebRoot/JS/jquery-easyui-portal/portal.html
Normal file
110
bin/WebRoot/JS/jquery-easyui-portal/portal.html
Normal file
@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Portal - jQuery EasyUI</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="portal.css">
|
||||
<style type="text/css">
|
||||
.title{
|
||||
font-size:16px;
|
||||
font-weight:bold;
|
||||
padding:20px 10px;
|
||||
background:#eee;
|
||||
overflow:hidden;
|
||||
border-bottom:1px solid #ccc;
|
||||
}
|
||||
.t-list{
|
||||
padding:5px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="../../jquery-1.7.1.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.portal.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#pp').portal({
|
||||
border:false,
|
||||
fit:true
|
||||
});
|
||||
add();
|
||||
});
|
||||
function add(){
|
||||
for(var i=0; i<3; i++){
|
||||
var p = $('<div/>').appendTo('body');
|
||||
p.panel({
|
||||
title:'Title'+i,
|
||||
content:'<div style="padding:5px;">Content'+(i+1)+'</div>',
|
||||
height:100,
|
||||
closable:true,
|
||||
collapsible:true
|
||||
});
|
||||
$('#pp').portal('add', {
|
||||
panel:p,
|
||||
columnIndex:i
|
||||
});
|
||||
}
|
||||
$('#pp').portal('resize');
|
||||
}
|
||||
function remove(){
|
||||
$('#pp').portal('remove',$('#pgrid'));
|
||||
$('#pp').portal('resize');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="easyui-layout">
|
||||
<div region="north" class="title" border="false" style="height:60px;">
|
||||
jQuery EasyUI Portal
|
||||
</div>
|
||||
<div region="center" border="false">
|
||||
<div id="pp" style="position:relative">
|
||||
<div style="width:30%;">
|
||||
<div title="Clock" style="text-align:center;background:#f3eeaf;height:150px;padding:5px;">
|
||||
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="100">
|
||||
<param name="movie" value="http://www.respectsoft.com/onlineclock/analog.swf">
|
||||
<param name=quality value=high>
|
||||
<param name="wmode" value="transparent">
|
||||
<embed src="http://www.respectsoft.com/onlineclock/analog.swf" width="100" height="100" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
|
||||
</object>
|
||||
</div>
|
||||
<div title="Tutorials" collapsible="true" closable="true" style="height:200px;padding:5px;">
|
||||
<div class="t-list"><a href="http://www.jeasyui.com/tutorial/datagrid/datagrid1.php">Build border layout for Web Pages</a></div>
|
||||
<div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/panel.php">Complex layout on Panel</a></div>
|
||||
<div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/accordion.php">Create Accordion</a></div>
|
||||
<div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/tabs.php">Create Tabs</a></div>
|
||||
<div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/tabs2.php">Dynamically add tabs</a></div>
|
||||
<div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/panel2.php">Create XP style left panel</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:40%;">
|
||||
<div id="pgrid" title="DataGrid" closable="true" style="height:200px;">
|
||||
<table class="easyui-datagrid" style="width:650px;height:auto"
|
||||
fit="true" border="false"
|
||||
singleSelect="true"
|
||||
idField="itemid" url="datagrid_data.json">
|
||||
<thead>
|
||||
<tr>
|
||||
<th field="itemid" width="60">Item ID</th>
|
||||
<th field="productid" width="60">Product ID</th>
|
||||
<th field="listprice" width="80" align="right">List Price</th>
|
||||
<th field="unitcost" width="80" align="right">Unit Cost</th>
|
||||
<th field="attr1" width="120">Attribute</th>
|
||||
<th field="status" width="50" align="center">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:30%;">
|
||||
<div title="Searching" iconCls="icon-search" closable="true" style="height:80px;padding:10px;">
|
||||
<input class="easyui-searchbox">
|
||||
</div>
|
||||
<div title="Graph" closable="true" style="height:200px;text-align:center;">
|
||||
<img height="160" src="http://knol.google.com/k/-/-/3mudqpof935ww/ip4n5y/web-graph.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user