使用css将页面更改为编辑模式
Changing a page to edit mode using css
我不确定如果这是完全可能的,现在一天,但我可以改变一个页面的视图后,点击一个按钮没有javascript和使用css代替?
我目前正在显示一个页面的信息,一旦用户单击编辑按钮-而不是去不同的页面,用户将能够在同一视图中进行更改。
这是页面显示给用户的方式:jsFiddle of display
<div>living the dream</div>
<hr/>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div>Edit button</div>
下面是用户点击编辑按钮后页面的样子:jsFiddle of edit view
<div class="page" contenteditable>living the dream</div>
<hr/>
<div class="content" contenteditable>
<p>Lorem ipsum dolor sit amet...</p>
</div>
所以类将被隐藏直到编辑按钮被点击然后它们将被添加到div
我可以完成这只是css,如果不是我的替代品,而不是javascript?
你能这样做吗?使用复选框hack可以切换到contenteditable
模式
Codepen http://codepen.io/noobskie/pen/gaXqgm?editors=110
问题是我不确定如何保存它,因为我从来没有真正使用过可编辑的内容,我不确定你是否可以动态地选择值
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
input[type=checkbox]:checked ~ div {
display: inline;
}
.container {
display: none;
position: absolute;
top: 9px;
left: 8px;
right: 8px;
width: auto;
}
.page {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
border-radius: 3px;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
text-align: left;
padding-top: 9px;
padding-left: 10px;
height: 25px;
}
.content {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
background-color: white;
border: 1px solid gray;
border-radius: 5px;
font: medium -moz-fixed;
height: 128px;
overflow: auto;
padding: 2px;
resize: both;
position: relative;
bottom: 12px;
}
<div>living the dream</div>
<hr/>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<input type="checkbox" id="button" />
<label for="button" onclick>Edit Button</label>
<div class="container">
<div class="page" contenteditable>living the dream</div>
<hr/>
<div class="content" contenteditable>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<input type="checkbox" id="button" />
<label for="button" onclick>Save Button</label>
</div>
相关文章:
- Rad网格编辑模式通过选中复选框时的java脚本启用禁用所需的字段验证器
- jqGrid - 是否有任何“网格编辑模式”
- 有没有更好的方法可以在ng网格中切换编辑模式
- 在客户端的编辑模式下,在同一单元格网格视图中选中复选框时禁用文本框
- jquery.filer编辑模式动态文件添加
- 设置一个下拉填充到它's的值和文本在AngularJS和asp.net webApi中的编辑模式
- 脚本仅在编辑模式 - 共享点页面上执行
- 在剑道网格中有选择地将编辑行中的单元格切换为编辑模式
- 详细信息视图 ASP.Net 取消客户端的默认编辑模式
- 如何在 MVC-4 中的编辑模式弹出窗口中获取复选框
- 尝试检测网格视图的哪一行处于编辑模式,然后在选中复选框字段时调整文本框
- Kendoui ListView在编辑模式下删除行
- 当不处于编辑模式时,下拉列表中的Kendo单元格值显示为未定义
- 从javascript访问Telerik RadGrid编辑模式
- ui网格中的EditableCellTemplate处于编辑模式[ng网格3.X]
- jqgrid密码字段不仅在编辑模式下
- 当单元格进入编辑模式时,禁止在除一个单元格(选定行中)之外的任何位置单击
- 如何在Xpage中将Editbox的模式从读取模式更改为编辑模式
- 网格视图使用ESC和JavaScript退出编辑模式
- Javascript:检查RadGrid项是否处于编辑模式