使用jQuery mobile NuGet让你的网站在移动设备上同样精彩

2020-05-19 07:26:32易采站长站整理

Form例子:


<div class="editor-label">
@Html.LabelFor(model => model.ShortName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ShortName)
@Html.ValidationMessageFor(model => model.ShortName)
</div>

没有什么改变。大多数内置的形式功能将完全呈现jQuery Mobile的预期。

List View例子:


<ul data-role="listview" data-theme="g">
<li><a href="acura.html" rel="external nofollow" >Acura</a></li>
<li><a href="audi.html" rel="external nofollow" >Audi</a></li>
<li><a href="bmw.html" rel="external nofollow" >BMW</a></li>
</ul>

上面的例子将列出所有的books,他们的标题被设置成为一个转向详细页的链接。这个链接在一个标准可滚动的列表中。

更改Theme的示例:

目前,jQuery Mobile的五个内置的主题,从一个字母到E每个
上述项目可以通过追加一个新的属性称为,改变他们的主题。data-theme,用不同的字母(A至E)表示。

译者:由于书里没有给例子。我在我们的_layout上改变代码如下:


<div class="page" data-role="page" data-theme="a">
<div id="header" data-role="header" data-theme="e">

我给page 一个主题是a,给header一个主题是e。下图是效果:

是不是有点像某个系列书的风格,囧。

还有太多太多jquery mobile 的例子。想知道更详细的内容,可以去JQuqey Mobile 官网去看看