CSS样式不粘 [英] CSS style not sticking
问题描述
所以这有点复杂
我已经使用phonegap创建了一个应用程序。我试图实现一个待办事项列表。
我发现了一个很好的示例javascript方法，我已经放到主index.html文档中。
I have created an app using phonegap. I am trying to implement a "to-do" list. I have found a great example javascript method, which I have put into the main index.html document.
因此，当应用程序首次启动时，它工作正常，并且看起来应该是这样：
So when the app first launches, it works fine and looks the way it's supposed to:
它可以让我添加新的dos ，检查一堆要删除，或者点击按钮删除它们等。
it lets me add new to dos, check a bunch to remove, or hit a button to delete them, etc.
但是当我关闭应用程序并重新加载它时，它会丢失所有的样式和删除按钮不再起作用：
but when I close the app and re-load it, it loses all the styling and the delete buttons no longer functions:
但是，我单击添加项目，新项目以他们应该的风格显示...
but, it I click ADD ITEM, the new items show in the style they are supposed to...
>
，这里是index.html头文件中的代码：
So, here is the code in the index.html head for the scripts:
<script type="text/javascript" language="JavaScript">
//Create a new To-Do
function createNewToDo()
{
var todoDictionary = {};
//Prompt the user to enter To-Do
var todo="ASSIGNMENT NAME";
var todolink="index.html#fastshutter";
if (todo!=null)
{
if (todo == "")
{
alert("To-Do can't be empty!");
}
else
{
//Append the new To-Do with the table
todoDictionary = { check : 0 , text : todo , text2 : todolink};
addTableRow(todoDictionary,false);
}
}
}
//Add a row to the table
var rowID = 0;
function addTableRow(todoDictionary, appIsLoading)
{
rowID +=1;
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//Set up the CheckBox
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
element1.checked = todoDictionary["check"];
element1.setAttribute("onclick","checkboxClicked()");
element1.className = "checkbox";
cell1.appendChild(element1);
//Set up the TextBox
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.size = 16;
element2.id = "text"+rowID;
element2.value = todoDictionary["text"];
element2.setAttribute("onchange","saveToDoList()");
element2.className = "textbox";
cell2.appendChild(element2);
//Set up the View Button
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "button";
element3.id = rowID;
element2.value = todoDictionary["text"];
element3.setAttribute("onclick","window.open('index.html#fastshutter','_self')");
element3.className = "viewButton";
cell3.appendChild(element3);
//Set up the Delete Button
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "button";
element4.setAttribute("onclick","deleteSelectedRow(this)");
element4.className = "deleteButton";
cell4.appendChild(element4);
//Save & Update UI
checkboxClicked();
saveToDoList();
if (!appIsLoading)
alert("Task Added Successfully.");
}
//Add storke to completed tasks text
function checkboxClicked()
{
//Get current table
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
//Loop through all rows
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
var textbox = row.cells[1].childNodes[0];
//checkbox is checked
if(null != chkbox && true == chkbox.checked)
{
if(null != textbox)
{
textbox.style.setProperty("text-decoration", "line-through");
}
}
//checkbox is not checked
else
{
textbox.style.setProperty("text-decoration", "none");
}
}
//Save
saveToDoList();
}
//Views textField's content of the selected row
function viewSelectedRow(todoTextField)
{
alert(todoTextField.value);
}
//Deletes current row
function deleteSelectedRow(deleteButton)
{
var p=deleteButton.parentNode.parentNode;
p.parentNode.removeChild(p);
saveToDoList();
}
function removeCompletedTasks()
{
//Get current table
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
//Loop through all rows
for(var i=0; i<rowCount; i++)
{
//Delete row if checkbox is checked
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{
table.deleteRow(i);
rowCount--;
i--;
}
}
//Save
saveToDoList();
alert("Completed Tasks Were Removed Successfully.");
}
function saveToDoList()
{
//Create a todoArray
var todoArray = {};
var checkBoxState = 0;
var textValue = "";
//Get current table
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
if (rowCount != 0)
{
//Loop through all rows
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
//Add checkbox state
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{
checkBoxState = 1;
}
else
{
checkBoxState= 0;
}
//Add text data
var textbox = row.cells[1].childNodes[0];
textValue = textbox.value;
//Fill the array with check & text data
todoArray["row"+i] =
{
check : checkBoxState,
text : textValue
};
}
}
else
{
todoArray = null;
}
//Use local storage to persist data
//We use JSON to preserve objects
window.localStorage.setItem("todoList", JSON.stringify(todoArray));
}
function loadToDoList()
{
//Get the saved To-Do list array by JSON parsing localStorage
var theList = JSON.parse(window.localStorage.getItem("todoList"));
if (null == theList || theList=="null")
{
deleteAllRows();
}
else
{
var count = 0;
for (var obj in theList)
{
count++;
}
//Clear table
deleteAllRows();
//Loop through all rows
for(var i=0; i<count; i++)
{
//Add row
addTableRow(theList["row"+i],true);
}
}
}
function deleteAllRows()
{
//Get current table
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
//Loop through all rows
for(var i=0; i<rowCount; i++)
{
//delete row
table.deleteRow(i);
rowCount--;
i--;
}
//Save
saveToDoList();
}
</script>
和样式（也在头部）
<style type="text/css">
/ * BeginOAWidget_Instance_2127022：#gallery * /
/* BeginOAWidget_Instance_2127022: #gallery */
.viewButton {
background-color:Transparent;
width:50px
height:32px;
}
.deleteButton {
background-color:Transparent;
width:30px;
height:30px;
}
这是实现页面的html代码：
Here is the html code to implement the page:
<body bgcolor="#e0e0e0" onload="loadToDoList()" >
<div data-role="page" id="favlist">
<div data-role="header">
<h1><a href="#choose" data-role="button" data-icon="arrow-l" data-iconpos="right">BACK</a> Favourites </h1>
</div>
<div data-role="content">
<button type="button" class="addToDo" onclick="createNewToDo()">ADD</button>
<button type="button" class="removeTasks" onclick="removeCompletedTasks()">REMOVE</button>
<br/><br/><br/>
<table id="dataTable" width="100%" border="0">
</table>
<a href="#choose" data-role="button" data-theme="a">CLOSE</a>
</div>
</div>
所以我不知道jquerymobile css文件是否干扰了这一点？
So I'm not sure if the jquerymobile css file is interfering with this maybe?
感谢任何建议
编辑：我能够弄清楚。我需要通过向jquery css中添加一个新的按钮类来完全覆盖jquery mobile CSS的按钮元素。在第一次运行和添加新项目时，它使用了我在HTML中的内联样式，但是在重新加载它是拉标准样式
I was able to figure it out. I needed to override the jquery mobile CSS completely for the button elements by adding a new button class to the jquery css. On first run and adding new items it used the inline styles I had put in the HTML, but on reload it was pulling the standard styles
推荐答案
我能够想出来。我需要通过向jquery css中添加一个新的按钮类来完全覆盖jquery mobile CSS的按钮元素。在第一次运行和添加新项目时，它使用了我已经在HTML中的内联样式，但在重新加载它是拉标准样式
I was able to figure it out. I needed to override the jquery mobile CSS completely for the button elements by adding a new button class to the jquery css. On first run and adding new items it used the inline styles I had put in the HTML, but on reload it was pulling the standard styles
这篇关于CSS样式不粘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
