jqm拇指列表无法正确显示

时间:2012-04-05 08:57:09

标签: listview jquery-mobile

我在对话框中有两个列表 - 一个气泡计数列表和一个拇指列表。气泡计数列表看起来很好,但是拇指列表显示为单独的列表项。

enter image description here

我不习惯以这种方式编写html输出,也许我错过了一些简单的东西。气泡计数列表的代码位于“//将影片文件夹分配给子”下方,而拇指列表的代码位于“// display image count,encode url path”下面:

private function _makeoutput($folder_index) {

$html = '';

    $query = 'dir§'.$this->session->userdata('uid').'§'.$folder_index;

    //api query, create listview for images
    if($xml = $this->api->query($query)){
    $xml = simplexml_load_string($xml);
    $html .= '<ul data-role="listview" data-inset="true" text-align:center;>';

    //assign movie folders to child
    foreach($xml->COM->MOVIE_FOLDER as $child){
       $html .= '<li>';
       //count number of images in each root folder
       $bubble_count = $child->MOVIE->count();
       $html .= '<a href="'.$child->attributes()->indexI.'" data-rel="dialog" data-transition="slide">'.$child->attributes()->nameS.'<span class="ui-li-count">'.$bubble_count.'</span></a>';
       $html .= ' </li>';
    }
    $html .= '</ul>';

    //display image count, encode url/path
    for($i = 0, $c = $xml->COM->MOVIE->count(); $i < $c; $i++ ){
        $html .= '<ul data-role="listview" class="ui-listview" data-inset="true">';
        $html .= '<li>';
        $html .= '<a>
        <img src="https://[url]'.rawurlencode($this->_decode_path($xml->COM->MOVIE[$i]->attributes()->dbIcoFilename)).'" id="imgThumb" alt="'.$xml->COM->MOVIE[$i]->attributes()->nameS.'" />
        <h1>'.$xml->COM->MOVIE[$i]->attributes()->nameS.'</h1>
        </a>';
        $html .= ' </li>';
        $html .= '</ul>';
    }
    }
    else{
    $data['output'] = $this->_makeoutput($folder_index);
    }
return $html;
}

2 个答案:

答案 0 :(得分:2)

首先关闭..为什么'私人'?

手头的问题是你需要在for循环之外的ul标签,否则你会生成新的列表(这就是你所看到的):

$html .= '<ul data-role="listview" class="ui-listview" data-inset="true">';
for($i = 0, $c = $xml->COM->MOVIE->count(); $i < $c; $i++ ){

    $html .= '<li>';
    $html .= '<a>
    <img src="https://[url]'.rawurlencode($this->_decode_path($xml->COM->MOVIE[$i]->attributes()->dbIcoFilename)).'" id="imgThumb" alt="'.$xml->COM->MOVIE[$i]->attributes()->nameS.'" />
    <h1>'.$xml->COM->MOVIE[$i]->attributes()->nameS.'</h1>
    </a>';
    $html .= ' </li>';

}
$html .= '</ul>';

答案 1 :(得分:2)

问题是您要为每个图像创建新的ul。在这个循环中:

     //display image count, encode url/path
for($i = 0, $c = $xml->COM->MOVIE->count(); $i < $c; $i++ ){
    $html .= '<ul data-role="listview" class="ui-listview" data-inset="true">';
    $html .= '<li>';
    $html .= '<a>
    <img  src="https://[url]'.rawurlencode($this->_decode_path($xml->COM->MOVIE[$i]->attributes()->dbIcoFilename)).'" id="imgThumb" alt="'.$xml->COM->MOVIE[$i]->attributes()->nameS.'" />
    <h1>'.$xml->COM->MOVIE[$i]->attributes()->nameS.'</h1>
    </a>';
    $html .= ' </li>';
    $html .= '</ul>';
}

在循环外创建ul,因此每个li都放在同一个无序列表中