Skip to content

Instantly share code, notes, and snippets.

@Bingnan

Bingnan/gist:1c4e8d2ebcf508e4e8f7

Created May 8, 2014 10:47
Show Gist options
  • Save Bingnan/1c4e8d2ebcf508e4e8f7 to your computer and use it in GitHub Desktop.
Save Bingnan/1c4e8d2ebcf508e4e8f7 to your computer and use it in GitHub Desktop.
Download ZIP
visual phone menu config 2
Raw
gistfile1.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Shopping Cart Demo</title>
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.droppable.js"></script>
<script src="../../ui/jquery.ui.sortable.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.accordion.js"></script>
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<style>
h1 { padding: .2em; margin: 0; }
#tiles { float:left; width: 500px; margin-right: 10em; }
.draggable { width: 100px; height: 100px; font-size: 1em; float: left; margin-right: 0.5em; margin-top: 0.5em; padding: 0;}
.ui-widget-content {
border: 1px solid #aaaaaa;
background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
color: #222222;
}
#screen { width: 322px; float: left; margin-top: 0em; margin-right: 10em; }
.ui-widget-target { background-color: #CCCCFF; height: 700px; width: 322px; position:relative; }
.ui-state-default-my { background-color: #e6e6e6; height: 700; width: 322px; }
.ui-state-hover-my { background-color: #dadada; height: 700; width: 322px; }
.item {
width: 100px;
height: 100px;
font-size: 1em;
float: left;
margin-right: 0.5em;
margin-top: 0.5em;
padding: 0;
border: 1px solid #aaaaaa;
border-color: red;
color: #222222;
background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
}
.placeholder { font-size: 1.5em; }
#result { float:left; width: 500px; }
#result-text { font-size: 1.5em; width: 500px; background-color: #FFFCCC}
</style>
<script>
$(document).ready(function(){
$( "#catalog" ).accordion();
$( ".draggable" ).draggable({
revert: "invalid",
snap: ".ui-widget-target",
snapMode: "inner",
appendTo: "body",
helper: "clone",
stop: function( event, ui ) {
//$( this ).addClass( "dropped" );
/*
$( this ).css({
"width":"100px",
"height":"100px",
"font-size": "1em",
"float": "left",
"margin-right": "0.5em",
"margin-top": "0.5em",
"padding":"0",
})
*/
}
});
$( ".ui-widget-target" ).droppable({
activeClass: "ui-state-default-my",
hoverClass: "ui-state-hover-my",
accept: ".draggable",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
//$( this ).append($(ui.helper).clone());
$( this ).append($(ui.draggable).clone());
$("#snapTarget .draggable").addClass("item").attr("id", function (index,oldvalue) {
return "dropped" + oldvalue;
});
///*
$(".item").removeClass("ui-draggable draggable ui-widget-content");
$(".item").draggable({
containment: "parent",
//grid: [100,100]
}).resizable({
grid: [100,100],
//containment: ".ui-widget-target",
aspectRatio: true,
});
//*/
}
});
/*
$( ".item" ).resizable({
grid: [100,100],
containment: "parent",
aspectRatio: true,
});
*/
});
function test(){
/*
Document_pos = $("html").position();
snapTarget_pos = $("#snapTarget").position();
item_pos = $("#Phone").position();
droppedPhone_pos = $("#droppedPhone").position();
droppedPhone_width = $("#droppedPhone").width();
droppedPhone_ofs = $("#droppedPhone").offset();
droppedPeople_pos = $("#droppedPeople").position();
droppedPeople_width = $("#droppedPeople").width();
alert("Document_pos Left:" + Document_pos.left + "Top:" + Document_pos.top);
alert("snapTarget_pos Left:" + snapTarget_pos.left + "Top:" + snapTarget_pos.top);
alert("item_pos Left:" + item_pos.left + "Top:" + item_pos.top);
alert("droppedPhone Left:" + droppedPhone_pos.left + "Top:" + droppedPhone_pos.top);
alert("droppedPhone_ofs Left:" + droppedPhone_ofs.left + "Top:" + droppedPhone_ofs.top);
alert("droppedPhone_width:" + droppedPhone_width);
alert("droppedPeople Left:" + droppedPeople_pos.left + "Top:" + droppedPeople_pos.top);
alert("droppedPeople_width:" + droppedPeople_width);
*/
//var value = new Array();
var value = $( ".item" );
alert(value[0].attr("id");
alert(value[1].attr("id"));
}
function calculatePosition(item) {
Document_pos = $("html").position();
snapTarget_pos = $("#snapTarget").position();
item_pos = $("#" + item).position();
alert("Document_pos Left:" + Document_pos.left + "Top:" + Document_pos.top);
alert("snapTarget_pos Left:" + snapTarget_pos.left + "Top:" + snapTarget_pos.top);
alert("item_pos Left:" + item_pos.left + "Top:" + item_pos.top);
row_num = Math.floor( ( item_pos.top )/100 );
column_num = Math.floor( ( item_pos.left )/100 );
return {row: row_num, column: column_num};
}
function exportResult(){
var item_arr = [ "Phone", "People", "Messaging", "Email", "Setting", "Calendar", "Camera", "Gallery", "MixRadio", "HERE" ];
$( "#result-text" ).text("Here is the result: " );
$.each( item_arr, function( item_index, item_val ) {
var result = calculatePosition( item_val );
$( "#result-text" ).append( document.createTextNode( item_val + ": (" + result.row + "," + result.column + ")" ) );
});
}
</script>
</head>
<body>
<div id="tiles">
<h1 class="ui-widget-header">Tiles Collection</h1>
<div id="catalog">
<h2><a href="#">NOKIA APP</a></h2>
<div>
<div id="Phone" class="draggable ui-widget-content">
<p>Phone</p>
</div>
<div id="People" class="draggable ui-widget-content">
<p>People</p>
</div>
<div id="Messaging" class="draggable ui-widget-content">
<p>Messaging</p>
</div>
<div id="Email" class="draggable ui-widget-content">
<p>Email</p>
</div>
<div id="Setting" class="draggable ui-widget-content">
<p>Setting</p>
</div>
</div>
<h2><a href="#">3rd-Party APP</a></h2>
<div>
<div id="Calendar" class="draggable ui-widget-content">
<p>Calendar</p>
</div>
<div id="Camera" class="draggable ui-widget-content">
<p>Camera</p>
</div>
<div id="Gallery" class="draggable ui-widget-content">
<p>Gallery</p>
</div>
<div id="MixRadio" class="draggable ui-widget-content">
<p>MixRadio</p>
</div>
<div id="HERE" class="draggable ui-widget-content">
<p>HERE</p>
</div>
</div>
<h2><a href="#">TEST APP</a></h2>
<div>
<ul>
<li id="Phone" class="draggable ui-widget-content">Phone</li>
<li id="People" class="draggable ui-widget-content">People</li>
<li id="Messaging" class="draggable ui-widget-content">Messaging</li>
</ul>
</div>
</div>
</div>
<div id="screen">
<h1 class="ui-widget-header">Phone Mainmenu</h1>
<div id="snapTarget" class="ui-widget-target">
<div class="placeholder">Drag Tiles Here</div>
</div>
</div>
<div id="result">
<h1 class="ui-widget-header">Export Result</h1>
<p>
<button type="button" onclick="exportResult()">ExportResult</button>
</p>
<p id="result-text">Layout result here:</p>
</div>
<p>
<button type="button" onclick="test()">test</button>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment