집 >웹 프론트엔드 >JS 튜토리얼 >Jquery 모바일 사용자 정의 버튼 icon_jquery

Jquery 모바일 사용자 정의 버튼 icon_jquery

WBOY원래의: 2016-05-16 15:31:281317검색

많은 친구들이 jquery 모바일에 내장된 아이콘이 거의 없다고 보고했습니다. 게다가 아이콘이 너무 작은 것 같아서(시스템에서 제공되는 아이콘은 18*18입니다) 어떻게 해야 할지 고민 중입니다. 다음과 같이 버튼 아이콘을 사용자 정의합니다. 편집자는 내 방법을 모든 사람과 공유합니다.

방금 Jquery Mobile 프레임워크를 접했는데 매우 실용적인 문제, 즉 버튼 아이콘을 사용자 정의하는 방법에 직면했습니다. Jquery Mobile에 제공되는 아이콘이 너무 적은 것 같습니다. 또한 너무 작습니다(시스템과 함께 제공되는 것은 18*18이어야 합니다). 다음은 제 방법입니다. 모두가 열정적으로 투표해 주시길 바랍니다.

1. 첫 번째 방법은 비교적 간단하지만 전제 조건은 사용자 정의 아이콘의 크기가 내장 시스템과 일치해야 조판에 문제가 없다는 것입니다. 방법은 다음과 같습니다.

먼저 CSS 파일을 정의합니다

.ui-icon-email{
  background:url('./images/email.png') no-repeat 0px 0px;
}
data-icon="email"

그렇습니다.

2. 두 번째 방법인 이 방법은 맞춤 아이콘의 크기가 시스템과 일치하지 않는 상황에 적합합니다. 먼저 렌더링을 살펴보겠습니다.

3. 코드는 다음과 같습니다.

【css 코드】

/** 图标大小 **/
.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>
<div data-role="page" id="page">
 <div data-role="header">
  <h1>Jquery Mobile自定义按钮</h1>
 </div>
 <div data-role="content">
  <h2>原版样式举例</h2>
  <div>
 <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>
 </div>
 <h2>自定义样式举例</h2>
 <h3>1）普通按钮</h3>
 <div 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>
 </div>
 <h3>2）按钮组</h3>
 <div 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>
  </div>
 <div 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>
  </div>
 <h3>3）Jquery 모바일 사용자 정의 버튼 icon_jquery</h3>
 <img src="./js/images/gentleface_full.png" alt="Jquery 모바일 사용자 정의 버튼 icon_jquery" border=0 width=612 height=648>
 </div>
 <div data-role="footer">
  <h4>Copyright by lining</h4>
 </div>
</div>
</body>
</html>

위 내용은 Jquery Mobile 사용자 정의 버튼 아이콘 구현 방법에 대해 이 기사에서 설명하는 내용입니다.

성명：

이전 기사：javascript_javascript 스킬에 첨부파일 추가 기능 구현 방법다음 기사：javascript_javascript 스킬에 첨부파일 추가 기능 구현 방법

Jquery 모바일 사용자 정의 버튼 icon_jquery

관련 기사