注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于jquery的移动端可编辑列表插件Editable Listview

UI fishcity 2506浏览

可编辑列表插件Editable Listview

Editable Listview是一款jquery mobile的插件,Editable Listview可以为列表添加新的列表项目或是删除列表上现有的某个项目,有点类似于PC端的可编辑表格,Editable Listview可大大的提高用户的体验性。

使用方法

引入核心文件,插件需在jquery.mobile-git.css和jquery.mobile-git.js之后引入

<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css" />
<link rel="stylesheet" href="css/editable-listview.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script  src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<script src="js/editable-listview.js"></script>

构建html代码

<ul data-role="listview" data-editable="true" data-editable-type="complex" data-editable-form="editing-form">
    <li>
        <a>
            <h3>Apple</h3>
            <p><em>Shape:</em> <strong>round</strong></p>
            <p><em>Color:</em> <strong>red</strong></p>
        </a>
    </li>
    <li>
        <a>
            <h3>Pineapple</h3>
            <p><em>Shape:</em> <strong>oval</strong></p>
            <p><em>Color:</em> <strong>yellow</strong></p>
        </a>
    </li>
    <li>
        <a>
            <h3>Orange</h3>
            <p><em>Shape:</em> <strong>round</strong></p>
            <p><em>Color:</em> <strong>orange</strong></p>
        </a>
    </li>
</ul>

<form id="editing-form" data-editable-form="true">
    <input type="text" data-item-name="fruitName" data-item-template="<h3>%%</h3>">
    <input type="text" data-item-name="fruitShape" data-item-template="<p><em>Shape:</em> <strong>%%</strong></p>">
    <input type="text" data-item-name="fruitColor" data-item-template="<p><em>Color:</em> <strong>%%</strong></p>">
    <button class="ui-btn ui-corner-all" data-add-button="true">Add</button>
    <button class="ui-btn ui-corner-all" data-clear-button="true">Clear</button>
</form>

data-item-name属性用来保存新输入的值,data-item-template属性保存html模板,其中%%为占位符,最终为输入的新值代替。data-add-button属性添加按钮来实现输入框添加新的列表项目。data-clear-button属性清除所有的文本输入元素。

更多的data-属性,请参考官方文档,在引不一一列举。

转载请注明:jQ酷 » 基于jquery的移动端可编辑列表插件Editable Listview

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。