Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
- <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
- <!-- http://tinysort.sjeiti.com/ to sort dom nodes. -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.js"></script>
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
- <style>
- body {
- font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
- font-size: 62.5%;
- }
- #buddylistdiv {
- width: 300px;
- background: #c0c0c0
- }
- #buddylist {
- list-style-type: none;
- margin: 0;
- padding: 0;
- width: 100%;
- }
- #buddylist li div.buddytitle {
- margin: 3px;
- padding: 0.4em;
- font-size: 1.4em;
- height: 18px;
- background: #c0c0c0
- }
- #buddylist li div.buddydetails {
- font-size: 1.4em;
- background: #CCC;
- margin: 1px;
- padding: 0.1em;
- width: 97%;
- display: none;
- }
- #searchkey {
- margin: 1px;
- padding: 0.1em;
- width: 97%;
- }
- .online {
- float:left;
- color: green;
- }
- .offline {
- float:left;
- color: #AF0000;
- }
- </style>
- <script>
- function deleteBuddy(delBtn) {
- $("#dialog-confirm").html("Are you sure ?");
- $("#dialog-confirm").dialog({
- resizable: false,
- modal: true,
- title: "Modal",
- height: 250,
- width: 400,
- buttons: {
- "Sure": function () {
- var buddyLi = delBtn.parentNode.parentNode.parentNode;
- $(buddyLi).remove();
- $(this).dialog('close');
- },
- "No!": function () {
- $(this).dialog('close');
- }
- }
- });
- }
- function sortByName() {
- var buddyLiNodeList = $("#buddylist > li").get();
- tinysort(buddyLiNodeList, { selector: "[name=fullname]" });
- }
- function showDetails(e) {
- $(e.nextElementSibling).toggle();
- }
- $(function() {
- var dialog, form;
- var username = $('#username');
- var firstname = $('#firstname');
- var lastname = $('#lastname');
- var email = $('#email');
- var dob = $('#dob');
- var notes = $('#notes');
- var allFields = $([]).add(username).add(firstname).add(lastname);
- function createTitlesDiv() {
- var buddyTitleDiv = document.createElement("div");
- $(buddyTitleDiv).addClass("buddytitle");
- var statusSpan = document.createElement("span");
- $(statusSpan).attr("name", "status");
- $(statusSpan).text("[*]");
- $(statusSpan).addClass("online");
- $(buddyTitleDiv).append(statusSpan);
- var fullnameSpan = document.createElement("span");
- $(fullnameSpan).attr("name", "fullname");
- $(fullnameSpan).text(firstname.val() + " " + lastname.val());
- $(buddyTitleDiv).append(fullnameSpan);
- $(buddyTitleDiv).click(function () {
- showDetails(buddyTitleDiv);
- });
- var delBtn = document.createElement("button");
- $(delBtn).text("x");
- var delSpan = document.createElement("span");
- $(delSpan).css("float", "right");
- $(delSpan).append(delBtn);
- $(buddyTitleDiv).append(delSpan);
- $(delBtn).click(function () {
- deleteBuddy(delBtn);
- });
- return buddyTitleDiv;
- }
- function createTr(nodeName, nodeLabel, nodeValue){
- var tr = document.createElement('tr');
- var td1 = document.createElement('td');
- $(td1).attr("name",nodeName);
- $(td1).text(nodeLabel);
- var td2 = document.createElement("td");
- $(td2).text(nodeValue);
- tr.appendChild(td1);
- tr.appendChild(td2);
- return tr;
- }
- function createDetailDiv(){
- var buddyDetailDiv = document.createElement("div");
- var tbl = document.createElement("table");
- var nametr = document.createElement("tr");
- var nametd = document.createElement("td");
- buddyDetailDiv.appendChild(tbl);
- $(tbl).append(createTr("username","username", $(username).val()));
- $(tbl).append(createTr("firstname","Firstname", $(firstname).val()));
- $(tbl).append(createTr("lastname","Lastname", $(lastname).val()));
- $(tbl).append(createTr("email","Email Id", $(email).val()));
- $(tbl).append(createTr("dob","Date Of Birth", $(dob).val()));
- $(tbl).append(createTr("notes","Bio", $(notes).val()));
- $(buddyDetailDiv).addClass("buddydetails");
- return buddyDetailDiv;
- }
- function addBuddy() {
- var buddyLi = document.createElement("li");
- var buddyTitleDiv = createTitlesDiv();
- var buddyDetailDiv = createDetailDiv();
- buddyLi.appendChild(buddyTitleDiv);
- buddyLi.appendChild(buddyDetailDiv);
- $("#buddylist").append(buddyLi);
- $( dialog ).dialog( "close" );
- }
- dialog = $( "#add-buddy-form" ).dialog({
- autoOpen: false,
- height: 300,
- width: 350,
- modal: true,
- buttons: {
- "Add buddy": addBuddy,
- Cancel: function() {
- dialog.dialog( "close" );
- }
- },
- close: function() {
- form[ 0 ].reset();
- allFields.removeClass( "ui-state-error" );
- }
- });
- form = dialog.find( "form" ).on( "submit", function( event ) {
- event.preventDefault();
- addBuddy();
- });
- $( "#add-buddy-button" ).button().on( "click", function() {
- dialog.dialog( "open" );
- });
- $(function () {
- $("#buddylist").sortable();
- $("#buddylist").disableSelection();
- });
- $("#searchkey").keyup(function () {
- var searchKey = $("#searchkey").val().toLowerCase();
- $("#buddylist > li").each(function() {
- var actualName = $(this).find("[name=fullname]").text().toLowerCase();
- if (actualName.indexOf(searchKey) == -1) {
- $(this).hide();
- } else {
- $(this).show();
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <div id="add-buddy-form" title="Add new buddy!">
- <form>
- <fieldset>
- <table>
- <tr>
- <td><label for="username">Username</label></td>
- <td><input type="text" name="username" id="username" placeholder="username" class="text ui-widget-content ui-corner-all"></td>
- </tr>
- <tr>
- <td><label for="firstname">Firstname</label></td>
- <td><input type="text" name="firstname" id="firstname" placeholder="Firstname"
- class="text ui-widget-content ui-corner-all"></td>
- </tr>
- <tr>
- <td><label for="lastname">Lastname</label></td>
- <td><input type="text" name="lastname" id="lastname" placeholder="Lastname"
- class="text ui-widget-content ui-corner-all"></td>
- </tr>
- <tr>
- <td><label for="email">Email</label></td>
- <td><input type="email" name="email" id="email" placeholder="email@example.com"
- class="text ui-widget-content ui-corner-all"></td>
- </tr>
- <tr>
- <td><label for="dob">Date Of Birth</label></td>
- <td><input type="text" name="dob" id="dob" placeholder="MM/DD/YYYY"
- class="text ui-widget-content ui-corner-all"></td>
- </tr>
- <tr>
- <td><label for="notes">Notes</label></td>
- <td><input type="text" name="notes" id="notes" placeholder="About buddy"
- class="text ui-widget-content ui-corner-all"></td>
- </tr>
- <!-- Allow form submission with keyboard without duplicating the dialog button -->
- <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
- </table>
- </fieldset>
- </form>
- </div>
- <div id="dialog-confirm"></div>
- <div id="buddylistdiv">
- <button id="add-buddy-button">Add Buddy</button>
- <button id="sort-by-name-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" onclick="sortByName()">
- <span class="ui-button-text">Sort</span>
- </button>
- <br /><br />
- <input type="text" id="searchkey" placeholder="Search name here..."></input>
- <br /><br />
- <ul id="buddylist">
- <li>
- <div class="buddytitle" onclick="showDetails(this);">
- <span class="online" name="status">[*]</span>
- <span name="fullname">Manali Krish</span>
- <span style="float:right">
- <button onclick="deleteBuddy(this)">x</button>
- </span>
- </div>
- <div class="buddydetails">
- <table>
- <tr>
- <td name="username">username</td>
- <td>Manali10</td>
- </tr>
- <tr>
- <td name="firstname">Firstname</td>
- <td>Manali</td>
- </tr>
- <td name="lastname">Lastname</td>
- <td>krish</td>
- </tr>
- <tr>
- <td name="email">Email Id</td>
- <td>manali@gmail.com</td>
- </tr>
- <tr>
- <td name="dob">Date Of Birth</td>
- <td>10/03/1988</td>
- </tr>
- <tr>
- <td name="notes">Bio</td>
- <td>Hi</td>
- </tr>
- </table>
- </div>
- </li>
- <li>
- <div class="buddytitle" onclick="showDetails(this);">
- <span class="offline" name="status">[*]</span>
- <span name="fullname">Arti Shirbhate</span>
- <span style="float:right">
- <button onclick="deleteBuddy(this)">x</button>
- </span>
- </div>
- <div class="buddydetails">
- <table>
- <tr>
- <td name="username">username</td>
- <td>huhubhu</td>
- </tr>
- <tr>
- <td name="firstname">Firstname</td>
- <td>Arti</td>
- </tr>
- <tr>
- <td name="lastname">Lastname</td>
- <td>Shirbhate</td>
- </tr>
- <tr>
- <td name="email">Email Id</td>
- <td>arti@gmail.com</td>
- </tr>
- <tr>
- <td name="dob">Date Of Birth</td>
- <td>10/02/1989</td>
- </tr>
- <tr>
- <td name="notes">Bio</td>
- <td>I am me</td>
- </tr>
- </table>
- </div>
- </li>
- </ul>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement