促生了各种各样的移动Web框架,1.trigger() 触发事

2019-07-14 作者:小鱼儿主页高手论坛   |   浏览(92)

相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果。

本文实例讲述了jQuery中 trigger()与bind()用法。分享给大家供大家参考,具体如下:

移动互联网的发展,促生了各种各样的移动Web框架。jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏移动设备的 Javascript 库,与 HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的 Web App,而且不需要安装任何东西,只需将需要的 *.js 和 *.css 文件直接包含到 web 页面中即可。

小鱼儿主页高手论坛,相信大家空闲的时候都会上上微博,推特等社交网站,每次我登陆微博时,我都会留意一下它有什么变化,小的有一些布局的变化,大的有API接口的改变等。

在接下来的文章中,我们将向大家介绍通过jQuery实现放大镜效果。

trigger(type)

下拉菜单:

在首页登陆微博时,我们可以看到一栏“大家正在说”,它滚动显示着当前每个人发送的微博;刚看到这个效果觉得挺有趣的,所以我们将在接下来的文中介绍实现滚动显示微博信息的效果。

1、实现原理
首先,我们讲解一下放大镜效果的实现方式:

在每一个匹配的元素上触发某类事件。

   设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain.

我们细细观察了微博的“大家正在说”,它是通过由上往下滚动来实现不断显示微博的,而且每一天新微博都是通过淡入效果显示的。

方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置。

返回值:jQuery

   <div data-role="controlgroup">
    <label for="select" class="select">请选择你的兴趣</label>
    <select name="select" id="select">
      <option>音乐</option>
      <option>电影</option>
      <option>体育</option>
      <option>旅游</option>
    </select>
   </div>

小鱼儿主页高手论坛 1

方法二:对原图片进行放大,也就是调整原图的长和宽。

参数:

分组的选择菜单

图1 微博“大家正在说”

上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到我们的jQuery插件中。

type (String): 要触发的事件类型

   要在select 元素制定optgroup。  

1、定义微博插件
接下来,我们将定义一个插件用来获取某话题下的微博,这里我们将使用jQuery的扩建功能来定于一个微博的jQuery插件

首先,我们需要一个img元素显示原图对象,还需要一个容器作为显示框;显示框里面存放大图对象。当鼠标移动到原图上时,通过对大图进行绝对定位来显示对应的部位,实现类似放大镜的效果。

示例:

<div data-role="controlgroup">
      <label for="select">请选择你的兴趣:</label>
      <select name="select" id="select" data-native-menu="true">
        <optgroup label="娱乐类"/>
        <option>音乐</option>
        <option>电影</option>
        <optgroup label="文体累"/>
        <option>体育</option>
        <option>旅游</option>
      </select>
     </div>

由于jQuery提供了一种机制:让用户给核心模块增加自定义的方法和额外的功能;通过这种机制,jQuery允许我们创建自定义的插件封装常用的方法,从而提高我们的开发效率。

接下来,让我们定义Index.html页面,具体实现如下:

复制代码 代码如下:

禁用指定Option 数据项的选择菜单

首先,我们通过定义自执行的函数(IIFE),然后把jQuery对象作为参数传递给该自执行函数,通过建立“$”和jQuery的对应关系,这样“$”就不会在其执行范围内被其他库覆盖了。

<!doctype html>
<html lang="en-US">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>jQuery Image Zoom Demo</title>
 <meta name="author" content="Jackson Huang">
</head>
<body>
<div class="magnify">
<div class="large"></div>
<img class="small" src="./img/1.jpg" width="700" />
</div>
</body>
</html>

$("p").trigger("click")

    <div data-role="controlgroup">
      <label for="select">请选择你的兴趣:</label>
      <select name="select" id="select" data-native-menu="true">
        <optgroup label="娱乐类"/>
        <option disabled="">音乐</option>
        <option>电影</option>
        <optgroup label="文体累"/>
        <option>体育</option>
        <option>旅游</option>
      </select>
   </div>
// Defines a jquery plugin.
; (function($) {
  $.fn.weiboSearch = function() {
    // your plugin logic
  };
})(jQuery);

上面,我们定义了small对象用于显示原图,而large对象作为一个显示框用来显示大图的对应位置。

1.trigger() 触发事件

普通连接列表  

上面,我们定义一个自执行函数(IIFE),并且在它里面定义了一个扩展方法weiboSearch()。

2、mousemove事件 接下来,我们通过jQuery插件形式来实现放大镜效果,当鼠标移动到small对象上方时,就会在large对象中显示大图的对应位置,这就涉及到mousemove事件了,所以,我们需要实现mousemove事件的监听方法(如何定义jQuery插件可以参考《自定义jQuery插件Step by Step》)。

这个方法是jQuery 1.3中新增的一个引起触发事件的函数。
这里的事件就如jQuery的帮助文档中的事件那一栏,如:click, mouseover, keydown 等有动作的js事件,而像show, hide这是效果不是事件。

<div data-role="page">
      <header data-role="header">
        <h1>列表例</h1>
      </header>
      <div data-role="content">
        <ul data-role="listview" data-theme="g">
          <li><a href="#">List 1</a></li>
          <li><a href="#">List 2</a></li>
          <li><a href="#">List 3</a></li>
          <li><a href="#">List 4</a></li>
        </ul>
      </div>
   </div>

由于,微博API 2.0提供了一个接口search/topics来搜索某一话题下的微博,如果请求成功则返回JSON格式的数据。

现在,让我们实现jquery.imagezoom.js插件吧!

2.为什么要用 trigger() ?

多层次嵌套列表。

小鱼儿主页高手论坛 2

;
(function ($) {

 $.fn.imageZoom = function (options) {

 // The native width and height of the image.
 var native_width = 0,
  native_height = 0,
  current_width = 0,
  current_height = 0,
  $small = $(".small"),
  $large = $(".large");

 $(".magnify").mousemove(function (e) {
  /* Act on the event */
  if (!native_width && !native_height) {
   var image_object = new Image();
   image_object.src = $small.attr('src');

   // Gets the image native height and width.
   native_height = image_object.height;
   native_width = image_object.width;

   // Gets the image current height and width.
   current_height = $small.height();
   current_width = $small.width();

  } else {

   // Gets .maginfy offset coordinates.
   var magnify_offset = $(this).offset(),

    // Gets coordinates within .maginfy.
    mx = e.pageX - magnify_offset.left,
    my = e.pageY - magnify_offset.top;

   // Checks the mouse within .maginfy or not.
   if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
    $large.fadeIn(100);
   } else {
    $large.fadeOut(100);
   } if ($large.is(":visible")) {
    /* Gets the large image coordinate by ratio 
     small.x / small.width = large.x / large.width
     small.y / small.height = large.y / large.height
     then we need to keep pointer in the centre, 
     so deduct the half of .large width and height.
    */
    var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1,
     ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1,
     bgp = rx   "px "   ry   "px",
     px = mx - $large.width() / 2,
     py = my - $large.height() / 2;
    $large.css({
     left: px,
     top: py,
     backgroundPosition: bgp
    });
   }

  }
 });
});

相信刚开始接触大家也都有这样的想法?

   

图2微博搜索接口参数

上面,我实现了mousemove事件的监听方法,当鼠标移动到magnify对象中,我们需要获取当前鼠标的相对坐标位置,下面我们通过图片讲解如何获取鼠标的相对坐标位置。

比如前台页面里有:<p id="p1">请点击这里!</p>
你希望加载页面时就执行这个事件给这个这p绑定了click事件(将下面的代码写在$(function(){});里面):

<div data-role="page">
    <header data-role="header">
      <h1>列表例</h1>
    </header>
    <div data-role="content">
      <ul data-role="listview" data-theme="g">
        <li>
          <a href="#" data-add-back-btn="true">List 1</a>
          <p >这是第一层</p>
          <ul>
            <li>
              <a>subList 1 of 1</a>
              <a>subList 1 of 2</a>
              <a>subList 1 of 3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" data-add-back-btn="true">List 2</a>
          <p >这是第二层</p>
          <ul>
            <li>
              <a>subList 2 of 1</a>
              <a>subList 2 of 2</a>
              <a>subList 2 of 3</a>
            </li>
          </ul>
        </li>
      <li>
        <a href="#" data-add-back-btn="true">List 3</a>
        <p >这是第三层</p>
        <ul>
          <li>
            <a>subList 3 of 1</a>
            <a>subList 3 of 2</a>
            <a>subList 3 of 3</a>
          </li>
        </ul>
    </li>
  </ul>
  </div>
   </div>

通过上图,我们知道微博搜索接口需要提供应用的AppKey(非OAuth授权方式)和话题关键字(q)。

3、相对坐标

$("#p1").click(function(){
  alert("hello!");
});

以上内容是小编给大家分享的jQuery mobile 移动web(4)的相关知识,希望大家喜欢。

接下来,我们定义了一个字面量对象defaults,它包含微博接口的url、应用的AppKey、话题关键字(q)和单页返回的记录条数(count)等属性,具体定义如下:

小鱼儿主页高手论坛 3

如果用trigger(),你就要写成这样:

您可能感兴趣的文章:

  • Android实现横竖屏切换的实例代码
  • 解决Android手机屏幕横竖屏切换
  • 更靠谱的H5横竖屏检测方法(js代码)
  • JS检测移动端横竖屏的代码
  • javascript检测移动设备横竖屏
  • 使用jQuery Mobile框架开发移动端Web App的入门教程
  • jQuery mobile 移动web(6)
  • Mobile Web开发基础之四--处理手机设备的横竖屏问题
// Defines weibo defaults type.
$.fn.weiboSearch.defaults = {
  url: 'https://api.weibo.com/2/search/topics.json?q=',
  appKey: '5786724301',
  numWeibo: 15,
  term: ''
};

图1鼠标相对坐标位置

$("#p1").click(function(){
  alert("hello!");
}).trigger(click);

2、发送跨源请求
我们可以通过发送ajax请求方式来调用微博搜索接口,如果请求成功服务器会给程序返回JSON格式数据,那么我们需要把返回的数据呈现到页面中。

当鼠标移动到magnify对象中,我们需要获取鼠标在magnify中的相对坐标位置,这里我们把相对坐标定义为(mx,my),通过上图我们知道相对坐标等于(pageX

这样写不是更加麻烦了吗?可以这么说,但是用trigger()最大的好处就是它是可以传递参数进去的。例如:

 $.getJSONP = function(s) {

  // Due to cross origin request, so we to use jsonp format.
  s.dataType = "jsonp";
  $.ajax(s);

  // figure out what the callback fn is
  var $script = $(document.getElementsByTagName('head')[0].firstChild);
  var url = $script.attr('src') || '';

  // Gets callback function
  var cb = (url.match(/callback=(w )/) || [])[1];

  if (!cb)
    return; // bail
  var t = 0, cbFn = window[cb];

  $script[0].onerror = function(e) {
    $script.remove();
    handleError(s, {}, "error", e);
    clearTimeout(t);
  };

  if (!s.timeout)
    return;

  window[cb] = function(json) {
    clearTimeout(t);
    cbFn(json);
    cbFn = null;
  };

  // Gets time out function flag.
  t = setTimeout(function() {
    $script.remove();
    handleError(s, {}, "timeout");
    if (cbFn)
      window[cb] = function() {
      };
  }, s.timeout);

  /**
  * Fix issue: "jQuery.handleError is not a function"
  */
  function handleError(s, xhr, msg, e) {
    s.error && s.error.call(s.context, xhr, msg, e);
    s.global && $.event.trigger("ajaxError", [xhr, s, e || msg]);
    s.complete && s.complete.call(s.context, xhr, e || msg);
  }
};

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:促生了各种各样的移动Web框架,1.trigger() 触发事

关键词: 小鱼儿玄机30码