移动Web页面的基本组成元素：

页面头部，页面内容，页面底部

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

<div data-role="page">

<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->

<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->

<!-- footer -->
    <div data-role="footer" class="footer" data-theme="b" >
       <img alt="" src="../images/logo.gif" />
    </div>
</div><!-- /page -->

</body>
</html>

jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。

jQuery
Mobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使
用。使用该框架可以节省大量的js代码开发时间，尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。

接下来我们将通过实例向大家展示jQuery
Mobile的特性及好处，让我们看一下这个新框架是怎么帮助你在短时间内建立起一个高质量的移动应用程序,接下来的代码讲解中的代码最好使用的移动设备
平台是IPhone或Android。或者是PC电脑上使用 Safari浏览器调试。

Go on!

jQuery Mobile 都能做什么?

◆jQuery Mobile为开发移动应用程序提代了非常简单的用户接口

◆这种接口的配置是标签驱动的，这意味着我们可以在HTML中建立大量的程序接口而不不需要写一行js代码

◆提供了一些自定义的事件用来探测移动和触摸动作。例如tap(敲击)、tap-and-hold(点击并按住)、swipe、orientation change

◆使用一些加强的功能时需要参照一下设备浏览器支持列表

◆使用预设主题可以轻松定制应用程序外观

jQuery Mobile 基本页面结构

大部分jQuery Mobile Web应用程序都要遵循下面的基本模板

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Page Title</title>
  5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  />
  6. <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  7. <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
  8. </head>
  9. <body>
  10. <div data-role="page">
  11. <div data-role="header">
  12. <h1>Page Title</h1>
  13. </div>
  14. <div data-role="content">
  15. <p>Page content goes here.</p>
  16. </div>
  17. <div data-role="footer">
  18. <h4>Page Footer</h4>
  19. </div>
  20. </div>
  21. </body>
  22. </html>

要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容

◆ CSS文件jquery.mobile-1.0a1.min.css

◆ jQuery library jquery-1.4.3.min.js

◆ jQuery Mobile library jquery.mobile-1.0a1.min.js

在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。

我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。

说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。

在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。

多个页面在同一个页面中

有一种建立在一个 HTML页面基础之上的页面结构，即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅得到一个页面，就可以实现页面平滑切换的客户体验。参看下面实例：(目前有bug)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jQuery Mobile: Pages within Pages</title>
  5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  />
  6. <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  7. <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
  8. </head>
  9. <body>
  10. <div data-role="page" id="home">
  11. <div data-role="header">
  12. <h1>Home</h1>
  13. </div>
  14. <div data-role="content">
  15. <p><a href="#about">About this app</a></p>
  16. </div>
  17. </div>
  18. <div data-role="page" id="about">
  19. <div data-role="header">
  20. <h1>About This App</h1>
  21. </div>
  22. <div data-role="content">
  23. <p>This app rocks! <a href="#home">Go home</a></p>
  24. </div>
  25. </div>
  26. </body>
  27. </html>

正如所见，上面的代码中包含了两个”page”:主页(id为home)和”about”(id为about)。从Home链接到About页面采 用的是连接地址为#about，about页面返回到首页的链接地址为#home。jQuery Mobile会自动切换链接的目的div显示到移动浏览器中。该框架会隐藏除第一个包含data-role=”page”div以外的其它”page”

AJAX 导航

为了实现在移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。

这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待 数秒的方式要好很多。当一个新的页面做为新的data-role=”page” div插入到主页面时，主页面会有效的缓存取到的内容。使得当要访问一个页面时能够尽快的显示出来。这个工作过程听起来难以置信的复杂，但是做为开发人员 的我们大部份不需要了解其中工作的具体细节。只要能看到效果就OK。

注意:如果你不想采用AJAX的方式加载页面，而想以原生的页面加载方式打开一个链接页面，只需要在打开的链接上添加属性 rel=”external”属性 .

页面切换效果

你可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可。可能的值如下

例如

  1. <p><a href=”#about” data-transition=”flip”>关于页面</a></p>

在浏览器中查看效果

注意：查看以上的效果需要您的浏览器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。

对话框

通过在链接中添加data-rel=”dialog”的属性，可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择

例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下

  1. <p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>

注意：目前的测试版本存在问题，当在一个页面中写多个”page”时在以dialog的方式打开一个页面时，不会出现对话框效果

按钮

按钮是触摸式应用程序的一部分，它们扮演链接的功能，因为它们提供了更大的目标，当你点击链接的时候(比较适合，手指比较胖的人群)

在jQuery Mobile中把一个链接变成button的效果，只需要在标签中添加data-role=”button属性即可”。例如：

  1. <div data-role="content">
  2. <p><a href="#about" data-role="button">About this app</a></p>
  3. </div>
  4. ...
  5. <div data-role="content">
  6. <p>This app rocks!</p>
  7. <a href="#home" data-role="button">Go home</a>
  8. </div>

另外jQuery Mobile也会自动的转换像表单元素中的submit，reset，button，或image为按钮样式。

还可以利用data-icon属性建立各式各样的按钮，建立行内按钮和按钮组(水平或垂直的)

格式化文本

为了使其尽可能的灵活，jQuery Mobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。

有两种布局方法使其格式化变得更简单：布局表格和可折叠的内容块

◆布局表格：组织内容以列的形式显示，有两列表格，和三列表格

◆可折叠的内容：当点击内容块的标题，则会将其隐藏的详细内容展现出来

下面是一个可折叠内容的实例，单击标题将看到具体的内容，再点击标题则会将展现的内容隐藏。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Collapsible Content Demo</title>
  5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  />
  6. <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  7. <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
  8. </head>
  9. <body>
  10. <div data-role="page" id="home">
  11. <div data-role="header">
  12. <h1>Home</h1>
  13. </div>
  14. <div data-role="content">
  15. <div data-role="collapsible" data-state="collapsed">
  16. <h3>About this app</h3>
  17. <p>This app rocks!</p>
  18. </div>
  19. </div>
  20. </div>
  21. </body>
  22. </html>

触摸选择的表单元素

jQuery Mobile会自动替换标准的HTML表单元素，例如文本框，复选框，列表框。以这种自定义的样式工作在触摸设备上的表单元素，易用性更强。

例如，复选框将会变得很大，易于点选。点击下拉列表时，将会弹出一组大按钮列表选项，提供给用户选择。

该框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加两个option选项，创建不错的”打开/关闭”开关，

另外一个不错的特点是组合单选框和组合复选框，可以利用fieldset元素添加属性data-role=”controlgroup”来创建一组单选按钮或复选框，jQuery Mobile自动格式化他们的格式。使它们看上去更fashion!

一般来说，开发者不需要关心表单的那些高级特性，开发者仅需要以正常的方式创建你的表单，jQuery Mobile框架会帮你完成剩余的工作。另外有一件事情需要开发人员来完成，即使用div或fieldset 属性data-role=”fieldcontain”包装每一个label/field。这样jQuery Mobile会在label/field对之间添加一个水平分割条。这样的对齐方式可以使其更容易查找。

下面是一个jQuery Mobile版的表单元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jQuery Mobile Form Demo</title>
  5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  />
  6. <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  7. <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
  8. </head>
  9. <body>
  10. <div data-role="page" id="home">
  11. <div data-role="header">
  12. <h1>Ice Cream Order Form</h1>
  13. </div>
  14. <div data-role="content">
  15. <form action="#" method="get">
  16. <div data-role="fieldcontain">
  17. <label for="name">Your Name:</label>
  18. <input type="text" name="name" id="name" value=""   />
  19. </div>
  20. <div data-role="controlgroup">
  21. <legend>Which flavour(s) would you like?</legend>
  22. <input type="checkbox" name="vanilla" id="vanilla" class="custom"  />
  23. <label for="vanilla">Vanilla</label>
  24. <input type="checkbox" name="chocolate" id="chocolate" class="custom"  />
  25. <label for="chocolate">Chocolate</label>
  26. <input type="checkbox" name="strawberry" id="strawberry" class="custom"  />
  27. <label for="strawberry">Strawberry</label>
  28. </div>
  29. <div data-role="fieldcontain">
  30. <label for="quantity">Number of Cones:</label>
  31. <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"   />
  32. </div>
  33. <div data-role="fieldcontain">
  34. <label for="sprinkles">Sprinkles:</label>
  35. <select name="sprinkles" id="sprinkles" data-role="slider">
  36. <option value="off">No</option>
  37. <option value="on">Yes</option>
  38. </select>
  39. </div>
  40. <div data-role="fieldcontain">
  41. <label for="store">Collect from Store:</label>
  42. <select name="store" id="store">
  43. <option value="mainStreet">Main Street</option>
  44. <option value="libertyAvenue">Liberty Avenue</option>
  45. <option value="circleSquare">Circle Square</option>
  46. <option value="angelRoad">Angel Road</option>
  47. </select>
  48. </div>
  49. <div class="ui-body ui-body-b">
  50. <fieldset class="ui-grid-a">
  51. <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
  52. <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>
  53. </fieldset>
  54. </div>
  55. </div>
  56. </div>
  57. </body>
  58. </html>

列表视图

列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role=”listview”属性。

下面的一些情景将会用到创建列表视图

简单的文件列表项

◆简单的文件列表，会有一个好看的盒环绕着每一个列表项

◆链接列表，框架会自动为每一个链接加一个箭头”>”，显示在链接按钮的右侧

◆嵌套列表，如果你在一个li中嵌套另一个ul，jQuery Mobile会为这个嵌套列表自动建立一个”page”，并为它的父li自动加一个链接，这样很容易实现树状菜单选项，设置功能等等。

◆分隔线的按钮列表，在一个li中存放2个链接，你可以建立一个还垂直分隔条，用户可点击左侧或右侧的列表选项，展现不同的内容

◆记数气泡 如果你在列表选项中添加class=”ui-li-count”，框架会在其中生成一个”小泡泡”图标显现于列表选项的右侧，并在”小泡泡”中显示一些内容。类似在收信箱中看到已经收到的信息条数

◆查找过滤 在ul或ol中添加data-filter=”true”属性。则这个列表项就具备的查询的功能。”Filter result…”文本框将会显示在列表项的上面，允许用户根据条件来将一个大的列表项变小(过滤显示)

◆列表分隔 将列表项分割，可以在任意列表项上添加属性data-role=”list-divider

◆列表缩略图和图标。将img元素放在在列表项的开始， jQuery Mobile将会以缩略图的形式来展现，图片的大小为80 X 80像素。如果添加class=”ui-li-icon”类样式img元素的大小将会以16 X 16像素的图标

以下是一个列表项的实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jQuery Mobile Lists Demo</title>
  5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  />
  6. <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  7. <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
  8. </head>
  9. <body>
  10. <div data-role="page" id="home">
  11. <div data-role="header">
  12. <h1>Lists Demo</h1>
  13. </div>
  14. <div data-role="content">
  15. <h2 style="padding: 1em 0;">A list view</h2>
  16. <ul data-role="listview" data-inset="true">
  17. <li>Cat</li>
  18. <li>Dog</li>
  19. <li>Mouse</li>
  20. <li>Squirrel</li>
  21. </ul>
  22. <h2 style="padding: 1em 0;">A list of links</h2>
  23. <ul data-role="listview" data-inset="true">
  24. <li><a href="#">About this app</a></li>
  25. <li><a href="#">Buy ice cream</a></li>
  26. <li><a href="#">Find a store</a></li>
  27. </ul>
  28. <h2 style="padding: 1em 0;">Nested lists</h2>
  29. <ul data-role="listview" data-inset="true">
  30. <li>Play
  31. <ul>
  32. <li><a href="#">Easy</a></li>
  33. <li><a href="#">Medium</a></li>
  34. <li><a href="#">Hard</a></li>
  35. </ul>
  36. </li>
  37. <li>Settings
  38. <ul>
  39. <li><a href="#">Graphics</a></li>
  40. <li><a href="#">Sound</a></li>
  41. <li><a href="#">Device</a></li>
  42. </ul>
  43. </li>
  44. <li>Highscores
  45. <ul>
  46. <li><a href="#">View</a></li>
  47. <li><a href="#">Submit</a></li>
  48. <li><a href="#">Reset</a></li>
  49. </ul>
  50. </li>
  51. </ul>
  52. <h2 style="padding: 1em 0;">A split button list with filter</h2>
  53. <ul data-role="listview" data-inset="true" data-filter="true">
  54. <li>
  55. <a href="#">The Grapes of Wrath</a>
  56. <a href="#">Buy This Book</a>
  57. </li>
  58. <li>
  59. <a href="#">The Trial</a>
  60. <a href="#">Buy This Book</a>
  61. </li>
  62. <li>
  63. <a href="#">A Tale of Two Cities</a>
  64. <a href="#">Buy This Book</a>
  65. </li>
  66. </ul>
  67. <h2 style="padding: 1em 0;">A list with count bubbles</h2>
  68. <ul data-role="listview" data-inset="true">
  69. <li><a href="#">SuperWidgets</a> <span class="ui-li-count">14</span></li>
  70. <li><a href="#">MegaWidgets</a> <span class="ui-li-count">0</span></li>
  71. <li><a href="#">WonderWidgets</a> <span class="ui-li-count">327</span></li>
  72. </ul>
  73. </div>
  74. </div>
  75. </body>
  76. </html>

data-inset=”true”将格式化列表块为圆角化，如果你使用这种样式的话，列表条目的宽度拉伸成与浏览器窗口的宽度一致

主题

jQuery Mobile渲染的灰色、黑色和蓝色及圆形的组件使其看起来很漂亮，但是如果你的整个应用都使用这样的样式，将会使其变得很乏味。jQuery Mobile允许你自定义官方一些组件的主题。例如：

◆Font family

◆Drop shadows

◆按钮和盒状元素的边框圆角半径

◆图标组件

另外，每一个主题包含26种不同颜色的切换(标记从a 到z)，可以控制前景颜色，背景色和渐变色，典型用法是使页面元素部分替换，你可以使用data-theme属性。例如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Page Title</title>
  5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  />
  6. <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  7. <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
  8. </head>
  9. <body>
  10. <div data-role="page" id="home">
  11. <div data-role="header">
  12. <h1>Home</h1>
  13. </div>
  14. <div data-role="content">
  15. <a href="#" data-role="button" data-theme="a">About this app</a>
  16. <a href="#" data-role="button" data-theme="b">About this app</a>
  17. <a href="#" data-role="button" data-theme="c">About this app</a>
  18. <a href="#" data-role="button" data-theme="d">About this app</a>
  19. <a href="#" data-role="button" data-theme="e">About this app</a>
  20. </div>
  21. </div>
  22. </body>
  23. </html>

事件

框架还提供了简单的用户接口，并添加了移动设备支持的特殊事件。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>jQuery Mobile Events</title>
    5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  />
    6. <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    7. <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
    8. <script type="text/javascript">
    9. $( function() {
    10. $('body').bind( 'taphold', function( e ) {
    11. alert( 'You tapped and held!' );
    12. e.stopImmediatePropagation();
    13. return false;
    14. } );
    15. $('body').bind( 'swipe', function( e ) {
    16. alert( 'You swiped!' );
    17. e.stopImmediatePropagation();
    18. return false;
    19. } );
    20. } );
    21. </script>
    22. </head>
    23. <body>
    24. <div data-role="page" id="home">
    25. <div data-role="header">
    26. <h1>jQuery Mobile Events</h1>
    27. </div>
    28. <div data-role="content">
    29. <p>Try:</p>
    30. <ul>
    31. <li>Tapping and holding</li>
    32. <li>Swiping</li>
    33. </ul>
    34. </div>
    35. </div>
    36. </body>
    37. </html>

JQueryMobile开发必须的知道的知识(转)的更多相关文章

  1. JQueryMobile开发必须的知道的知识

    移动Web页面的基本组成元素: 页面头部,页面内容,页面底部 <!DOCTYPE html> <html> <head> <title>My Page& ...

  2. Android开发学习必备的java知识

    Android开发学习必备的java知识本讲内容:对象.标识符.关键字.变量.常量.字面值.基本数据类型.整数.浮点数.布尔型.字符型.赋值.注释 Java作为一门语言,必然有他的语法规则.学习编程语 ...

  3. 移动Web 开发中的一些前端知识收集汇总

    在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...

  4. [Windows驱动开发]（二）基础知识——数据结构

    本节主要介绍驱动开发的一些基础知识. 1. 驱动程序的基本组成 1.1. 最经常见到的数据结构 a. DRIVER_OBJECT驱动对象 // WDK中对驱动对象的定义 // 每个驱动程序都会有一个唯 ...

  5. 【分享】4412开发板-嵌入式Linux开发须要掌握的基础知识和技能

    本文转自迅为电子论坛:http://www.topeetboard.com 1.Linux 基础 安装Linux操作系统 Linux文件系统 Linux经常使用命令 Linux启动过程具体解释 熟悉L ...

  6. 适用于 PHP 开发人员的 Python 基础知识

    Thomas Myer, 负责人, Triple Dog Dare Media 简介: 您是一名经验丰富的 PHP 开发人员,并且希望学习 Python 吗?本文将从 PHP 开发人员的角度来探索 P ...

  7. 开发中常用的es6知识

    结合实际开发,开发中常用的es6的知识: 1.新增let和const命令: ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效: cons ...

  8. 【转】Java开发必须要知道的知识体系

    Java Java是一门超高人气编程语言,拥有跨平台.面向对象.泛型编程等特性.在TIOBE编程语言排行榜中,连续夺得第一宝座,而且国内各大知名互联网公司,后端开发首选语言:非Java莫属.今天只是梳 ...

  9. 软件开发架构、网络基础知识、osi七层模型

    一.软件开发的架构 涉及到两个程序之间通讯的应用大致可以分为两种: 第一种是应用类:qq.微信.网盘.优酷这一类是属于需要安装的桌面应用 第二种是web类:比如百度.知乎.博客园等使用浏览器访问就可以 ...

随机推荐

  1. SVN使用小结

    SVN是Subversion的简称.是一个开放源码的版本号控制系统.在它的管理下,文件和文件夹能够超越时空的限制,权且当作一种奇妙的"时间机器"吧. 基本功能 版本号控制 作为一个 ...

  2. Ubuntu Linux自动发邮件配置及邮件发送脚本

    测试环境:Ubuntu 11.10 1. 安装mutt及msmtp软件 sudo apt-get install mutt sudo apt-get install msmtp 2. 编辑配置文件vi ...

  3. OkHttp 官方Wiki之【使用案例】

    原文位置:https://github.com/square/okhttp/wiki/Recipes Recipes 食谱/知识点清单 We've written some recipes that ...

  4. 【MySQL】MySQL-主从复制-集群方案-数据一致性问题解决方案 && MySQL备份的各种姿势

    1.写性能如何保证:分库分表 2.读性能如何保证:主从结构,实时备份 3.一致性问题怎么解决: 3.1.微博案例:Redis缓存,热数据查询走Redis,主从的延迟通过Redis消除 3.2.支付宝的 ...

  5. linux主机名的修改

    导读 在一个局域网中,每台机器都有一个主机名,便于主机与主机之间的区分,因此为每台机器设置主机名,以容易记忆的方法来相互访问.比如我们在局域网中可以为根据每台机器的功用来为其命名. 查看主机名命令 [ ...

  6. Linux kernel模块管理相关详解

    Linux内核模块化设计 1. Linux内核设计:单内核.模块化(动态装载和卸载) (1) Linux:单内核设计,但充分借鉴了微内核体系的设计的优点:为内核引入了模块化机制:(2) 内核的组成部分 ...

  7. Kettle资源库采用SQLserver数据库需要注意的点

    Kettle开源ETL工具有着自己的元数据存储方式,可以分为两种 1:File 2:DB 文件存储我这里就不多说了,下面说一下在用SQLserver2008 R2作为资源库在创建的过程中遇到的问题 K ...

  8. js 切换隐藏

    先试试 显示\隐藏切换 脚本之家欢迎您 切换隐藏 <style type="text/css"> #thediv { width:200px; height:100px ...

  9. easyui form validate总是返回false原因

    最近做表单验证用了easyui form组件.又一次发现在测试表单都填写正确了但是调试表单的代码监测到调用form的"validate"方法总是返回false 最后查了一下原因在h ...

  10. python使用md5处理下载图片

    import urllib2 import hashlib opener = urllib2.build_opener() req = opener.open("http://avatar. ...