私はIntention.jsを使用しようとしています。
Intention.js を使用する場合、画面の幅に基づいてページをどのようにレンダリングしますか。Intention.js には、以下のコード サンプルに示すように、デバイスに基づいてページのレンダリングを調整するコードがあります。
<html> <header>
<img src="logo.png" intent
in-highres-src="retina.png" />
</header>
<nav intent
in-mobile-prepend="#content"
in-tablet-prepend="#content"
in-standard-after="header"
in-touch-class="swipeDrawer">
<a id="about" intent
in-mobile-href="about.html"
in-tablet-href="about.html"
in-standard-href="#about">About</a>
<a id="projects" href="/faq"
intent
in-mobile-before="#about">FAQ</a>
</nav>
<div id="content" intent
in-width: in-orientation:>
This is all so complex
</div>
</html>
ただし、特定の画面サイズがどのように決定されるかは明確ではありません。
モバイル・タブレット・スタンダードとは？私は、intention.jsを使用して幅を決定し、それに基づいてコンテンツを表示することは可能だと思いますが、このライブラリを使用してそのような幅を定義する方法は私には不明です.
そして、その情報が与えられた場合、それらの特定のサイズに基づいて異なるテーブルをどのようにレンダリングするのでしょうか?
次のようなものだと思います：
<table intent
in-tablet-td
in-mobile-td <<-- but wouldnt that change only a single td ?
画面サイズに応じて、3 列または 5 列などのテーブル構成を定義するものを探しています。
//-------------------2013年11月14日更新------------------
画面幅の値が別のスクリプトで設定されているようです。Intention.js の他に、context.js と呼ばれる必要なスクリプトがあります。
intent.responsive([{name:'base'}]).respond('base');
// width context?
// =======================================================================
horizontal_axis = intent.responsive({
ID:'width',
contexts: [
{name:'standard', min:840},
{name:'tablet', min:510},
{name:'mobile', min:0}],
// compare the return value of the callback to each context
// return true for a match
matcher: function(test, context){
if(typeof test === 'string'){
return test === context.name;
}
return test>=context.min;
},
// callback, return value is passed to matcher()
// to compare against current context
ここで「標準/タブレット/...」という名前を見つけるだけでなく、ここでも明確に定義されていますか? どうやらこれらの変数はここで作成されており、intention.js 内にはありません。
今、私は、さまざまなテーブルメイクを行う方法を見つけるだけです.