使用HTML、CSS和JavaScript开发Android程序

按有用程度 按页码先后 最新笔记

• 

  第50页

  令狐葱

  在主屏幕上添加图标 /代码内容已省略/ 图标大小：56px × 56px 或者 60px × 60px 参考(http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#launcherstructure) (更多)

  在主屏幕上添加图标

  <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
  

  图标大小：56px × 56px 或者 60px × 60px

  参考(http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#launcherstructure) (收起)

  2011-10-14 09:59:36   回应

  收藏

  推荐
• 

  第45页

  令狐葱

  编写自己的返回按钮，处理访问历史记录 /代码内容已省略/ leftButton的CSS： /代码内容已省略/ 按钮被点击时，按钮样式改变的方法： 使用CSS设定新的样式，使用jQuery改变按钮的class 代码如下： /代码内容已省略/ /代码内容已省略/ (更多)

  编写自己的返回按钮，处理访问历史记录

  var hist = []; //保存历史记录的全局数组
   var startUrl = 'index.html';
   $(document).ready(function(){
       loadPage(startUrl);
   });
   function loadPage(url) {
      $('body').append('<div id="progress">Loading...</div>'); //正在加载提示
      scrollTo(0,0);
      if (url == startUrl) {
          var element = ' #header ul';
      } else {
          var element = ' #content';
      }
      $('#container').load(url + element, function(){
          var title = $('h2').html() || 'Hello!';
          $('h1').html(title); //将内容中的h2升级为h1作为标题
          $('h2').remove(); 
          $('.leftButton').remove();
          hist.unshift({'url':url, 'title':title}); //链接及标题加入数组
          if (hist.length > 1) { //最后一个为当前页，所以>1
              $('#header').append('<div class="leftButton">'+hist[1].title+'</div>');
              $('#header .leftButton').click(function(){
                  var thisPage = hist.shift(); //从数组中读出值
                  var previousPage = hist.shift();
                  loadPage(previousPage.url);
               });
          }
          $('#container a').click(function(e){
              var url = e.target.href;
              if (url.match(/jonathanstark.com/)) { //只是对本站站内链接处理，正则表达式
                  e.preventDefault(); //阻止默认行为
                  loadPage(url);
              }
          });
          $('#progress').remove();
      });
  }
  

  leftButton的CSS：

  #header div.leftButton {
      font-weight: bold;
      text-align: center;
      line-height: 28px;
      color: white;
      text-shadow: 0px -1px 1px rgba(0,0,0,0.6);
      position: absolute;
      top: 7px;
      left: 6px;
      max-width: 50px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-width: 0 8px 0 14px;
      -webkit-border-image: url(images/back_button.png) 0 8 0 14;
     -webkit-tap-highlight-color: rgba(0,0,0,0); //清除android默认的点击高亮效果
  }
  

  按钮被点击时，按钮样式改变的方法：

  使用CSS设定新的样式，使用jQuery改变按钮的class

  代码如下：

  $('#header .leftButton').click(function(e){
      $(e.target).addClass('clicked');
      var thisPage = hist.shift();
      var previousPage = hist.shift();
      loadPage(lastUrl.url);
  });
  

  #header div.leftButton.clicked {
      -webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;
  }
  

  (收起)

  2011-10-14 09:48:57   回应

  收藏

  推荐
• 

  第41页

  令狐葱

  CSS处理长标题 多余字符以...显示 /代码内容已省略/ 滚到顶部简单jQuery代码 /代码内容已省略/ (更多)

  CSS处理长标题

  多余字符以...显示

  #header h1 {
      color: #222;
      font-size: 20px;
      font-weight: bold;
      margin: 0 auto;
      padding: 10px 0;
      text-align: center;
      text-shadow: 0px 1px 1px #fff;
      max-width: 160px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  

  滚到顶部简单jQuery代码

  scrollTo(0, 0);
  

  (收起)

  2011-10-14 09:41:00   回应

  收藏

  推荐

• 

  第18页

  令狐葱

  第2章 基本样式 准备独立的android样式表 /代码内容已省略/ 控制页面缩放，让移动浏览器知道页面大小 /代码内容已省略/ 添加android视觉效果 1. 给header文字加1px向下白色阴影，背景css渐变 /代码内容已省略/ 2. 导航菜单加上圆角 /代码内容已省略/ (更多)

  第2章 基本样式

  准备独立的android样式表

  <link rel="stylesheet" type="text/css" 
        href="android.css" media="only screen and (max-width: 480px)" />
  <link rel="stylesheet" type="text/css" 
        href="desktop.css" media="screen and (min-width: 481px)" />
  

  控制页面缩放，让移动浏览器知道页面大小

  <meta name="viewport" content="user-scalable=no, width=device-width" />
  

  添加android视觉效果

  1. 给header文字加1px向下白色阴影，背景css渐变

  #header h1 a {
      text-shadow: 0px 1px 1px #fff;
      background-image: -webkit-gradient(linear, left top, left bottom, 
                                         from(#ccc), to(#999));
  }
  

  2. 导航菜单加上圆角

  #header ul li:first-child a {
      -webkit-border-top-left-radius: 8px;
      -webkit-border-top-right-radius: 8px;
  }
  #header ul li:last-child a {
      -webkit-border-bottom-left-radius: 8px;
      -webkit-border-bottom-right-radius: 8px;
  }
  

  (收起)

  2011-10-13 16:00:57   回应

  收藏

  推荐
• 

  第38页

  令狐葱

  第三章 高级样式 模拟真实网络性能 1. Mac OS X：降低网速到4KBps sudo ipfw pipe 1 config bw 4KByte/s sudo ipfw add 100 pipe 1 tcp from any to me 80 You should use your computer’s hostname or external IP address in the URL (for example, mycomputer.local rather than localhost). 测试完成后清除： sudo ipfw delete 100 2. Linux • http://linux-ip.net/articles/Traffic-Control-HOWTO/classles... (更多)

  第三章 高级样式

  模拟真实网络性能

  1. Mac OS X：降低网速到4KBps

  sudo ipfw pipe 1 config bw 4KByte/s

  sudo ipfw add 100 pipe 1 tcp from any to me 80

  You should use your computer’s hostname or external IP address in the URL (for example, mycomputer.local rather than localhost).

  测试完成后清除：

  sudo ipfw delete 100

  2. Linux

  • http://linux-ip.net/articles/Traffic-Control-HOWTO/classless-qdiscs.html • http://lartc.org/howto/lartc.ratelimit.single.html

  3. Windows:

  • http://blogs.msdn.com/b/wndp/archive/2006/06/30/653047.aspx • http://www.netlimiter.com

  4. 在模拟器上使用

  you can configure it to limit its speed using the -netspeed command-line option. For example, invoking the emulator with the arguments -netspeed edge will simulate real-world EDGE network speeds (118.4 kilobits per second upstream, 236.8 kilobits per second downstream). Run emulator -help-netspeed at the command line to see a list of all supported speeds.

  (收起)

  2011-10-14 09:35:45   回应

  收藏

  推荐
• 

  第41页

  令狐葱

  CSS处理长标题 多余字符以...显示 /代码内容已省略/ 滚到顶部简单jQuery代码 /代码内容已省略/ (更多)

  CSS处理长标题

  多余字符以...显示

  #header h1 {
      color: #222;
      font-size: 20px;
      font-weight: bold;
      margin: 0 auto;
      padding: 10px 0;
      text-align: center;
      text-shadow: 0px 1px 1px #fff;
      max-width: 160px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  

  滚到顶部简单jQuery代码

  scrollTo(0, 0);
  

  (收起)

  2011-10-14 09:41:00   回应

  收藏

  推荐

• 

  第50页

  令狐葱

  在主屏幕上添加图标 /代码内容已省略/ 图标大小：56px × 56px 或者 60px × 60px 参考(http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#launcherstructure) (更多)

  在主屏幕上添加图标

  <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
  

  图标大小：56px × 56px 或者 60px × 60px

  参考(http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#launcherstructure) (收起)

  2011-10-14 09:59:36   回应

  收藏

  推荐
• 

  第45页

  令狐葱

  编写自己的返回按钮，处理访问历史记录 /代码内容已省略/ leftButton的CSS： /代码内容已省略/ 按钮被点击时，按钮样式改变的方法： 使用CSS设定新的样式，使用jQuery改变按钮的class 代码如下： /代码内容已省略/ /代码内容已省略/ (更多)

  编写自己的返回按钮，处理访问历史记录

  var hist = []; //保存历史记录的全局数组
   var startUrl = 'index.html';
   $(document).ready(function(){
       loadPage(startUrl);
   });
   function loadPage(url) {
      $('body').append('<div id="progress">Loading...</div>'); //正在加载提示
      scrollTo(0,0);
      if (url == startUrl) {
          var element = ' #header ul';
      } else {
          var element = ' #content';
      }
      $('#container').load(url + element, function(){
          var title = $('h2').html() || 'Hello!';
          $('h1').html(title); //将内容中的h2升级为h1作为标题
          $('h2').remove(); 
          $('.leftButton').remove();
          hist.unshift({'url':url, 'title':title}); //链接及标题加入数组
          if (hist.length > 1) { //最后一个为当前页，所以>1
              $('#header').append('<div class="leftButton">'+hist[1].title+'</div>');
              $('#header .leftButton').click(function(){
                  var thisPage = hist.shift(); //从数组中读出值
                  var previousPage = hist.shift();
                  loadPage(previousPage.url);
               });
          }
          $('#container a').click(function(e){
              var url = e.target.href;
              if (url.match(/jonathanstark.com/)) { //只是对本站站内链接处理，正则表达式
                  e.preventDefault(); //阻止默认行为
                  loadPage(url);
              }
          });
          $('#progress').remove();
      });
  }
  

  leftButton的CSS：

  #header div.leftButton {
      font-weight: bold;
      text-align: center;
      line-height: 28px;
      color: white;
      text-shadow: 0px -1px 1px rgba(0,0,0,0.6);
      position: absolute;
      top: 7px;
      left: 6px;
      max-width: 50px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-width: 0 8px 0 14px;
      -webkit-border-image: url(images/back_button.png) 0 8 0 14;
     -webkit-tap-highlight-color: rgba(0,0,0,0); //清除android默认的点击高亮效果
  }
  

  按钮被点击时，按钮样式改变的方法：

  使用CSS设定新的样式，使用jQuery改变按钮的class

  代码如下：

  $('#header .leftButton').click(function(e){
      $(e.target).addClass('clicked');
      var thisPage = hist.shift();
      var previousPage = hist.shift();
      loadPage(lastUrl.url);
  });
  

  #header div.leftButton.clicked {
      -webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;
  }
  

  (收起)

  2011-10-14 09:48:57   回应

  收藏

  推荐
• 

  第41页

  令狐葱

  CSS处理长标题 多余字符以...显示 /代码内容已省略/ 滚到顶部简单jQuery代码 /代码内容已省略/ (更多)

  CSS处理长标题

  多余字符以...显示

  #header h1 {
      color: #222;
      font-size: 20px;
      font-weight: bold;
      margin: 0 auto;
      padding: 10px 0;
      text-align: center;
      text-shadow: 0px 1px 1px #fff;
      max-width: 160px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  

  滚到顶部简单jQuery代码

  scrollTo(0, 0);
  

  (收起)

  2011-10-14 09:41:00   回应

  收藏

  推荐