Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
   <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css'>
<link rel='stylesheet prefetch' href='http://vitalets.github.io/x-editable/assets/jquery-ui-1.10.1.custom/css/redmond/jquery-ui-1.10.1.custom.css'>
​
  
  
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src='http://vitalets.github.io/x-editable/assets/poshytip/jquery.poshytip.js'></script><script src='http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js'></script><script src='http://vitalets.github.com/x-editable/assets/x-editable/jquery-editable/js/jquery-editable-poshytip.js'></script><script src='http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js'></script><script src='http://vitalets.github.io/x-editable/assets/x-editable/jquery-editable/jquery-ui-datepicker/js/jquery-ui-1.10.3.custom.js'></script><script src='http://vitalets.github.io/x-editable/assets/momentjs/moment.min.js'></script><script src='http://apollowebstudio.com/labs/js/sugarcrm-pm/jquery.mockjson.js'></script><script src='http://apollowebstudio.com/labs/js/sugarcrm-pm/showLoading.js'></script>
​
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
  <table>
​
  <!-- test task list record 1 -->
  <tr id="task-row-1414135033730" data-task-id="1414135033730">
    <td width="1%" class="task-checkbox">
      <div class="status_update status-checkbox-Not-Started" data-id="1414135033730" data-status="Not Started" id="1414135033730"></div>
    </td>
    
    <td width="59%" class="task-name">
      <div><span id="1414135033730-taskName" class="taskName strikethrough">Add a Plugin System similar to WordPress Action and Filter Hooks
        <span class="open-description-icon open-description-icon-close" title"toggle="" description="" view"="">+</span>
        </span>
        <div class="description" style="display: block;">Project module will Fire Events before and After key events and Plugins in a custom/modulename/plugins/ folder will load and be able to Listen for these Event Hooks and then run it;s own code before and after these actions are executed!</div>
      </div>
    </td>
    <td width="10%">
      <div id="1414135033730-status" class="Not Started status">Not Started</div>
    </td>
    <td width="10%">
      <div class="priority">Low</div>
    </td>
    <td width="10%">
      <div class="type">Other</div>
    </td>
    <td width="10%">
      <div id="1414135033730-createdDate" class="createdDate">2014-10-24 07:18:41</div>
    </td>
    <td width="10%">
      <div id="1414135033730-modifiedDate" class="modifiedDate">2014-10-24 07:18:41</div>
    </td>
  </tr>
​
  <!-- test task list record 2 -->
  <tr id="task-row-1414135033731" data-task-id="1414135033731">
    <td width="1%" class="task-checkbox">
      <div class="status_update status-checkbox-Completed" data-id="1414135033731" data-status="Completed" id="1414135033731"></div>
    </td>
​
    <td width="59%" class="task-name">
      <div>
        <span id="1414135033730-taskName" class="taskName">Testing Task Record Number 2
        <span class="open-description-icon open-description-icon-close" title"toggle="" description="" view"="">+</span>
        </span>
        <div class="description" style="display: block;">My project task description for demo testing task record number 2!</div>
      </div>
    </td>
    <td width="10%">
      <div id="1414135033731-status" class="Completed status">Completed</div>
    </td>
    <td width="10%">
      <div class="priority">High</div>
    </td>
    <td width="10%">
      <div class="type">Magento</div>
    </td>
    <td width="10%">
      <div id="1414135033731-createdDate" class="createdDate">2014-10-27 03:10:14</div>
    </td>
    <td width="10%">
      <div id="1414135033731-modifiedDate" class="modifiedDate">2014-10-27 03:22:24</div>
    </td>
  </tr>
</table>
​
​
<hr>
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
<!-- Task Modal HTML -->
<div class="modal-backdrop fade in"></div>
<div class="Modal Modal--visible Modal--task">
<div class="Modal-dialog">
    <div class="Modal-content">
        <div style="overflow:hidden; height:100%;">
            <div class="Task-header">
                <h4 class="Task-heading"><span class="Task-title-header">Task Name Here</span></h4>
                <!--<a href="#" id="Task-Reload-Events">Reload Task Events</a>-->
                <a href="#" id="Task-close-modal" title="Close Task Modal">×</a>
                <a href="#" id="Task-Reload-Events" title="Reload Task Events">*</a>
            </div>
          <div class="clearboth"></div>
            <div class="Task-overview task-active">
                <div class="Task-details">
                    <div class="Task-basic">
                        <div class="Task-status"><span class="Task-status-severity">Urgent</span><span class="DueMessage"><span>30 Apr 15</span></span>
                        </div>
                      
                        <div class="Task-title-wrap">
                          <span id="task-title-modal" class="Task-title">SugarCRM PM Task Modal</span>
                        </div>
                      
                        <div class="Task-description-wrap scrollbar-outer">
                            <span id="task-description-modal" class="Task-description"></span>
                        </div>
                    </div>
                </div>
                <div class="Task-attributes">
                    <div class="Attribute Attribute--Due">
                      <h4>Due Date:</h4><span id="task-due-date-modal" class="Due-date">30 April 2015</span>
                      <h4>Created Date:</h4><span id="task-created-date-modal" class="Created-date">30 April 2015</span>
                      <h4>Modified Date:</h4><span id="task-modified-date-modal" class="Modified-date">30 April 2015</span>
                    </div>
                  
                    <div class="Attribute Attribute--Milestone">
                        <h4>Milestone:</h4>
                        <div class="Milestone">
                          <span class="">Milestone 2</span>
                        </div>
                    </div>
                  
                    <div class="Attribute Attribute--Status">
                        <h4>Status:</h4>
                        <div id="task-status-modal" class="task-status-modal">
                          In Progress
                        </div>
                    </div>
                  
                    <div class="Attribute Attribute--Priority">
                        <h4>Priority:</h4>
                        <div class="">
                          Urgent
                        </div>
                    </div>
                  
                    <div class="Attribute Attribute--Type">
                        <h4>Type:</h4>
                        <div class="">
                          <span class="">SugarCRM</span>
                        </div>
                    </div>
                 
                </div>
            </div>
​
            <!-- END TASK DETAILS LEFT SIDE-->
          
​
          
          
            <!-- START TASK EVENTS/COMMENTS RIGHT SIDE-->
​
            <div id="Task-events-wrap" class="Task-events task-active">
                <div id="task-events-loader-img"></div>
                <div class="Activity">
                    <div id="Task-events-inner-wrap" class="Activity-list scrollbar-outer">
​
                        <!-- comment -->
                        <div class="Activity-item Activity-comment"><span class="Avatar Avatar--bordered Avatar--s" style="background-color:hsl(10436, 80%, 45%);"><span class="Avatar-initials">J</span><span class="Avatar-image" style="background-image:url(https://gravatar.com/avatar/c95b8fe70748ef1caebb8e55cd090083.png?s=64&amp;d=blank);"></span></span>
                            <div class="Activity-details">
                                <h4><span>Jason Davis</span><span> </span></h4><span class="Activity-content"><p>Task modal is coming along nicely so far!</p></span>
                                <div class="Activity-date-time">Mar 23, 2015 3:15 AM</div>
                            </div>
                        </div>
                      
                    </div>
                    <div class="Activity-add">
                        <form id="new_task_comment_form">
                            <inout type="hidden" id="new_task_cmt_event_type" name="new_task_cmt_event_type" value="3">
                            <inout type="hidden" id="new_task_cmt_project_id" name="new_task_cmt_project_id" value="">
                            <inout type="hidden" id="new_task_cmt_task_id" name="new_task_cmt_task_id" value="">
                            <input type="text" name="new_task_cmt_description" id="new_task_cmt_description" placeholder="Add a comment">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
      
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  
  
  
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jasondavispro
0viewers