Jquery+Mobile을 사용하여 버튼 아이콘을 사용자 정의하는 단계에 대한 자세한 설명

이번에는 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;
}
nbsp;html>


 <meta>
 <meta>
 <link>
 <script></script>
 <script></script>
 <link>


<p>
 </p><p>
  </p><h1 id="Jquery-Mobile自定义按钮">Jquery Mobile自定义按钮</h1>
 
 <p>
  </p><h2 id="原版样式举例">原版样式举例</h2>
  <p>
 <a>DEMO</a>
 <a>DEMO</a>
 <a>DEMO</a>
 <a>DEMO</a>
 <a>DEMO</a>
 </p>
 <h2 id="自定义样式举例">自定义样式举例</h2>
 <h3 id="普通按钮">1）普通按钮</h3>
 <p>
 <a>DEMO</a>
 <a>DEMO</a>
 <a>DEMO</a>
 <a>DEMO</a>
 <a>DEMO</a>
 </p>
 <h3 id="按钮组">2）按钮组</h3>
 <p>
   <a>js</a>
   <a>css</a>
   <a>html</a>
   <a>ps</a>
  </p>
 <p>
   <a>js</a>
   <a>css</a>
   <a>html</a>
   <a>ps</a>
  </p>
 <h3 id="原始icon">3）原始icon</h3>
 <img  src="/static/imghwm/default1.png" data-src="./js/images/gentleface_full.png" class="lazy" alt="Jquery+Mobile을 사용하여 버튼 아이콘을 사용자 정의하는 단계에 대한 자세한 설명" >
 
 <p>
  </p><h4 id="Copyright-by-lining">Copyright by lining</h4>
 

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

페이지가 돌아올 때 모바일을 사용하여 요청 가져오기를 제어하는 ​​방법

모바일에서 버튼 버튼 구성 요소 사용에 대한 자세한 설명

위 내용은 Jquery+Mobile을 사용하여 버튼 아이콘을 사용자 정의하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!