jQuery Mobileページでハイパーリンクを設置するには？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。 jQuery Mobileページにハイパーリンクを設置することは、何ら難しいことはありません。おなじみのアンカータグ（＝<a>タグ）を記述するだけです。もっとも、裏側ではjQuery Mobile固有の挙動も絡んでおり、ただ表向きの構文を理解しておけばよいというものではありません。本稿では、前半でjQuery Mobileにおけるリンクの挙動を解説するとともに、後半ではリンクに関連して、ページ遷移
1-5 jQuery Mobileにテキストを省略させずに表示する
jQuery Mobileは、jQuery MobileのCSS（で読込むCSS）の中に、カスタムクラスを定義しています。 jQuery MobileはこのクラスをHTML内に動的に追加することで、モバイルコンテンツに最適なスタイルを適用しています。 これらの定義済みクラスを上書きすることで、jQuery Mobileによる自動装飾スタイルを変更しカスタマイズすることも可能です。 (※このページのみ上書きのCSSを適用しています。ページを戻るにはブラウザの戻るを使用ください。) <style> .ui-header .ui-title, /* header */ .ui-footer .ui-title, /* footer */ .ui-btn-inner, /* button */ .ui-li-heading, /* listview heading */ .ui-li .ui-b
data-role | jQuery Mobile リファレンス
data-role属性はHTMLに様々な機能を追加する属性の一覧です。 tabs data-role="tabs"はタブパネルを作成するための属性です。 rangeslider data-role="rangeslider"は2つの値の間隔を指定できるスライダーが作成できる属性です。 table data-role="table"はレスポンシブテーブルを作成するための属性です。 panel data-role="panel"はパネルウィジェットを作成する属性です。 dialog data-role="dialog"はダイアログを設定する属性です。 list-divider data-role="list-divider"はリストに見出しをつけることができる属性です。 listview data-role="listview"はul要素/ol要素をリスト形式に変換するメソッドです。 slid
jQuery Mobile 使用時のリンク先に「#」が入る場合
なんとも長いタイトルですが、要するにスマホサイト構築時にjQuery Mobileを利用していて、サイト内リンクとして「hoge.html#top」というような記述をアンカータグに入れる場合のおハナシです。 ちなみにこれをやるとページ遷移後は真っ白になります。jQuery Mobileではページ移動をAjaxでもって行うことが基本なので、それを回避するにはコチラやコチラのような手法をとります。 ですが、このやり方では冒頭で取り上げたケースは回避できませんでした。調べても何も出てこない‥‥。で、どうするかというと jQuery Mobile自体を弄る リンクの記述を変える を思いつき、後者をとりました。 パスの記述から#を外し、代わりにid名を変数として加えて、リンク先のhtmlに以下のようなscriptを加えます。 <script type="text/javascript"> $(fun
Tableウィジェットでレスポンシブルなテーブルを作成するには？（Column toggle編）
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。 Tableウィジェットを利用することで、レスポンシブル・テーブルを作成できます。レスポンシブル・テーブルとは、画面サイズに応じて表示幅を調整してくれるテーブルのこと。具体的には、画面サイズによって列を選択的に表示するColumn toggleモード、画面幅が広いときには通常のテーブルを、狭いときには名前／値の連票形式で表示するReflowモードとが用意されています。 本稿では、まずそのうちの1つ、
data-priority | jQuery Mobile リファレンス
data-priorityはcolumntoggleテーブルに表示する列を指定できる属性です。 data-role=”table”を指定した要素にdata-mode=”columntoggle”をあわせて指定したレスポンシブテーブルの列の重要度を指定します。 columntoggleでは2つのポイントで表示する列を決定します。ひとつはブラウザのウィンドウ幅、もうひとつはユーザーがメニューで表示すると指定した列です。 ブラウザのウィンドウ幅から表示する列が決定される場合には、data-priorityで指定した重要度の低いものから順に非表示になります。 data-priorityには1〜6の数値が指定でき1がもっとも高く6がもっとも低い重要度です。 <table data-role="table" id="table-column-toggle" data-mode="columntoggl
スマホ対応初心者に送るjQuery Mobileの使い方“超”入門
スマホ対応初心者に送るjQuery Mobileの使い方“超”入門：jQuery Mobileでスマホ向け企業サイト構築（1）（1/2 ページ） jQuery Mobileを利用した企業サイトの構築【準備編】 iPhone、Androidなどのスマートフォンが普及するなかで、スマートフォンブラウザ向けWebサイトの需要は拡大しています。グーグルの調査によると、日本のスマートフォン普及率は2011年1、2月の時点で「6％」、2011年9、10月では「17％」です。平成24年の国内スマートフォン販売シェアが半数を超え、さらなるシェアの拡大は確実です（参考）。 PCの販売台数が低下する中、iPadなどのタブレット端末の普及も伴い、今後モバイル端末への対応が必須となってきます。かつてPC上のWebブラウザで起こったシェア争奪戦「ブラウザ戦争」と同様に、モバイル端末のシェアの奪い合いも激しくなってい
別ページへのアンカーリンクに該当するアコーディオンだけを表示させる方法 | はらぺこ屋 フロントエンドハングリー
こんにちは。 しぶとく生きてます。 今日は仕事で水曜日に必要になるjQueryをごそごそいじってました。 ■動作内容 ○機能１ 元のページからアンカーリンクを飛ばして、 飛んだ先のアコーディオンだけを開きたい。 ○機能2 また遷移後は、全てのアコーディオンが 通常通りのアコーディオンの動作をするようにしたい。 なお、dtタグには開閉を示す画像の入れ替えが行われる (今回用意したサンプルは文字しかないためこの機能はついていません) ■参考URL 参考になったページはこれくらい。。。 これじゃ動かなかったんですが。 アコーディンパネルの別ページからのリンクについて – OKWaveより ■ソース 遷移前ページ(link.html) <!DOCTYPE html> <html> <head> <title>test</title> <meta charset="utf-8"> <
ユーザーインターフェース（画面）の作り方一覧
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://yaplog.jp/jokun/archive/6