Menu

类似百度搜索提示效果,使用手册系列



这里是Ajax实际处理界面

Unslider–入门篇

  背景:因工作需求,需要完成一个图片轮播效果,因博主不是专业的前端开发人员,so
google之,经过挑选最终选择使用Unslider插件完成工作。

<%@ WebHandler Language="C#" Class="ProjectCodeHandler" %>

using System;
using System.Web;
using System.Collections.Generic;
using AmpProjectManager.BLL;
using AmpProjectManager.Models;

public class ProjectCodeHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string html = "";
        //在这里,参数获取方式为context.Request.Params["methodType"].ToString()
        switch (context.Request.Params["methodType"].ToString())
        {
            case "code":
                html = CodeHandler(context.Request.Params["code"].ToString());
                break;
            case "user":
                break;
        }
        context.Response.Write(html);
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

    public string CodeHandler(string code)
    {
        List<string> list = ProjectManager.GetProjectByCode(code);//请将此处理解为:向数据库请求和以当前参数开头的所有数据,返回为字符串列表
        string html = "<ul>";
        foreach (string temp in list)
        {
            html = html + "<li>" + temp + "</li>";
        }
        html = html + "</ul>";
        return html;
    }
}

一、Unslider插件介绍

  unslider插件是一个超小的Jquery轮播(slider)插件,大小不到3k,源码托管在GitHub上,是一个开源项目。

Html代码

1、跨浏览器

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>美药星项目管理系统</title>
    <script src="JS/jquery-1.8.0.min.js"></script>
    <script>
        $(document).ready(function () {
            //必须要采用Live方法,因为代码是后来通过别的方法添加入页面的,不能触发预先写好的方法

            //li点击时,将文本框内容改为li的内容
            $("li").live("click", function () {
                $("#txtCode").val($(this).text());
            })
            //hover效果,因为live是不能绑定hover方法的,变相实现
            $("li").live({
                mouseenter: function () {
                    $(this).css("background-color", "#39C0FA");//鼠标移入事件
                },
                mouseleave: function () {
                    $(this).css("background-color", "white");//鼠标移出事件
                }
            });
        });
        //Ajax请求
        function SelectTip() {
            var temp = $("#txtCode").val();
            $.ajax({
                type: "post",//请求方式:post,get
                url: "AJAX/ProjectCodeHandler.ashx",//请求的页面
                data: { code: temp, methodType: "code" },//请求参数
                //请求成功执行的方法,function内参数名随意,不影响
                success: function (result) {
                    //将Div内原有值清空,将新值赋予DIV内
                    $(divShowText).html("");
                    $(divShowText).html(result);
                },
                //请求执行异常执行的方法
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $(divShowText).html("");
                    $(divShowText).html("<lable color='red'>异常,请关闭页面重试,或联系管理员</lable>");
                }
            });
        }

    </script>
    <style>
        li {
            text-decoration: none;
            display: block;
            border: 1px solid #000;
            border-bottom: 0.5px solid #000;
            list-style: none;
            cursor: pointer;
            padding: 0px;
            margin: 0px;
        }

        ul {
            border-bottom: 1px solid #000;
            display: block;
            list-style: none;
            margin: 0px;
            padding: 0px;
        }

        #txtCode {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="txtCode" Width="148px" onkeyup="SelectTip()" runat="server"></asp:TextBox><br />

        <div id="divShowText" style="width: 150px;">
        </div>

    </form>
</body>
</html>

Unslider已经在所有最新的浏览器上测试过了,并能对那些老旧的浏览器也能做出很好的降级处理。(PS:博主亲测,在IE8上使用正常

搞了一天,效果如下,输入任意文字,系统会进数据库搜索,点击所选li,会自动将li内的值填入textBox中。

2、支持键盘导航(没错,你没看错,就是键盘上的左右键,很炫,有木有!!)

图片 1

3、自动调整高度

主要是两点:第一JQ在页面上链接进数据库,这是必须用AJAX的,或者是直接调用页面存在的方法,因为考虑要转MVC,所以我就在这里粘一个链接

4、支持响应式布局(不懂的链接在此,自戳:响应式布局)

  

  说了这么多特色了,看一下效果眼见为实吧,链接:

  看了效果,有没有感觉博主的好多文是copy来的,╮(╯▽╰)╭木办法,博主水平有限,只能边学边做笔记给大家分享了,多多包涵啦。( ̄︶ ̄)↗

二、如何使用Unslider

还有就是asp.net怎么实现ajax,就是.ashx。全称为:一般程序处理文件。

1、引入jQuery和Unslider

  使用Unslider,你需要在页面中引入Unslider和jQuery脚本,jQuery版本不限,建议在版本1.8+(博主亲测使用1.8版本的jQuery.js可正常使用Unslider脚本)。

  如何验证页面已引入jQuery脚本,按F12,在控制台中输入!!window.jQuery,若返回true,则说明页面中已引入jQuery脚本。

 

  引入jQuery、Unslider脚本,页面代码如下:

图片 2

1 <script src="//code.jquery.com/jquery-latest.min.js"></script>
2 <script src="//unslider.com/unslider.js"></script>

结合以上就能实现效果

2、准备HTML代码

  div+ul
li(无序列表),完美解决,无需额外的html标签!为了简洁我们的例子只写三个li,上代码!

 1 <div class="banner">
 2     <ul>
 3         <li style="width:100%;height:50px;background-color:red;">
 4             <h1>This is a slide.</h1>
 5         </li>
 6         <li style="width:100%;height:50px;background-color:yellow;">
 7             <h2>This is another slide.</h2>
 8         </li>
 9         <li style="width:100%;height:50px;background-color:blue;">
10             <h3>This is a final slide.</h3>
11         </li>
12      </ul>
13 </div>  

  PS:css样式以及h1、h2、h3标签的使用,只是为了能更好的展现出页面切换的效果,不必深究。

版权声明:本文为博主原创文章,未经博主允许不得转载。

3、增加Css样式,使页面效果更漂亮

  Unslider插件没有提供一个标准的CSS样式,你可以尽情操作每张幻灯片(每个li标签内存放一张幻灯片)的Css样式,自由度之大可以想象。

 1 .banner { 
 2     position: relative; 
 3     overflow: auto; 
 4 }
 5 .banner li {
 6      list-style: none; 
 7 }
 8 .banner ul li {
 9      float: left; 
10 }

4、使用unslider插件

 $(function() {
    var slidey = $('.banner').unslider({
        speed: 500,               
    delay: 3000,            
    complete: function() {}, 
    keys: true,             
    dots: true,              
    fluid: false
});
  data = slidey.data('unslider'); 
  data.move(2, function() {}); 
});  

 相信到此时,你已经能够看到一个简易版的图片轮播效果已经做完了,不过,这只完成了自动播放效果。在之后的文章中我会更深一步的去讲解如何使用Unslider去完成一个更绚丽的图片轮播效果,敬请期待!

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图