Commit 3db8de24 authored by Lingnan Wu's avatar Lingnan Wu

change the style of index.html ,seperate the js function , add a listnumber for the list object

parent e772613d
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>jQuery Mobile: Pages within Pages</title> <title>OfficeJS-Mobile</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.0.css" /> <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.0.css" />
<script src="js/jquery.js"></script> <script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script> <script src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="lib/jstorage/jstorage.js"></script> <script type="text/javascript" src="lib/jstorage/jstorage.js"></script>
<script type="text/javascript" src="src/localorcookiestorage.js"></script> <script type="text/javascript" src="src/localorcookiestorage.js"></script>
<script type="text/javascript" src="src/jio.js"></script> <script type="text/javascript" src="src/jio.js"></script>
<script type="text/javascript" src="lib/base64/base64.js"></script> <script type="text/javascript" src="lib/base64/base64.js"></script>
<script type="text/javascript" src="lib/sjcl/sjcl.min.js"></script> <script type="text/javascript" src="lib/sjcl/sjcl.min.js"></script>
<script type="text/javascript" src="src/jio.storage.js"></script> <script type="text/javascript" src="src/jio.storage.js"></script>
<script type="text/javascript" src="js/officejs-mobile.js"></script> <script type="text/javascript" src="js/officejs-mobile.js"></script>
<script type="text/javascript" src="js/list-page.js"></script>
<script type="text/javascript" src="js/text-editor.js"></script>
</head> </head>
<body> <body>
<!---------------------------------------------------------- Home ---------------------------------------------------------------> <!---------------------------------------------------------- Home --------------------------------------------------------------->
<div data-role="page" id="home"> <div data-role="page" id="home">
<div data-role="header"> <div data-role="header">
<h1>OfficeJs-Mobile</h1> <h1>OfficeJs-Mobile</h1>
</div> </div>
<div data-role="content" style="padding: 15px"> <div data-role="content" style="padding: 15px">
<div data-role="fieldcontain"> <div data-role="fieldcontain">
<fieldset data-role="controlgroup"> <fieldset data-role="controlgroup">
<label class="control-label ui-input-text" for="input_json_storage"> <label class="control-label ui-input-text" for="input_json_storage">
JSON Storage JSON Storage
</label> </label>
<input class="input-xlarge" type="text" name="JSONstorage" id="input_json_storage" placeholder="storage" value="{&quot;type&quot;:&quot;local&quot;,&quot;userName&quot;:&quot;lingnan&quot;}" >
<input class="input-xlarge"
type="text" name="JSONstorage" id="input_json_storage" placeholder="storage" value="{&quot;type&quot;:&quot;local&quot;,&quot;userName&quot;:&quot;lingnan&quot;}" >
</fieldset> </fieldset>
</div> </div>
<div data-role="fieldcontain"> <div data-role="fieldcontain">
<fieldset data-role="controlgroup"> <fieldset data-role="controlgroup">
<label class="control-label ui-input-text" for="JSONapplicantID"> <label class="control-label ui-input-text" for="JSONapplicantID">
JSON Application JSON Application
</label> </label>
<input class="input-xlarge" type="text" name="JSONapplicant" id="input_json_applicant" value="{&quot;ID&quot;:&quot;jiotests&quot;}" placeholder="applicant" />
<input class="input-xlarge"
type="text" name="JSONapplicant" id="input_json_applicant"
value="{&quot;ID&quot;:&quot;jiotests&quot;}"
placeholder="applicant" />
</fieldset> </fieldset>
</div> </div>
<a href="#tools" data-role="button" data-transition="slideup" data-theme="b" onclick="OfficeJS.setJio($('#input_json_storage').attr('value'),
<a href="#tools" data-role="button" data-transition="slideup" data-theme="b" onclick="OfficeJS.setJio( $('#input_json_applicant').attr('value'));">
$('#input_json_storage').attr('value'), Create New JIO
$('#input_json_applicant').attr('value'));">Create New JIO</a> </a>
</div> </div>
</div> </div>
<!-----------------------------------------------------Tools Page--------------------------------------------------------------> <!-----------------------------------------------------Tools Page-------------------------------------------------------------->
<div data-role="page" id="tools"> <div data-role="page" id="tools">
<div data-role="header"> <div data-role="header">
<a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" href="#home" data-theme="a"> <a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" href="#home" data-theme="a">
<span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-inner ui-btn-corner-all">
...@@ -69,7 +56,6 @@ ...@@ -69,7 +56,6 @@
</a> </a>
<h1>Tools</h1> <h1>Tools</h1>
</div> </div>
<div data-role="content" style="padding: 15px"> <div data-role="content" style="padding: 15px">
<ul data-role="listview" data-divider-theme="b" data-inset="true"> <ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading"> <li data-role="list-divider" role="heading">
...@@ -104,10 +90,8 @@ ...@@ -104,10 +90,8 @@
</div> </div>
</div> </div>
<!-------------------------------------------------------List Page------------------------------------------------------------->
<!-------------------------------------------------------List Page------------------------------------------------------------->
<div data-role="page" id="list"> <div data-role="page" id="list">
<div data-role="header"> <div data-role="header">
<a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" href="#tools" data-theme="a"> <a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" href="#tools" data-theme="a">
<span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-inner ui-btn-corner-all">
...@@ -117,83 +101,14 @@ ...@@ -117,83 +101,14 @@
</a> </a>
<h1>Your list of Docs</h1> <h1>Your list of Docs</h1>
</div> </div>
<div data-role="content" style="padding: 15px"> <div data-role="content" style="padding: 15px">
<ul class="ui-listview" data-role="listview" id="textlist"> <ul class="ui-listview" data-role="listview" id="textlist">
</ul> </ul>
<script type="text/javascript">
NewList = function (listname,listcontent){
//get the main list
var mainList = document.getElementById("textlist");
//set the new element
newElement = document.createElement("li");
newElement.setAttribute("class","ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c");
newElement.setAttribute("data-theme","c");
newElement.setAttribute("data-iconpos","right");
newElement.setAttribute("data-icon","arrow-r");
newElement.setAttribute("data-wrapperels","div");
newElement.setAttribute("data-iconshadow","true");
newElement.setAttribute("data-shadow","false");
newElement.setAttribute("data-corners","false");
mainList.appendChild(newElement);
//set firstdiv
newFirstdiv = document.createElement("div");
newFirstdiv.setAttribute("class","ui-btn-inner ui-li");
newElement.appendChild(newFirstdiv);
//set seconddiv
newSeconddiv = document.createElement("div");
newSeconddiv.setAttribute("class","ui-btn-text");
newFirstdiv.appendChild(newSeconddiv);
//set a tag
newa = document.createElement("a");
newa.setAttribute("class","ui-link-inherit");
newa.setAttribute("href","#text");
newa.setAttribute("onclick","console.log('asdf a');setTextEditorInformation(listname,listcontent);");
newSeconddiv.appendChild(newa);
//set head
newhead = document.createElement("h3");
newhead.setAttribute("class","ui-li-heading");
newa.appendChild(newhead);
newHeadtext = document.createTextNode(listname);
newhead.appendChild(newHeadtext);
//set content
newcontent = document.createElement("p");
newcontent.setAttribute("class","ui-li-desc");
newa.appendChild(newcontent);
newContenttext = document.createTextNode(listcontent);
newcontent.appendChild(newContenttext);
//set shadow
newshadow = document.createElement("span");
newshadow.setAttribute("class","ui-icon ui-icon-arrow-r ui-icon-shadow");
newFirstdiv.appendChild(newshadow);
}
function CreateLists(){
//clean all the lists
var n = document.getElementById('textlist').childNodes.length;
for ( var i = 0; i < n; i++) {
document.getElementById('textlist').removeChild(
document.getElementById('textlist').firstChild);
}
//set the new lists
for(i=0;i<OfficeJS.list.length;i++){
NewList(OfficeJS.list[i].title,OfficeJS.list[i].text);}
}
</script>
</div> </div>
</div> </div>
<!---------------------------------------------------------Text Page------------------------------------------------------------->
<!---------------------------------------------------------Text Page------------------------------------------------------------->
<div data-role="page" id="text"> <div data-role="page" id="text">
<div data-role="header"> <div data-role="header">
<a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" href="#tools" data-theme="a"> <a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" href="#tools" data-theme="a">
<span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-inner ui-btn-corner-all">
...@@ -203,7 +118,6 @@ ...@@ -203,7 +118,6 @@
</a> </a>
<h1>Text Editor</h1> <h1>Text Editor</h1>
</div> </div>
<div data-role="content" style="padding: 15px"> <div data-role="content" style="padding: 15px">
<div data-role="content" style="padding: 15px"> <div data-role="content" style="padding: 15px">
<div data-role="fieldcontain"> <div data-role="fieldcontain">
...@@ -211,7 +125,7 @@ ...@@ -211,7 +125,7 @@
<label for="input_file_name"> <label for="input_file_name">
Name Name
</label> </label>
<input id="input_file_name" placeholder="" value="" type="text"> <input id="input_file_name" placeholder="" value="" type="text"/>
</fieldset> </fieldset>
</div> </div>
<div data-role="fieldcontain"> <div data-role="fieldcontain">
...@@ -227,18 +141,7 @@ ...@@ -227,18 +141,7 @@
Save Save
</a> </a>
</div> </div>
<script>
function setTextEditorInformation(name,content){
var nameTextarea = document.getElementById("input_file_name");
nameTextarea.value=name;
var contentTextarea = document.getElementById("input_file_content");
contentTextarea.value=content;
}
</script>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
//automatically build the list
NewList = function (listnumber,listname,listcontent){
var listNumber=listnumber;
//get the main list
var mainList = document.getElementById("textlist");
//set the new element
newElement = document.createElement("li");
newElement.setAttribute("class","ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c");
newElement.setAttribute("data-theme","c");
newElement.setAttribute("data-iconpos","right");
newElement.setAttribute("data-icon","arrow-r");
newElement.setAttribute("data-wrapperels","div");
newElement.setAttribute("data-iconshadow","true");
newElement.setAttribute("data-shadow","false");
newElement.setAttribute("data-corners","false");
mainList.appendChild(newElement);
//set firstdiv
newFirstdiv = document.createElement("div");
newFirstdiv.setAttribute("class","ui-btn-inner ui-li");
newElement.appendChild(newFirstdiv);
//set seconddiv
newSeconddiv = document.createElement("div");
newSeconddiv.setAttribute("class","ui-btn-text");
newFirstdiv.appendChild(newSeconddiv);
//set a tag
newa = document.createElement("a");
newa.setAttribute("class","ui-link-inherit");
newa.setAttribute("href","#text");
//set the listnumber to control
newa.setAttribute("value",listNumber);
newa.setAttribute("onclick","setTextEditorInformation(OfficeJS.list[i].title,OfficeJS.list[i].title,OfficeJS.list[i].title,OfficeJS.list[i].text);");
newSeconddiv.appendChild(newa);
//set head
newhead = document.createElement("h3");
newhead.setAttribute("class","ui-li-heading");
newa.appendChild(newhead);
newHeadtext = document.createTextNode(listname);
newhead.appendChild(newHeadtext);
//set content
newcontent = document.createElement("p");
newcontent.setAttribute("class","ui-li-desc");
newa.appendChild(newcontent);
newContenttext = document.createTextNode(listcontent);
newcontent.appendChild(newContenttext);
//set shadow
newshadow = document.createElement("span");
newshadow.setAttribute("class","ui-icon ui-icon-arrow-r ui-icon-shadow");
newFirstdiv.appendChild(newshadow);
}
function CreateLists(){
//clean all the lists
var n = document.getElementById('textlist').childNodes.length;
for ( var i = 0; i < n; i++) {
document.getElementById('textlist').removeChild(
document.getElementById('textlist').firstChild);
}
//set the new lists
for(i=0;i<OfficeJS.list.length;i++){
NewList(i,OfficeJS.list[i].title,OfficeJS.list[i].text);
}
}
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
var that = {}, priv = {}; var that = {}, priv = {};
// Attributes // // Attributes //
that.list=new Array();//数组 that.list=new Array();//List for ListPage
priv.preference_object = { priv.preference_object = {
...@@ -513,15 +513,11 @@ that.list=new Array();//数组 ...@@ -513,15 +513,11 @@ that.list=new Array();//数组
that.getList(); that.getList();
} }
});*/ });*/
var obj=new Object();//new object var newlist=new Object();//new object
newlist.title=basename;//object title and text
obj.title=basename;//object title and text newlist.text=content;
obj.text=content; newlist.number=that.list.length;
that.list.push(obj);//save in the list
that.list.push(obj);//save in the list
}; };
/** /**
......
//set the text Editor
function setTextEditorInformation(name,content){
var nameTextarea = document.getElementById("input_file_name");
nameTextarea.value=name;
var contentTextarea = document.getElementById("input_file_content");
contentTextarea.value=content;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment