jquery 유저인터페이스 관련

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

리스트 아이콘

 

츌처: http://www.w3schools.com/jquerymobile/jquerymobile_list_content.asp

 

jQuery Mobile List Icons

The default icon for each list item containing a link is "carat-r" (right arrow). To change this to another icon, use the data-icon attribute on the list item you want to modify:

Example

<ul data-role="listview"> 
  <li><a href="#">Default is right arrow</a></li>
  <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
  <li data-icon="minus"><a href="#">data-icon="minus"</a></li>
  <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
  <li data-icon="location"><a href="#">data-icon="location"</a></li> 
  <li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

Try it yourself »

 

data-icon="false" will remove the icon.

For a complete reference of all the jQuery Mobile button icons, please go to our jQuery Mobile Icons Reference.

---

16x16 Icons

To add a standard 16x16px icon to your list, add an <img> element inside the link with a class of "ui-li-icon":

Example

<ul data-role="listview">
  <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
</ul>

Try it yourself »

 

---

jQuery Mobile List Thumbnails

For images larger than 16x16px, add an <img> element inside a list item as the first child element (with no class name).

jQuery Mobile will automatically scale the image to 80x80px:

Example

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Try it yourself »

Use standard HTML to fill the list with information:

Example

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
  </li>
</ul>

Try it yourself »

 

---

Split Buttons

To create a split list with a vertical divider bar, place two links inside the <li> element.

jQuery Mobile will automatically place the second link on the right side of the list with a right arrow-icon. And the text inside the link (if any) will be shown when a user hover over the icon:

Example

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Some Text</a>
  </li>
</ul>

Try it yourself »

Lets add some pages and dialogs to make the links more functional:

Example

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
  </li>
</ul>

<div data-role="page" id="download" data-dialog="true">

Try it yourself »

 

---

Count Bubbles

Count bubbles are used to display numbers associated with list items, such as messages in a mailbox:

 

To add count bubbles, use an inline element, such as <span>, with class "ui-li-count" and add a number:

Example

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

Try it yourself »

Note: To show the correct number in a count bubble, it must be updated programmatically. This will be explained in a later chapter.

---

More Examples

Popup lists
How to create a popup list.

Collapsible lists
How to create lists that hide and show content.

Collapsible popup lists
How to create a collapsible popup list.

Full width collapsible lists
Using the data-inset="false" attribute on "collapsibles/collapsible set" to enable a full width listview.

More content formatting
How to make a calendar.

 

 

 

 

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

출처: http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=176792987&qb=anF1ZXJ5IOumrOyKpO2KuA==&enc=utf8§ion=kin&rank=11&search_sort=0&spq=0

 

 

jquery mobile에서 listview를 구현 중입니다.

 

대부분의 예제들을 보면 

<ul>

          <li> </li>

<li> </li>

</ul>

이런식으로 listview의 내용들을 추가하는데요 저는 동적으로 생성하고 싶습니다.

 

function addItem(){

for(i = 0; i < 2; i++){

$("#list").appendTo("#box");

}

$("#list").listview("refresh");

}

이런식으로 동적으로 리스트 뷰에 #box div값을 추가하고 싶습니다.

append()로 추가하면 아무것도 추가되지 않고 appendTo()로 추가하면 div값이 삭제됩니다.

아래의 소스에서 보시면 div 태그 값중에 box라고 추가된것이 계속 추가되면됩니다.

<div data-role="page" id="firstPage">

<div data-role="header">

<h1>test</h1>

</div>

<a href="javascript_:addItem();" data-icon="plus" class="ui-btn-right">Add</a>

 

<div data-role = "content">

<ul data-role="listview" id = "list" data-insert="true" data-filter = "false">

<div id = "box" style="width:100">

 

</div>

</ul>

</div>

</div>

 

결과적으로 addItem()함수를 콜벡하면 div 태크 box가 계속 추가되면됩니다.

 

조언좀 부탁드리겠습니다 ㅠ

 

 

 

• 신고

 나도 궁금해요  의견 쓰기

질문자 채택된 경우, 추가 답변 등록이 불가합니다.

re: jquery mobile에서 listview 사용시 div 추가방법 질문이요

maybesh 답변채택률100% 2013.07.18 18:27

답변 추천하기

• 0

질문자 인사

정말 대단해요! 당신의 지식에 감탄하고 갑니다. 감사합니다. 덕분에 해결되었습니다~

 

 

function addItem(){

    for(i = 0; i < 2; i++){

        var cloneObj = $("#box").clone(true);

        $("#list").append(cloneObj);

    }

    $("#list").listview("refresh");

}

<div data-role="page" id="firstPage">

<div data-role="header">

<h1>test</h1>

</div>

<a href="javascript_:addItem();" data-icon="plus" class="ui-btn-right">Add</a>

 

<div data-role = "content">

<ul data-role="listview" id = "list" data-insert="true" data-filter = "false">

<div id = "box" style="width:100">

 

</div>

</ul>

</div>

</div>

 

 

id값으로 element를 가져와 clone 후 append 하였습니다.

단, <div id="box"></div> 안에 내용이 있을 경우 해당 내용도 같이 복사됩니다.

하위 노드 말고 해당 노드만 복사하길 원하실 경우 close(false); 로 변경하시면 됩니다.

 

 

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

출처: http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=147364665&qb=anF1ZXJ5IOumrOyKpO2KuA==&enc=utf8§ion=kin&rank=3&search_sort=0&spq=0&pid=RHkendpySEdssu%2BPvTRsssssssw-370191&sid=U5bRKgpyVloAAB06EXs

 

 

 안녕하세요.

 

<ul>

<li>comp</li>

<li>smart</li>

<li>data</li>

<li>float</li>

</ul>

 

다음과 같은 li 리스트가 있다고 할때, jquery 나 스크립트를 활용하여 페이지를 열때마다(새로고침)

순서가 랜덤으로 나올 수 있도록 가능할까요?

• 신고

 나도 궁금해요  의견 쓰기

질문자 채택된 경우, 추가 답변 등록이 불가합니다.

re: jquery를 활용하여 li 리스트의 순서를 랜덤으로 줄 수 있을까요?

toseaq 답변채택률89.7% 2012.03.09 13:25

답변 추천하기

• 0

질문자 인사

당신이 진정한 지식인입니다.

<script>

function fn_load(){

var liArr = new Array();

 

 

liArr[0] = "<li>comp</li>";

liArr[1] = "<li>smart</li>";

liArr[2] = "<li>data</li>";

liArr[3] = "<li>float</li>";

 

 

 

 

 

var val = new Array();

 

 

for(var i = 0; i < 4; i++){

 

val[i] = Math.random() + ","+i;

 

}

 

 

val.sort();

 

 

var innerHtml = "";

 

 

for(var i = 0; i < val.length; i++){

 

innerHtml += liArr[parseInt(val[i].split(',')[1])];

 

}

 

 

document.getElementById("ul_id").innerHTML = innerHtml;

 

}

</script>

<body onLoad="javascript_:fn_load();">

<ul id="ul_id">

</ul>

</body>

toseaq영웅 채택 282 (94.3%) 최근 받은배지

 

 

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

유저인터페이스:

http://jqueryui.com/sortable/#default

 

강좌:

http://direct.co.kr/cs/jQuery.pdf