Wednesday 9th of February

by bmosca

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/13.2.0/jqwidgets/styles/jqx.material-purple.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/13.2.0/jqwidgets/jqx-all.js"></script>
<table class="search-table;" id="accordion">
  <thead>
    <tr>
      <td rowspan=2 id="kanban1"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width:100%">
        <div class="expand">
            <div>DESL-DEV_SS04018</div>
            <div id="kanban2" style="width: 100%; height: 170px;" class="jqx-widget jqx-widget-material-purple jqx-kanban jqx-kanban-material-purple"></div>    
        </div>
        <div class="collapsed">
            <div>DESL-DEV_SS04018</div>
            <div id="kanban3" style="width: 100%; height: 170px;" class="jqx-widget jqx-widget-material-purple jqx-kanban jqx-kanban-material-purple"></div>    
        </div>
        <div class="collapsed">
            <div>DESL-DEV_SS04018</div>
            <div id="kanban4" style="width: 100%; height: 170px;" class="jqx-widget jqx-widget-material-purple jqx-kanban jqx-kanban-material-purple"></div>    
        </div>
        
      </td>
    </tr>
  </thead>
</table>
<div id="menu">
  <ul>
    <li><a href="#">Upload File</a></li>
  </ul>
</div>

<div id='jqxwindow'>
    <div id="jqxFileUpload"></div>    
</div>

CSS

.jqx-icon-close-white {
    background-color: rgb(0,0,0);
}

JavaScript

//$('#splitter').jqxSplitter({ width: 800, height: 600, panels: [{ size: 250, min: 100 }, { min: 250 }] });
$("#jqxwindow").jqxWindow({ width: 300, height: 100, autoOpen: false });
$('#jqxFileUpload').jqxFileUpload({ width: 300, uploadUrl: 'upload.php', fileInputName: 'fileToUpload' });
$(".expand").jqxExpander({ theme: "material-purple", expanded: true });
$(".collapsed").jqxExpander({ theme: "material-purple", expanded: false });

			var imageMoved = false;
            
            var fields = [
                      { name: "status", map: "state", type: "string" },
                      { name: "text", map: "label", type: "string" },
                      { name: "tags", type: "string" },
                      { name: "color", map: "hex", type: "string" },
                      { name: "resourceId", type: "number" }
            ];
            var source =
             {
                 localData: [
                          { state: "new1", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 9 },
                          { state: "new1", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1 },
                          { state: "new1", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 3 },
                          { state: "new1", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1 }
                 ],
                 dataType: "array",
                 dataFields: fields
             };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var resourcesAdapterFunc = function () {
                var resourcesSource =
                {
                    localData: [
                          { id: 0, name: "No name", image: "https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png", common: true },
                          { id: 1, name: "Andrew Fuller", image:...