上上
上上
  • 发布:2022-05-18 12:12
  • 更新:2022-05-18 19:19
  • 阅读:157

mui-slider-handle动态加载,滑动无效,不显示删除,如何初始化

分类:HTML5+
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link rel="stylesheet" href="../../../css/mui.min.css">  
        <link rel="stylesheet" type="text/css" href="../../../css/own.css" />  
        <style type="text/css">  
            .input-text-focus{  
                background-color: #00FFFF !important;  
            }  
        </style>  
    </head>  
    <body class="own-gray-color">  
        <header class="mui-bar mui-bar-nav own-main-background-color">  
            <button type="button" class="mui-action-back mui-btn  mui-btn-link mui-pull-left own-button">  
                <span class="mui-action-back mui-icon mui-icon-left-nav own-left-nav-color"></span>  
            </button>  
            <h1 id="title" class="mui-title">测试</h1>  
        </header>  

        <div class="mui-content">  
            <ul class="mui-table-view">  
                <li class="mui-table-view-cell" style="background-color:#FFFFFF;">  
                    <label>条码</label>  
                    <span style="position: absolute;left:50px;width:70%">  
                        <input id="code" type="text"  class="mui-input-clear" style="width: 65%;position:absolute;margin-top: -10px;border: 0px;" placeholder="请扫描条码号"/>  
                    </span>  
                </li>  
            </ul>  
            <div class="mui-card">  
                <div id="dheader" class="mui-card-header">  
                    <span id="pddh"></span><span id="ksmc"></span>  
                </div>  
                <div class="mui-card-content">  
                    <div class="mui-card-content-inner" style="overflow-y: auto;height: 100%;">  
                        <ul id="dlist" class="mui-table-view">  
                            <li class='mui-table-view-cell mui-media' style="background-color: #ffffff;">  
                                 <div class="mui-slider-right mui-disabled">  
                                    <a class="mui-btn mui-btn-red">删除</a>  
                                </div>  
                                <div class="mui-slider-handle">  
                                    <a class='mui-navigate-right' href='#' data-data='+srow+'>  
                                    <div class='mui-media-body'>  
                                    <p class='mui-ellipsis'><span class='hotel-color-blue'>序号:1</span></p>  
                                    <p class='mui-ellipsis'><span class='hotel-color-blue'>品名:热敏打印纸</span></p>  
                                    </div></a>  
                                </div>   
                            </li>  
                        </ul>  
                    </div>  
                </div>  
                <div id="dfooter" class="mui-card-footer">  
                </div>  
            </div>  

            <nav class="mui-bar mui-bar-tab">  
                <a id="save" class="mui-tab-item" href="javascript:;">  
                    <span class="mui-icon mui-icon-info mui-icon-extra mui-icon-extra-card"></span>  
                    <span>保存</span>  
                </a>  
                <a id="submit" class="mui-tab-item" href="javascript:;">  
                    <span class="mui-icon mui-icon-extra mui-icon-extra-check"></span>  
                    <span>提交</span>  
                </a>  
            </nav>  
        </div>   
    </body>  
    <script src="../../../js/mui.min.js"></script>  
    <script src="../../../js/jquery.min.js"></script>  
    <script src="../../../js/own.js"></script>  
    <script type="text/javascript">  
        mui.init({  
        });  
        var WM_height=$(window).height();  
        $('.mui-card-content').css('height',(WM_height-260)+'px');  
        var url,url2,url3;  
        var ksid="";  
        var ksmc="";  
        var pddh="";  
        var tmhs=[];  
        var db;  
        var num=0;  
        mui.plusReady(function() {  
            plus.storage.setItem('gzkspd_ksId','');  
            var ip=plus.storage.getItem('ipconfig');  
            var dk=plus.storage.getItem('dkconfig');  
            var self = plus.webview.currentWebview();  

            window.addEventListener('refresh', function(e) {  
                self.reload(true);  
            });  
            var code=document.getElementById('code');  
            $('#code').bind('keypress',function(event){  
                if(event.keyCode == 13) {  
                    search(code.value);  
                }  
            });  
            document.getElementById('submit').addEventListener('tap',function(e){  
                plus.nativeUI.confirm( "确定提交吗?", function(e){  
                    if(e.index==0){  
                        submit();  
                    }  
                },"确认提交", "", ["确定","取消"]);  
            });  
            document.getElementById('save').addEventListener('tap',function(e){  
                plus.nativeUI.confirm( "确定保存吗?", function(e){  
                    if(e.index==0){  
                        saveData();  
                    }  
                },"确认保存", "", ["确定","取消"]);  
            });  
            $('#dlist').on('tap', '.mui-btn', function(event) {  
                var elem = this;  
                var li = elem.parentNode.parentNode;  
                mui.confirm('确认删除该条记录?', '提示', ['确认', '取消'], function(e) {  
                    if (e.index == 0) {  
                        li.parentNode.removeChild(li);  
                    } else {  
                        setTimeout(function() {  
                            $.swipeoutClose(li);  
                        }, 0);  
                    }  
                });  
            });  
        });  
        function search(tmh){  
            var li=document.createElement('li');  
            li.className='mui-table-view-cell mui-media';  
            li.style.backgroundColor='#ffffff';  

            var div1=document.createElement('div');  
            div1.className='mui-slider-right mui-disabled';  

            var a1=document.createElement('a');  
            a1.className='mui-btn mui-btn-red';  
            a1.innerText='删除';  

            var div2=document.createElement('div');  
            div2.className='mui-slider-handle';  

            var a2=document.createElement('a');  
            a2.className='mui-navigate-right';  
            a2.href='#';  
            a2.setAttribute('data-data','');  

            var div3=document.createElement('div');  
            div3.className='mui-media-body';  

            var p1=document.createElement('p');  
            p1.className='mui-ellipsis';  

            var span1=document.createElement('span');  
            span1.className='hotel-color-blue';  
            span1.innerText='序号:'+(num+1);  

            var p2=document.createElement('p');  
            p2.className='mui-ellipsis';  

            var span2=document.createElement('span');  
            span2.className='hotel-color-blue';  
            span2.innerText='条码号:'+tmh;  

            div1.appendChild(a1);  

            a2.appendChild(div3);  

            p1.appendChild(span1);  
            a2.appendChild(p1);  

            p2.appendChild(span2)  
            a2.appendChild(p2);  
            div2.appendChild(a2);  

            li.appendChild(div1);  
            li.appendChild(div2);  
            var silder = mui(".mui-slider").slider();  
            // var html="<li class='mui-table-view-cell mui-media' style='background-color: #ffffff;'>"+  
            // "<div class='mui-slider-right mui-disabled'><a class='mui-btn mui-btn-red'>删除</a></div>"+  
            // "<div class='mui-slider-handle'>"+  
            //  "<a class='mui-navigate-right' href='#' data-data=''>"+  
            //      "<div class='mui-media-body'>"+  
            //      "<p class='mui-ellipsis'><span class='hotel-color-blue'>序号:"+(num+1)+"</span></p>"+  
            //      "<p class='mui-ellipsis'><span class='hotel-color-blue'>条码号:"+tmh+"</span></p>"+  
            //      "</div>"+  
            //  "</a>"+  
            // "</div></li>";     
            // $('#dlist').append(html);  
            // mui('.mui-slider-handle')['slider-handle']();  
            tmhs.push(tmh);  
            $('#code').val("");  
            num++;  
        }  
    </script>  
</html>
2022-05-18 12:12 负责人:无 分享
已邀请:
上上

上上 (作者)

已解决。

要回复问题请先登录注册