jQTouchのノウハウまとめ（その３：色々）

引き続きjQTouchのノウハウです。

ノウハウ：liタグの中のaタグがblockになってるのを変えたい。

liタグの中のaタグのスタイル：'display'が'block'になるようになっています。

これはliタグはクリックするとスライドして他のページ（divタグ）を表示するようになっているためです。

しかしliタグを見た目だけに利用しスライドさせない場合、liタグ内の文章の一部にaタグでリンクを貼りたい場合があります。

これはcssファイルで修正できます。

appleのテーマの場合は、182行目の

ul li a, li.img a + a{

を

ul li>a, ul li form>a, li.img a + a {

に修正します。

ul li>a

とすることで、li直下にあるa以外はblockにはなりません。

ul li form>a

は、後述するliタグ内からajaxを実行するために入れています。

ノウハウ：liタグの中からajaxを使う。

jQTouchでは、以下のようにすることで新しいページ(新しいdivタグ)を開いてそこの中にajaxで取得したページを表示する事ができます。

<form action="取得したいページのURL" method="post">
...
...
<a href="#" class="submit whiteButton">Submit</a>
</form>

これで「submit」のリンクをクリックすると、新しいdivタグ作成して開き、そこに「取得したいページのURL」から取得したデータを表示します。

liタグから実行する場合は、formをliで囲み、aタグのclassから「whiteButton」を削除します。

<li><form action="取得したいページのURL" method="post"><a href="#" class="submit">Go to xxx</a></form></li>

ノウハウ：jQTouchのURL以外へのリンク

jQTouchを使ったサイト内のaタグのhrefはすべてjQTouchのサイト内での動作になります。

つまり

<a href='http://www.xxx.yy/' >xxx.yy</a>

とか

<a href='/aaa'>aaa</a>

のように外部サイトであっても、同一サイトの別URLであっても、そのURLは表示されません。

それでは、どうすれば良いか

実は最初は、hrefは使わずにonclickでサイトを開くようにしていました。

これでも動くですが、あまり美しくないので調べると、実は他に手がある事が判りました。

まず一つ目は別ウィンドウを開く方法です。

<a href='http://www.xxx.yy/' target='_blank'>xxx.yy</a>

このtargetを_blankとすると普通に別Windowでサイトを開いてくれます。

もうひとつが、rel属性を指定する方法です。

<a href='/aaa' rel='external'>aaa</a>

このようにrel属性でexternalを指定すれば、ちゃんと指定したURLを表示してくれます。

ノウハウ：slideさせるタグの構成を決めておく

jQTouchをそのまま使うと、liタグ内のaタグは、（上記の別URLを指定している場合を除き）すべてslide(横向けにスライドして画面が変わる)します。

しかしそうしたくない場合も当然あるので、slideさせたくない場合にはどうhtmlを書くのか（classを指定したり親子構造を決めたり)しておいた方がいいでしょう。

私が決めたのは次の二つです。

ulのclassがindividualの場合にはslideさせない。（individualを指定すると、liタグが二つ横に並んで表示されます。）
li直下にaタグがある場合だけslideさせます。

この二つを実現するためには、以下のようにjQTouchを実行します。

$.jQTouch({slideSelector:'body > div > ul:not(.individual) li>a'});

ところでどういう時にslideさせたくないかというと、onclickなどのイベントで処理を行う時です。

onclickがあってもslideされてしまうので、されないような工夫が必要になります。

ChanTo.meでは、onclickを使いたい場合には、li直下にaタグを置かないようにしています。

ただ、このページの上でli内の直下以外のaタグはblockではなくしていますので、このままだと文字のある部分しかaタグが効かず、onclickが実行されません。

そのため、以下のようなcssを記述して、classにnoslideを入れるようにしました。

ul li a.noslide {
    color: #000;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    padding: 12px 10px 12px 10px;
    margin: -10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

まあ、これがベストではないと思いますが、先にこういう構成も考えておくと良いでしょう。