// Your player controller js file
(function(param){
var btnArray = new Array();
param.fnData = function()
{
loadData();
}
param.arr = function()
{
return btnArray;
}
function addButtonEvents()
{
for(var i=0;i<btnArray.length;i++)
{
btnArray[i].bind('click',handleButtonEvents)
}
}
function handleButtonEvents(e)
{
var obj = $(e.target)
console.log(obj.html())
}
function loadData(){
$(".urClass").empty(); // div class where you want to add your divs
var jsonLoad = "js/data.json";
var tempItems = "";
$.ajax({
url: jsonLoad,
type: "post",
async:true,
dataType:"json",
data: {},
success: function(data){
$("div#headerText").text(data.headerTextData); // add header text from json
$("div#footerText").text(data.footerTextData); // add footer text from json
var tempVal;
var tempValImage;
var paddingLeft=0;
var paddingLeftImage=0;
for (var i = 0; i < data.dataArr.length; i++) {
tempVal=100*i+10+paddingLeft;
var tempObj = new nSpace.myObj(i,tempVal,data.dataArr[i])
tempItems = tempObj.getHTMLdata();
paddingLeft=paddingLeft+5;
$(". urClass").append(tempItems);
btnArray.push(tempItems)
};
console.log(tempItems);
addButtonEvents();
}
});
}
})(nSpace = nSpace || {})
var nSpace;
// your data class who return html content
nSpace.myObj = function(nID,nLeft,Data)
{
var htmlData = ''
function init()
{
htmlData = $('<div id="obj'+nID+'" class="" style="width:100px; height:50px; left:'+nLeft+'px; top:110px; position:absolute; background-color:grey; margin-right: 2cm; line-height: 50px;")>'+Data+'</div>');
}
init()
return{
getHTMLdata:function()
{
return htmlData;
}
}
}
// Your JSON class , from where your data comes
{
"headerTextData":"This is heading",
"dataArr":["Home","About-Us","Gallery","Contact-Us","Products"],
"gallaryImageArr":["images/icon1.png","images/icon2.png","images/icon3.png","images/icon4.png"],
"footerTextData":"This is footerText"
}
(function(param){
var btnArray = new Array();
param.fnData = function()
{
loadData();
}
param.arr = function()
{
return btnArray;
}
function addButtonEvents()
{
for(var i=0;i<btnArray.length;i++)
{
btnArray[i].bind('click',handleButtonEvents)
}
}
function handleButtonEvents(e)
{
var obj = $(e.target)
console.log(obj.html())
}
function loadData(){
$(".urClass").empty(); // div class where you want to add your divs
var jsonLoad = "js/data.json";
var tempItems = "";
$.ajax({
url: jsonLoad,
type: "post",
async:true,
dataType:"json",
data: {},
success: function(data){
$("div#headerText").text(data.headerTextData); // add header text from json
$("div#footerText").text(data.footerTextData); // add footer text from json
var tempVal;
var tempValImage;
var paddingLeft=0;
var paddingLeftImage=0;
for (var i = 0; i < data.dataArr.length; i++) {
tempVal=100*i+10+paddingLeft;
var tempObj = new nSpace.myObj(i,tempVal,data.dataArr[i])
tempItems = tempObj.getHTMLdata();
paddingLeft=paddingLeft+5;
$(". urClass").append(tempItems);
btnArray.push(tempItems)
};
console.log(tempItems);
addButtonEvents();
}
});
}
})(nSpace = nSpace || {})
var nSpace;
// your data class who return html content
nSpace.myObj = function(nID,nLeft,Data)
{
var htmlData = ''
function init()
{
htmlData = $('<div id="obj'+nID+'" class="" style="width:100px; height:50px; left:'+nLeft+'px; top:110px; position:absolute; background-color:grey; margin-right: 2cm; line-height: 50px;")>'+Data+'</div>');
}
init()
return{
getHTMLdata:function()
{
return htmlData;
}
}
}
// Your JSON class , from where your data comes
{
"headerTextData":"This is heading",
"dataArr":["Home","About-Us","Gallery","Contact-Us","Products"],
"gallaryImageArr":["images/icon1.png","images/icon2.png","images/icon3.png","images/icon4.png"],
"footerTextData":"This is footerText"
}
// index file
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/playerController.js"></script>
<script type="text/javascript" src="js/dataClass.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="masterDiv">
<div id="headerText"></div>
<div class="menuBar"></div>
<div id="footerText"></div>
</div>
</body>
</html>
No comments:
Post a Comment