Jquery Mobile 축소 가능한 Listview의 높이를 설정하는 방법

케네디 유

프로그래밍 방식으로 팝업을 만들었고 축소 가능하며 목록보기는 팝업의 내용 안에 있습니다.

$.map내 데이터를로드 하는 데 사용하여 축소 가능 및 목록보기가 동적으로 생성됩니다.

여기 내 jsFiddle입니다

목록보기에 <li>표시되는 수를 제한하는 방법이 있는지 궁금합니다 .

예를 들면

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>

4 만 표시하고 싶은데 <li>5 번째 <li>는 스크롤로 표시됩니다.<ul>

그것을 달성하기 위해 어떻게 할 수 있습니까?!

높이를 설정하려고했지만 <ul>작동하지 않습니다 ...

내 영어가 안 좋아서 미안해 ... 난 대만인이야

내가 무슨 말을 하려는지 이해가 안된다면 말 해주세요

나는 그것을 더 잘 설명하려고 노력할 것이다

Ezanker

다음은 솔루션으로 업데이트 된 바이올린입니다. http://jsfiddle.net/ezanker/CnSMr/2/

기본적으로 접을 수있는 div (.popupcollapsediv)에 클래스를 할당 한 다음 UL을 클래스 .ulcontainerdiv로 다이빙에 넣습니다.

    $.map(kennedy.webdb.userdata[0].Category, function (value, key) {
    return $("<div/>", {
        id: value.Name,
        "data-role": "collapsible",
        "data-inset": "false",
        class: "popupcollapsediv"
    }).append(
      $("<h2/>", {
          text: value.Name
      })).append(
        $("<div/>", {
          class: "ulcontainerdiv"
        }).append(
          $("<ul/>", {
            "data-role": "listview",
            "data-icon": "false"
          }).append(
    ...

그런 다음 CSS를 사용하여 각 UL이 포함 된 div의 최대 높이를 설정하고 포함 된 UL이 해당 최대 높이보다 큰 경우 스크롤을 허용했습니다. 축소 가능에 의해 생성 된 자동 생성 div에서 패딩을 제거합니다.

.ulcontainerdiv{
    max-height: 170px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.popupcollapsediv .ui-body-a {
    padding: 0;
    margin: 0;
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

jquery mobile의 콘텐츠와 동일한 패널 높이를 설정하는 방법은 무엇입니까?

jquery Mobile에서 축소 가능한 목록의 색상을 변경하고 거품을 계산하는 방법

Jquery Mobile, 링크를 클릭 한 후 축소 형을 축소하는 방법은 무엇입니까? Jfiddle

JQuery에서 동일한 높이로 두 개의 div를 설정하는 방법

스크롤 가능한 div의 이웃 div 높이를 동일한 높이로 설정하는 방법

선택한 요소의 높이에 따라 부모의 높이를 설정하는 방법

jQuery로 두 열의 높이를 가장 높게 설정하는 방법은 무엇입니까?

여러 축소 가능한 요소를 하나의 jquery 함수로 결합 할 수있는 방법이 있습니까?

jquery로 rect의 높이와 너비를 설정하는 방법

SwiftUI에서 축소 가능한 목록의 listRowBackground를 변경하는 방법

jQuery로 요소의 높이를 계산하고 설정하는 방법은 무엇입니까?

다른 정렬 가능 내부의 Jquery Sortable : 요소 정렬시 정렬 가능한 이동 된 자식 또는 부모를 감지하는 방법

jQuery Datatable에 대한 제목 섹션 Excel 내보내기의 첫 번째 행 높이를 설정하는 방법

.Rmd 파일의 게시물에 대한 기능 또는 축소판 이미지를 추가하는 방법

설정된 높이로 요소를 축소하는 방법이 있습니까?

Leaflet에서 가능한 확대 / 축소 수준 범위를 설정하는 방법

XAML에서 ListView 높이를 연속 행의 높이로 설정하는 방법

jQuery Mobile에서 패널 높이를 줄이는 방법

행에서 높이가 가장 큰 카드의 높이에 따라 카드 높이를 설정하는 방법

확장 / 축소 가능한 수평 ListView를 만드는 방법은 무엇입니까?

NativeScript를 사용하여 축소 가능한 목록에서 하나의 항목만 확장하는 방법

높이가 애니메이션 후 애니메이션 값인 구성 요소의 높이를 동적으로 설정하는 방법은 무엇입니까?

요소의 높이를 뷰포트에서 사용 가능한 높이로 설정 하시겠습니까?

Flutter의 NestedScrollView 내에서 SliverAppBar의 최소 높이를 설정하는 방법

jQuery에서 설정 한 요소 너비를 재설정하는 방법

Bootstrap 4의 Bootstrap 3에서 축소 가능한 navbar를 작성하는 방법은 무엇입니까?

jQuery animate를 호출 한 후 요소 높이를 확인하는 방법

여러 og : image 요소의 높이와 너비를 설정하는 방법

콘텐츠에 따라 요소의 높이를 설정하는 방법

TOP 리스트

  1. 1

    Ionic 2 로더가 적시에 표시되지 않음

  2. 2

    JSoup javax.net.ssl.SSLHandshakeException : <url>과 일치하는 주체 대체 DNS 이름이 없습니다.

  3. 3

    std :: regex의 일관성없는 동작

  4. 4

    Xcode10 유효성 검사 : 이미지에 투명성이 없지만 여전히 수락되지 않습니까?

  5. 5

    java.lang.UnsatisfiedLinkError : 지정된 모듈을 찾을 수 없습니다

  6. 6

    rclone으로 원격 디렉토리의 모든 파일을 삭제하는 방법은 무엇입니까?

  7. 7

    상황에 맞는 메뉴 색상

  8. 8

    SMTPException : 전송 연결에서 데이터를 읽을 수 없음 : net_io_connectionclosed

  9. 9

    정점 셰이더에서 카메라에서 개체까지의 XY 거리

  10. 10

    Windows cmd를 통해 Anaconda 환경에서 Python 스크립트 실행

  11. 11

    다음 컨트롤이 추가되었지만 사용할 수 없습니다.

  12. 12

    C #에서 'System.DBNull'형식의 개체를 'System.String'형식으로 캐스팅 할 수 없습니다.

  13. 13

    JNDI를 사용하여 Spring Boot에서 다중 데이터 소스 구성

  14. 14

    Cassandra에서 버전이 지정된 계층의 효율적인 모델링

  15. 15

    복사 / 붙여 넣기 비활성화

  16. 16

    Android Kotlin은 다른 활동에서 함수를 호출합니다.

  17. 17

    Google Play Console에서 '예기치 않은 오류가 발생했습니다. 나중에 다시 시도해주세요. (7100000)'오류를 수정하는 방법은 무엇입니까?

  18. 18

    SQL Server-현명한 데이터 문제 받기

  19. 19

    Seaborn에서 축 제목 숨기기

  20. 20

    ArrayBufferLike의 typescript 정의의 깊은 의미

  21. 21

    Kubernetes Horizontal Pod Autoscaler (HPA) 테스트

뜨겁다태그

보관