noteforW3schoolsJQueryMobile

最新推荐文章于 2024-10-06 13:20:09 发布

SH_Richard_Lee

最新推荐文章于 2024-10-06 13:20:09 发布

阅读量410

点赞数

分类专栏： note backup 文章标签： javascript ui 微信

本文链接：https://blog.csdn.net/SH_Richard_Lee/article/details/52566253

版权

note 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

backup

8 篇文章 0 订阅

订阅专栏

* HAHAHA，I am so excited about write UniBus UI with JQueryMobile; *
** I am a little worried about JQueryMobile support of wechat platform, so 原来是要在微信公众号官方网站里填上网站的安全域名（微信公众号里的js域名那里），要填域名，填IP不执行js.
hate to use Chinese in this pure England environment. **

JQMobile Get Started

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>I Am Now A Mobile Developer!!</p>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

</body>
</html>

JQMobile Pages

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <a href="#pagetwo">Go to Page Two</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="main" class="ui-content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>

* Tip: The load time will be affected by web applications with a lot of content (i.e text, links, images, scripts etc). Use external files if you don’t want to link pages internally:*

<a href="externalfile.html">Go To External Page</a>

Using Pages as Dialogs

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <a href="#pagetwo">Go to Page Two</a>
  </div>
</div>

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="main" class="ui-content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>

* this is useful to create info page. *

JQMobile Transitions

<a href="#anylink" data-transition="slide">Slide to Page Two</a>

flip Flips to the next page from back to front * this is so suitable to switch to other page. *
flow Throws the current page away and comes in with the next page * that is amazing effect. *
pop Goes to the next page like a popup window * use for dialog box showing *
…
Tip: All effects above also support reverse/backward actions, e.g. if you want the page to slide from left to right, instead of right to left, use the data-direction attribute with value “reverse”.

Slide">```
** which is very cool, marked **
# jquery Buttons
A button in jQuery Mobile can be created in three ways:

Using the <input> element
Using the <button> element with class="ui-btn"
Using the <a> element with class="ui-btn"

**  We recommend that you use the <a> element with class="ui-btn" to link between pages, and <input> or <button> elements for form submission.  **

# JQMobile icons
** trouble for use icon in JQueryMobile, hard to charge them. **
** I do not like the style of JQueryMobile; **
** althrough it looks arguly, but use it for the first time. **
** solved, HAHAHA. **
```quote
It would be great to see something like:

Copy code
data-theme="none"

And to allow this for any element.
This way you keep the functionality and have control on which elements you want to style.

Also a global to turn off styling for a collection of elements would also be useful.

I went ahead and wrote this:

Copy code
$('[data-role="page"]').live( 'pageinit',function(event){
    // Remove styling for any element marked with data-theme="none"
    $(':jqmData(theme="none")').children().andSelf().removeAttr('class');
});

* it seems WangYi YunBiJi can not save https page. *
* do not know why, although i hava scan this tutorial, i still feel i can not handle it perfectly. maybe JQueryMobile is too much prudish for me. *
* data-theme=”none” seems that useful. *
* for some html elements that JS add when load to browser, so it is not convenient to change it style. *