이번에는 Jquery+Mobile로 버튼 아이콘을 맞춤설정하는 단계에 대해 자세히 설명하겠습니다. Jquery+Mobile로 버튼 아이콘을 맞춤설정할 때 주의사항은 무엇인가요? 바라보다.
많은 친구들이 jquery 모바일에 내장된 아이콘이 거의 없다고 보고했습니다. 게다가 아이콘이 너무 작은 것 같아서(시스템에 포함된 아이콘은 18*18입니다) 어떻게 해야 할지 고민 중입니다. 다음은 작은 아이콘입니다. 내 방법을 공유하겠습니다.
방금 Jquery Mobile 프레임워크를 접했는데, 버튼 아이콘을 사용자 정의하는 방법에 대한 매우 실용적인 문제에 직면했습니다. 게다가 Jquery 모바일에 제공되는 아이콘이 너무 적은 것 같습니다. 또한 너무 작습니다. (시스템과 함께 제공되는 것은 18*18이어야 합니다.) 다음은 제 방법입니다. 모두가 열정적으로 참여하기를 바랍니다.
1. 첫 번째 방법은 비교적 간단하지만 전제는 사용자 정의 아이콘의 크기가 내장 시스템과 일치해야 특정 방법에 문제가 없다는 것입니다.
먼저 CSS 파일을 정의하면
.ui-icon-email{ background:url('./images/email.png') no-repeat 0px 0px; } data-icon="email"
이 됩니다.
2. 두 번째 방법은 사용자 정의 아이콘의 크기가 시스템과 일치하지 않는 상황에 적합합니다. 먼저 렌더링을 보여드리겠습니다.
3 코드는 다음과 같습니다. css code]
/** 图标大小 **/ .user-ui-btn .ui-icon{ width:36px; height:36px; } /** 设置字体大小,由于图标变大,所以文字适当的调大一些 **/ .user-ui-btn .ui-btn-text{ line-height:36px; font-size:20px; } /** 无文字按钮 **/ .user-ui-btn .ui-btn-icon-notext{ width:42px; height:42px; webkit-border-radius: 2em; border-radius: 2em; } /** 图标左边 **/ .user-ui-btn .ui-btn-icon-left .ui-btn-inner { padding-left: 50px; } .user-ui-btn .ui-btn-icon-left .ui-icon{ left:10px; margin-top: -18px; } /** 图标在右边 **/ .user-ui-btn .ui-btn-icon-right .ui-btn-inner { padding-right: 50px; } .user-ui-btn .ui-btn-icon-right .ui-icon{ right:10px; margin-top: -18px; } /** 图标在上边 **/ .user-ui-btn .ui-btn-icon-top .ui-btn-inner { padding-top: 50px; } .user-ui-btn .ui-btn-icon-top .ui-icon{ top:10px; margin-left: -18px; } /** 图标在下边 **/ .user-ui-btn .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 50px; } .user-ui-btn .ui-btn-icon-bottom .ui-icon{ bottom:10px; margin-left: -18px; } /** 定义自己的图标 **/ .user-ui-btn .ui-icon-demo1{ background:url('./images/gentleface_full.png') no-repeat -108px 0px; } .user-ui-btn .ui-icon-demo2{ background:url('./images/gentleface_full.png') no-repeat -180px -180px; } .user-ui-btn .ui-icon-demo3{ background:url('./images/gentleface_full.png') no-repeat -252px -360px; } .user-ui-btn .ui-icon-demo4{ background:url('./images/gentleface_full.png') no-repeat -36px -180px; } .user-ui-btn .ui-icon-demo5{ background:url('./images/gentleface_full.png') no-repeat -504px -612px; } <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> <link rel="stylesheet" type="text/css" href="js/demo.mobile-1.0.css" /> </head> <body> <p data-role="page" id="page"> <p data-role="header"> <h1>Jquery Mobile自定义按钮</h1> </p> <p data-role="content"> <h2>原版样式举例</h2> <p> <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="left">DEMO</a> <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="top">DEMO</a> <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="right">DEMO</a> <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="bottom">DEMO</a> <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="notext">DEMO</a> </p> <h2>自定义样式举例</h2> <h3>1)普通按钮</h3> <p class="user-ui-btn"> <a class="user-ui-btn" href="#" data-role="button" data-icon="demo1" data-inline="true" data-iconpos="left">DEMO</a> <a class="user-ui-btn" href="#" data-role="button" data-icon="demo2" data-inline="true" data-iconpos="top">DEMO</a> <a class="user-ui-btn" href="#" data-role="button" data-icon="demo3" data-inline="true" data-iconpos="right">DEMO</a> <a class="user-ui-btn" href="#" data-role="button" data-icon="demo4" data-inline="true" data-iconpos="bottom">DEMO</a> <a class="user-ui-btn" href="#" data-role="button" data-icon="demo5" data-inline="true" data-iconpos="notext">DEMO</a> </p> <h3>2)按钮组</h3> <p class="user-ui-btn" data-role="controlgroup" data-type="horizontal"> <a data-role="button" data-icon="demo1" data-iconpos="top">js</a> <a data-role="button" data-icon="demo2" data-iconpos="top">css</a> <a data-role="button" data-icon="demo3" data-iconpos="top">html</a> <a data-role="button" data-icon="demo4" data-iconpos="top">ps</a> </p> <p class="user-ui-btn" data-role="controlgroup"> <a data-role="button" data-icon="demo1" data-iconpos="top">js</a> <a data-role="button" data-icon="demo2" data-iconpos="top">css</a> <a data-role="button" data-icon="demo3" data-iconpos="top">html</a> <a data-role="button" data-icon="demo4" data-iconpos="top">ps</a> </p> <h3>3)原始icon</h3> <img src="./js/images/gentleface_full.png" alt="原始icon" border=0 width=612 height=648> </p> <p data-role="footer"> <h4>Copyright by lining</h4> </p> </p> </body> </html>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
페이지가 돌아올 때 모바일을 사용하여 요청 가져오기를 제어하는 방법모바일에서 버튼 버튼 구성 요소 사용에 대한 자세한 설명위 내용은 Jquery+Mobile을 사용하여 버튼 아이콘을 사용자 정의하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!