ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö.
7³â Àü
1.  ¸®½ºÆ®  ¾ÆÀÌÅÛÀ̳ª  ¹öÆ°¿¡¼­  ÅؽºÆ®°¡  À߸®Áö  ¾Ê°Ô  Çϱâ.

¸®½ºÆ®  ¾ÆÀÌÅÛÀ̳ª  ¹öÆ°ÀÇ  ÅؽºÆ®°¡  ±æ  °æ¿ì¿¡´Â  jQuery  Mobile¿¡  ÀÇÇØ  ÀÚµ¿À¸·Î  À߸®°Ô  µÈ´Ù.
À̸¦  ¹æÁöÇϱ⠠À§Çؼ­´Â  "white-space:normal;"À»  CSS¿¡  Ãß°¡Çϸ頠µÈ´Ù.

¹öÆ°À»  À§ÇÑ  ¿¹Á¦´Â  ¾Æ·¡¿Í  °°´Ù.


.ui-btn-text  {
  white-space:  normal;
  }


¸®½ºÆ®¸¦  À§ÇÑ  ¿¹Á¦´Â  ¾Æ·¡¿Í  °°´Ù.


.ui-li-desc  {
  white-space:  normal;
  }

´Ù½Ã  ¿ø·¡  ¼³Á¤À¸·Î  µÇµ¹¸®±â  ¿øÇÒ°æ¿ì¿¡´Â,  "white-space:nowrap;"À¸·Î  ¼³Á¤Çϸ頠µÈ´Ù.

2.  ÆäÀÌÁö  ·Îµå½Ã¿¡  ¹è°æÀ̹ÌÁö¸¦  ·£´ýÇÏ°Ô  º¸¿©ÁÖ±â.

jQuery  MobileÀº  ÆäÀÌÁö  ·Îµå½Ã¿¡  ´Ù¾çÇÑ  ÃʱâÈ­  ¹æ½ÄÀ»  °¡Áö°í  ÀÖ´Ù.
¾Æ·¡ÀÇ  CSS  +  JavaScript´Â  ÆäÀÌÁö°¡  ·ÎµåµÉ  ¶§¸¶´Ù  ¸Å¹ø  ·£´ýÇÑ  À̹ÌÁö¸¦  º¸¿©ÁÙ  °ÍÀÌ´Ù.

CSS


.my-page    {  background:  transparent  url(../images/bg.jpg)  0  0  no-repeat;  }
  .my-page.bg1  {  background:  transparent  url(../images/bg-1.jpg)  0  0  no-repeat;  }
  .my-page.bg2  {  background:  transparent  url(../images/bg-2.jpg)  0  0  no-repeat;  }
  .my-page.bg3  {  background:  transparent  url(../images/bg-3.jpg)  0  0  no-repeat;  }

JavaScript


$('.my-page').live("pagecreate",  function()  {
            var  randombg  =  Math.floor(Math.random()*4);  //  0  to  3
          $('.my-page').removeClass().addClass('bg'  +  randombg);
  });

3.  ¹öÆ°  ¾×¼Ç  ºñÈ°¼ºÈ­Çϱâ.

¾Æ·¡ÀÇ  ÀÚ¹Ù½ºÅ©¸³Æ®¸¦  Ãß°¡Ç϶ó.


$('#home-button').button("disable");

´Ù½Ã  È°¼ºÈ­Çϱ⠠À§Çؼ­´Â  ¾Æ·¡¿Í  °°ÀÌ  Çϸ頠µÈ´Ù.


$('#home-button').button("enable");

4.  Loading...  Æ˾÷  ¸Þ½ÃÁö  ºñÈ°¼ºÈ­Çϱâ.

¾Æ·¡ÀÇ  ÀÚ¹Ù½ºÅ©¸³Æ®¸¦  Ãß°¡Ç϶ó.


$.mobile.pageLoading(true);

´Ù½Ã  È°¼ºÈ­Çϱ⠠À§Çؼ­´Â  ¾Æ·¡¿Í  °°ÀÌ  Çϸ頠µÈ´Ù.


$.mobile.pageLoading();

5.  »ç¿ëÀÚ  Á¤ÀÇ  Å׸¶  ¸¸µé±â.

jQuery  MobileÀº  5°¡ÁöÀÇ  Å׸¶¸¦  Á¦°øÇÑ´Ù.  -  Å׸¶  A,  B,  C,  D,  E
±×·¯³ª  »õ·Î¿î  Å׸¶¸¦  ½±°Ô  ¸¸µé¼öµµ  ÀÖ´Ù.

Å׸¶¸¦  ¸¸µé±â  À§ÇÑ  ´Ü°è  :

1.  jQuery  MobileÀÇ  css  ÆÄÀÏ¿¡¼­  ÇϳªÀÇ  Å׸¶¸¦  º¹»çÇÏ¿©  ´ç½ÅÀÇ  css  ÆÄÀÏ¿¡  ºÙ¿©³Ö±âÇ϶ó.

¾ËÆÄ2  ¹öÀüÀΠ jquery.mobile-1.0a2.css¸¦  ¿¹·Î  µé¸é  ¾Æ·¡ÀÇ  ³»¿ëÀ»  º¹»çÇϸ頠µÈ´Ù.


/*  theme  bar,body,btn  containers
  ----------------------------------*/
  .ui-bar-a  {    border:  1px  solid  #2A2A2A;  background:  #111111;  color:  #fff;  font-weight:  bold;  text-shadow:  0  -1px  1px  #000;  background-image:  -moz-linear-gradient(top,  #3c3c3c,  #111111);  background-image:  -webkit-gradient(linear,left  top,left  bottom,color-stop(0,  #3c3c3c),color-stop(1,  #111111));      -ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c',  EndColorStr='#111111')";  }
  .ui-bar-a,  .ui-bar-a  input,  .ui-bar-a  select,  .ui-bar-a  textarea,  .ui-bar-a  button  {  font-family:  Helvetica,  Arial,  sans-serif;  }
  .ui-bar-a  .ui-link-inherit  {  color:  #fff;  }
  .ui-bar-a  .ui-link  {  color:  #7cc4e7;  font-weight:  bold;  }

.ui-body-a  {    border:  1px  solid  #2A2A2A;  background:  #222222;  color:  #fff;    text-shadow:  0  1px  0  #000;  font-weight:  normal;  background-image:  -moz-linear-gradient(top,  #666666,  #222222);  background-image:  -webkit-gradient(linear,left  top,left  bottom,color-stop(0,  #666666),color-stop(1,  #222222));  -ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',  EndColorStr='#222222)')";  }
  .ui-body-a,  .ui-body-a  input,  .ui-body-a  select,  .ui-body-a  textarea,  .ui-body-a  button  {  font-family:  Helvetica,  Arial,  sans-serif;  }
  .ui-body-a  .ui-link-inherit  {  color:  #fff;  }
  .ui-body-a  .ui-link  {  color:  #2489CE;  font-weight:  bold;  }
  .ui-br  {  border-bottom:  1px  solid  rgba(130,130,130,.3);  }

.ui-btn-up-a  {  border:  1px  solid  #222;  background:  #333333;  font-weight:  bold;  color:  #fff;  cursor:  pointer;    text-shadow:  0  -1px  1px  #000;  text-decoration:  none;  background-image:  -moz-linear-gradient(top,  #555555,  #333333);  background-image:  -webkit-gradient(linear,left  top,left  bottom,color-stop(0,  #555555),color-stop(1,  #333333));      -ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555',  EndColorStr='#333333')";  }
  .ui-btn-up-a  a.ui-link-inherit  {  color:  #fff;  }
  .ui-btn-hover-a  {  border:  1px  solid  #000;  background:  #444444;  font-weight:  bold;  color:  #fff;    text-shadow:  0  -1px  1px  #000;  text-decoration:  none;  background-image:  -moz-linear-gradient(top,  #666666,  #444444);  background-image:  -webkit-gradient(linear,left  top,left  bottom,color-stop(0,  #666666),color-stop(1,  #444444));      -ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',  EndColorStr='#444444')";      }
  .ui-btn-hover-a  a.ui-link-inherit  {  color:  #fff;  }
  .ui-btn-down-a  {  border:  1px  solid  #000;  background:  #3d3d3d;  font-weight:  bold;  color:  #fff;  text-shadow:  0  -1px  1px  #000;  background-image:  -moz-linear-gradient(top,  #333333,  #5a5a5a);  background-image:  -webkit-gradient(linear,left  top,left  bottom,color-stop(0,  #333333),color-stop(1,  #5a5a5a));      -ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333',  EndColorStr='#5a5a5a')";  }
  .ui-btn-down-a  a.ui-link-inherit  {  color:  #fff;  }
  .ui-btn-up-a,  .ui-btn-hover-a,  .ui-btn-down-a  {  font-family:  Helvetica,  Arial,  sans-serif;  }

  2.  Å׸¶ÀÇ  À̸§À»  º¯°æÇ϶ó.  À̸§Àº  aºÎÅÍ  z»çÀÌ¿¡¼­  ¿øÇϴ  À̸§À¸·Î  Á¤Çϸ頠µÈ´Ù.

3.  »ö»ó  ¹×  ½ºÅ¸ÀÏÀ»  ÀԸ¿¡  ¸Â°Ô  º¯°æÇ϶ó.

4.  ¸¸¾à  ´ç½ÅÀÇ  Å׸¶ÀÇ  À̸§À»  z·Î  ÁöÁ¤ÇÏ¿´´Ù¸é,  ¾Æ·¡¿Í  °°ÀÌ  ÆäÀÌÁö¿¡  Àû¿ëÇ϶ó.


<div  data-role="page"  data-theme="z">

6.  »ç¿ëÀÚ  Á¤ÀÇ  ÆùÆ®  »ç¿ëÇϱâ.

jQuery  MobileÀ»  ÀÌ¿ëÇÏ¿©  À¥¾ÛÀ»  ¸¸µé  ¶§  cufon,  sIRF,  FLIR,  @font-face¿Í  °°Àº  ÆùÆ®¸¦  º¯°æÇϱ⠠À§ÇÑ  ¹æ¹ýµéÀÌ  ÀÖ´Ù.
ÀÌ  Áß¿¡¼­  °¡Àå  ½±°í  ¼º´ÉÀÌ  ÁÁÀº  ¹æ¹ýÀº  @font-face¸¦  ÀÌ¿ëÇÏ¿©  ¹æ¹ýÀÌ´Ù.

@font-face¸¦  ÀÌ¿ëÇϱ⠠À§Çؼ­´Â  eot¿Í  ttf  µÎ  °³ÀÇ  ÆùÆ®  ÆÄÀÏÀÌ  ÇÊ¿äÇÏ´Ù.
eot´Â  ÀͽºÇ÷η¯¸¦  À§ÇØ,  ttf´Â  ³ª¸ÓÁö  ºê¶ó¿ìÀú¸¦  À§ÇØ  ÇÊ¿äÇϸç,  ÀͽºÇ÷η¯¸¦  À§ÇØ  ¹Ýµå½Ã  eot°¡  ¸ÕÀú  ¼±¾ðµÇ¾î¾ß  ÇÑ´Ù.
  (µµ´ëü  ¿Ö  ÀͽºÇ÷η¯´Â  eot¶ó´Â  µ¶ÀÚÀûÀΠ Æ÷¸ËÀ»  »ç¿ëÇϴ°¡??  ÇÏ¿©°£  ms´Â  ¸¾¿¡  ¾Èµê!!)

ÆùÆ®  ´Ù¿î·Îµå  »çÀÌÆ®(¿µ¾î)  :  http://www.fontsquirrel.com/fontface

ÆùÆ®¸¦  °¡Áö°í  Àִٸ頠¾Æ·¡¿Í  °°ÀÌ  css  ¸¦  Àû¿ëÇϸ頠µÈ´Ù.


@font-face  {
  font-family:  'blok-regular';
  src:  url('type/Blokletters-Potlood.eot');
  src:  local('Blokletters  Potlood  Potlood'),
    local('Blokletters-Potlood'),
    url('type/Blokletters-Potlood.ttf')  format('truetype');
  }

@font-face  {
  font-family:  'blok-italic';
  src:  url('type/Blokletters-Balpen.eot');
  src:  local('Blokletters  Balpen  Balpen'),
    local('Blokletters-Balpen'),
    url('type/Blokletters-Balpen.ttf')  format('truetype');
  }

@font-face  {
  font-family:  'blok-heavy';
  src:  url('type/Blokletters-Viltstift.eot');
  src:  local('Blokletters  Viltstift  Viltstift'),
    local('Blokletters-Viltstift'),
    url('type/Blokletters-Viltstift.ttf')  format('truetype');
  }

h1  {  font-family:  blok-heavy,  helvetica,  arial;  }

7.  ÅؽºÆ®  ¾øÀÌ  À̹ÌÁö·Î¸¸  ¹öÆ°  ¸¸µé±â.

data-iconpos  ¼Ó¼ºÀ»  "notext"·Î  ¼³Á¤Ç϶ó.


<a  href="../index.html"  data-icon="grid"
  class="ui-btn-right"  data-iconpos="notext">Home</a>

8.  AJAX¸¦  ÀÌ¿ëÇÑ  ÆäÀÌÁö  Æ®·£Áö¼Ç¾øÀÌ  ¸µÅ©  ¿­±â.

rel  ¼Ó¼ºÀ»  "external"·Î  ¼³Á¤Ç϶ó.


<a  href="../index.html"  data-icon="grid"
  class="ui-btn-right"  rel="external">Home</a>

9.  ¸®½ºÆ®  ¾ÆÀÌÅÛ¿¡¼­  È­»ìÇ¥  Á¦°ÅÇϱâ.

data-icon  ¼Ó¼ºÀ»  "false"·Î  ¼³Á¤Ç϶ó.


<li  data-icon="false"><a  href="contact.html">Contact  Us</a></li>

10.  ÆäÀÌÁöÀÇ  ¹è°æ  »ö»ó  ¼³Á¤Çϱâ.

jQuery  Mobile¿¡¼­  ¹è°æ  »ö»óÀ»  ÁöÁ¤Çϱ⠠À§Çؼ­´Â  <body>űװ¡  ¾Æ´Ñ  ÆäÀÌÁö¸¦  ³ªÅ¸³»´Â  <div>ű×ÀÇ  Å¬·¡½º¿¡  ÁöÁ¤Çؾߠ ÇÑ´Ù.


.ui-page  {
  background:  #eee;
  }
ÃßõÃßõ : 320 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,885
input ÀÔ·Â ÇÊµå ¾ÕµÚ °ø¹é ½Ç½Ã°£ Á¦°Å
2,884
Placeholder Æ÷Ä¿½º½Ã °¨Ãß±â
2,883
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
2,882
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
2,881
sessionStorage.getItem ¿Í sessionStorage.setItem
2,880
Á¦ÀÌÄõ¸® ·£´ýÀ¸·Î ¹è°æ»ö º¯°æ
2,879
preg match¿¡ °üÇÑ Á¤±Ô½Ä
2,878
Stream an audio file with MediaPlayer ¿Àµð¿À ÆÄÀÏ ½ºÆ®¸®¹Ö Çϱâ
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER ȯ°æ º¯¼ö Á¤¸®
2,875
Vimeo (ºñ¸Þ¿À) API ¸¦ »ç¿ëÇÏ¿© Ç÷¹À̾î ÄÁÆ®·ÑÇϱâ
2,874
iframe »ç¿ë½Ã ÇÏ´Ü¿¡ ¹ß»ýÇÏ´Â °ø¹é Á¦°Å¹æ¹ý
2,873
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
2,872
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
2,871
ºÎÆ®½ºÆ®·¦ CSS
2,870
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
2,869
PHP ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀθíÀ̳ª urlµîÀÇ Á¤º¸ ¾Ë¾Æ¿À±â
2,868
PHP preg match all()
2,867
PHP ·Î À¥ÆäÀÌÁö ±Ü¾î¿À±â ¸ðµç ¹æ¹ý ÃÑÁ¤¸®!
2,866
[PHP] ¿ø°ÝÁö ÆÄÀÏ ÁÖ¼Ò ³ëÃâ ¾ÈÇÏ°í curl·Î ´Ù¿î·Îµå ¹Þ±â
2,865
PHP ÇÔ¼ö Á¤¸®
2,864
¾ÆÀÌÇÁ·¹ÀÓ(iframe) ºñÀ² À¯ÁöÇϸ鼭 Å©±â Á¶ÀýÇÏ´Â ¹æ¹ý
2,863
PHP ¹è¿­¿¡¼­ ¹«ÀÛÀ§·Î Çϳª »Ì¾ÆÁÖ´Â array rand() ÇÔ¼ö
2,862
PHP Á¤±Ô½Ä Á¤¸®
2,861
PHP Á¤±Ô½ÄÀ» È°¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
2,860
php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
2,859
Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
2,858
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
2,857
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
2,856
[HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.