Question

我正在尝试使用App Inventor创建一个应用程序，它允许您从服务器查看文件，并下载和共享它们。

我创建了3个列表查看器，一个打开文件，第二个允许共享它，最后一个允许您下载它。它看起来像这样：

enter image description here

但我希望将所有这些放在同一列中，就像这个应用程序一样： enter image description here

有人知道我要做什么创建这样的格式吗？

感谢。

Answer 1

最后感谢www.jquerymobile.com和一些Taifun的教程，我可以创建一个类似于我想要的界面。我还实现了如何恢复用户选择的索引。这里我发布了jquery代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>0</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <style>
    .split-custom-wrapper {
    /* position wrapper on the right of the listitem */
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.split-custom-button {
    position: relative;
    float: right;   /* allow multiple links stacked on the right */
    height: 100%;
    margin:0;
    min-width:3em;
    /* remove boxshadow and border */
    border:none;
    moz-border-radius: 0;
    webkit-border-radius: 0;
    border-radius: 0;
    moz-box-shadow: none;
    webkit-box-shadow: none;
    box-shadow: none;
}

.split-custom-button span.ui-btn-inner {
    /* position icons in center of listitem*/
    position: relative;
    margin-top:50%;
    margin-left:50%;
    /* compensation for icon dimensions */
    top:11px; 
    left:-12px;
    height:40%; /* stay within boundaries of list item */
}
    </style>
</head> 
<body> 

<div data-role="page">  
    <div data-role="content">   
    <div id="searchPickPlace">
    <script>
    // get the table to display from the window.AppInventor object and split at new line
    var urlArray = window.AppInventor.getWebViewString().split("\n");
    // split at comma

    var doc = document;
    var fragment = doc.createDocumentFragment();
    document.write('<ul data-role="listview" data-filter="true">');
    for(i=0;i<(urlArray.length-1);i++){   
      j = i + 1; //+1 because app invetor array start at position 1
      var rowArray = urlArray[i].split(",");
        html = '<li> \
                <a id="R_'+j+'" onClick="reply_click(this.id)" href="#">\
                    <h3>'+rowArray[1]+" "+j+'</h3>\
                    <p>description</p>\
                </a>\
                <div class="split-custom-wrapper">\
                    <a id="D_'+j+'" onClick="reply_click(this.id)" href="#" data-role="button" class="split-custom-button" data-icon="arrow-d" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>\
                    <a id="S_'+j+'" onClick="reply_click(this.id)" href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>\
                </div>\
            </li>';
        document.write(html);
    }
    document.write('</ul>');

    function reply_click(clicked_id)
    {
        //alert(clicked_id);
        window.document.title = clicked_id;
        setTimeout(function(){window.document.title = "0";}, 500);  
    }

    </script>
    </div>
    </div><!-- content -->
</div><!-- /page -->

</body>
</html>

使用此代码，我得到了这个界面：

enter image description here

当您单击按钮时，文本标签将更改为您使用前缀单击的索引编号，具体取决于您是否单击了主区域或其他按钮。文本标签仅在少于secon时更改，因此如果在此期间再次单击该界面，则不会重新发出单击。我认为这对我想要做的事情来说是完美的，因为我不想要任何一个垃圾按钮但是如果想要一个可以垃圾按钮的应用程序，你将不得不想出另一个解决方案。

要做到这一点，你需要一个时钟。在这个例子中，我从我的网站上获得了表格，但你可以创建一个自己的表格，其中包含一个文本变量，用逗号分隔列，每行用＆＃34; \ n＆＃34;。我在这里发布app invetor blocks：

enter image description here

我知道如果有人能找到它，也许有更好的解决方案，我愿意听新的消息。

由于

在App Inventor中更改listviewer格式

1 个答案: