样式化 jquery 移动列表视图

Posted

技术标签:

【中文标题】样式化 jquery 移动列表视图【英文标题】:Styling jquery mobile listviews 【发布时间】:2011-07-13 00:51:19 【问题描述】:

我正在尝试设置列表视图控件的样式,但我遇到了问题...当我将图像的宽度设置为 40 像素时,如标记中所示。我似乎无法让内容正确对齐到左侧。 IE。我不想要图像和文本之间的差距。这是我的标记

    <ul data-role="listview" class="ui-listview" data-inset="true" role="listbox">
        <li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-c" style='font-size:8pt;font-weight:normal'>
          <?php echo fmtDate($x->date); ?>,<?php echo $name; ?> wrote on <?php echo $wname; ?>'s wall
          <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style='right:55px;background: url(../images/comment.png) no-repeat;padding:3px;padding-left:20px'>34</span>
          <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style='right:5px;background: url(../images/like.gif) no-repeat;padding:3px;padding-left:20px'>442</span>
        </li>

        <li role="option" tabindex="0" data-theme="c" >
        <a href='#'>
        <img   src='<?php echo $imgstr; ?>'/>
        <div style='font-size:9pt;font-weight:normal;'><?php echo nl2br(addSmilies(urlize(trim($x->msg))));?></div>                
        </a>
        </li>
    </ul> 

只是为了澄清这是我从“检查元素”得到的标记

<ul data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" role="listbox">
                <li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-c ui-corner-top ui-btn-up-undefined" style="font-size:8pt;font-weight:normal">
                  Today, 55 minute(s) ago,Maggie Ferguson wrote on Maggie's wall
                  <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:55px;background: url(../images/comment.png) no-repeat;padding:3px;padding-left:20px">34</span>
                  <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:5px;background: url(../images/like.gif) no-repeat;padding:3px;padding-left:20px">442</span>
                </li>

                <li role="option" tabindex="-1" data-theme="c" class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c"><div class="ui-btn-inner"><div class="ui-btn-text">
                <a href="#" class="ui-link-inherit">
                <img   src="../members/mariamjohnson/media/878_thumb.jpg" class="ui-li-thumb ui-corner-bl">
                <div style="font-size:9pt;font-weight:normal;">WAIT A MINUTE,GWE DAN CAN YOU PLEASE BEHAVE YOURSELF,IF YOU HAVE NOTHING TO DO ,GO GET YOURSELF WASTED ELSEWHERE,YOU ARE ABUSIVE AND YOU ARE BEGINING TO IRRETATE ME LIKE A RASH.GURU CHAIN HIM UP,HE SHOULD NOT SPEAK UNTIL SPOKEN TO ,OK?</div>                
                </a>
                </div><span class="ui-icon ui-icon-arrow-r"></span></div></li>
            </ul>

看起来 jquery mobile 为 mrkup 添加了额外的和类...有什么解决方案吗?

【问题讨论】:

该行的 CSS 属性(来自检查器)是什么:&lt;div style="font-size:9pt;font-weight:normal;"&gt;WAIT .....&lt;/div&gt; 空间是来自该元素的左边距/填充还是来自图像的右边? 有100px的内边距;它出现在 中。这些类是由 jqm 自动添加的 【参考方案1】:

在包含 jQuery 移动 CSS 并覆盖样式后添加一个 CSS 文件

.ui-li-has-thumb .ui-btn-inner 
    min-height: 60px;
    padding-left: 100px;

使用您喜欢的填充,例如

.ui-li-has-thumb .ui-btn-inner 
    min-height: 60px;
    padding-left: 60px;

【讨论】:

这会影响列表视图的其余部分吗?不能按列表视图完成吗? 将一个 ID 附加到您的特定列表视图,并通过该 ID 添加额外的 CSS &lt;ul data-role="listview" id="mylist"&gt;... css: #mylist .ui-li-has-thumb .ui-btn-inner ...

以上是关于样式化 jquery 移动列表视图的主要内容,如果未能解决你的问题,请参考以下文章

如何从 postgresql 视图表中获取要显示的对象列表

从视图表中获取数据时出现 Laravel 错误

jQuery 移动列表视图和面板

从 jQuery 移动列表视图中动态删除列表项的刷新问题

动态切换 jQuery 移动列表视图的拆分按钮

下拉列表在jquery datatable移动视图中无法正常工作