MVC 框架中 实现点击热点浮动框显示详细信息

最新推荐文章于 2022-03-28 22:35:45 发布
最新推荐文章于 2022-03-28 22:35:45 发布
阅读量1k 收藏
点赞数
分类专栏： 个人总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxmzumeng/article/details/8670297
版权

2鼠标移动到热点上，显示详细信息

<html>

<head>

<scripttype="text/javascript">

functionshowOne(id){

var xhr =window.XMLHttpRequest?new XMLHttpRequest():newActiveXObject("Msxm12.XMLHTTP");

         varurl="index.php?c=user&a=showOne";

         xhr.open("post",url,true);//post方式打开地址栏必须传一个头文件

         //true 参数表示是否异步

         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

         xhr.send("brand_id="+id);

         xhr.onreadystatechange =callback;

                   function callback(){

                            //alert(xhr.readyState);

                            if(xhr.readyState ==4){

                                     if(xhr.status== 200){//请求发送成功

                                               //eval()如果想要将字9符串转化成对象，需先将对象运行一下，通过'()'

                                               varjson =eval("("+xhr.responseText+")");

                                               varnew_div =document.createElement('div');

                                               new_div.style.backgroundColor= "yellow";

                                               new_div.id="new_div";

                                               new_div.style.position="absolute";

                                               new_div.style.width="250px";

                                               new_div.style.marginLeft="180px";

                                               new_div.innerHTML="详细信息:<br/>网址："+json.brand_wz+"<br/>简介："+json.brand_intro;

                                               document.getElementById(id).appendChild(new_div);

                                     }

                            }

                    }

}

functiondelOne(id){

         var new_div=document.getElementById("new_div");

         document.getElementById(id).removeChild(new_div);

}

</script>

</head>

<body>

<tablewidth="250px" align="center">

<caption>地图式图层浮动</caption>

<{foreachfrom=$list item="value"}>

<trbgcolor="#ccc">

         <tdid="<{$value.brand_id}>"οnmοuseοver="showOne(<{$value.brand_id}>)"οnmοuseοut="delOne(<{$value.brand_id}>)"><{$value.brand_id}></td>

         <tdid="<{$value.brand_id}>"οnmοuseοver="showOne(<{$value.brand_id}>)"οnmοuseοut="delOne(<{$value.brand_id}>)"><{$value.brand_name}></td>

</tr>

<{/foreach}>

</table>

</body>

</html>

 

//  命令模型层查询数据   视图层显示

         //实现   地图搜索  弹出图层

         public function showDetailAction(){

                   $user_model=newuserModel('localhost','root','','yanhua');

                   $rows=$user_model->getAll();

                   $this->smarty->assign('list',$rows);

                   $this->smarty->display('showDetail.tpl');

         }

         // 获取传递得值  在模型层查询  并返回

         public function showOneAction(){

                   $brand_id=$_REQUEST['brand_id'];

                   $user_model=newuserModel('localhost','root','','yanhua');

                   $rows=$user_model->getOne($brand_id);

                   echo json_encode($rows);

         }

userController.class.php//控制器代码

//  命令模型层查询数据   视图层显示

         //实现   地图搜索  弹出图层

         publicfunction showDetailAction(){

                   $user_model=newuserModel('localhost','root','','yanhua');

                   $rows=$user_model->getAll();

                   $this->smarty->assign('list',$rows);

                   $this->smarty->display('showDetail.tpl');

         }

         //  获取传递得值  在模型层查询  并返回

         publicfunction showOneAction(){

                   $brand_id=$_REQUEST['brand_id'];

                   $user_model=newuserModel('localhost','root','','yanhua');

                   $rows=$user_model->getOne($brand_id);

                   echojson_encode($rows);

         }

 

 

userModel.class.php //模型层查询数据

public function getAll(){

                   $sql= "select * from brand";

                   $res=mysql_query($sql);

                   $rows=array();

                   while($row=mysql_fetch_assoc($res)){

                            $rows[]=$row;

                   }

                   return$rows;

         }

         publicfunction getOne($brand_id){

                   $sql= "select * from brand where brand_id='".$brand_id."'";

                   $res=mysql_query($sql);

                   $row=mysql_fetch_assoc($res);

                   return$row;

         }

xxmzhumeng
关注
专栏目录
html中area有鼠标经过颜色,解决：Map的area属性标签鼠标Hover可以给area加背景
weixin_42146888的博客
06-09 912
css的area标签是不支持hover的，只有a标签才支持。li标签在IE浏览器下才支持，所以采用jquery的mouseenter和mouseleave事件完成。首先讲jQuery对应的事件：1.mouseenter事件当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，...
2021 Java面试真题集锦
热门推荐
GL1765852966的博客
12-26 8万+
目录 … 1 大厂面试的基本流程 17 字节跳动 17 阿里 17 腾讯 18 网易游戏 18 面试前需要准备： 18 面试中可以借鉴的套路 19 用简历争取到更多的面试机会 19 自我介绍时，立即全面抛出技术栈和亮点 20 先介绍项目背景，打消面试官疑问 21 通过说项目管理工具，说明你不仅会写代码 22 用 SPRING BOOT 项目举例，说明你的技术基本面 23 用实例说明你在内存调优方面的经验 24 展示你在数据库调优方面的经验 25 总结前文说辞 26 准备项目说辞时，更可以准备后继面试官的问
MVC-内容详情页显示内容
weixin_34232363的博客
06-23 622
@model InfoDataProvider.DataModel.FAQ_ContentUser 内容Content字段：如果里面有html标签。 @Html.DisplayFor(p => p.Content)：将会对html标签进行编码输出到页面上。 效果：<span style="color:Red">红色<span> @Html.R...
.netMVC实现当前页多个数据修改，按钮点击分类别显示
needkane
03-20 2169
跳转页修改用ParameterMgr到ParameterForm（修改单一传值），当前页修改多个值用ParameterMgr1 #region 参数管理 /// /// 根据类别的PId获取系统参数数据,paraCategory直接url传来 /// /// public ActionResult Parameter
Asp.net MVC 弹窗显示
llhswwha的专栏
08-30 6776
之前用Asp.net MVC自动创建增删改查页面，页面之间是跳转的。现在的网站操作上一般都是显示一个弹窗，在弹窗中操作，然后刷新页面数据的。要想办法修改一下。 搜索资料发现一个合适的：https://www.cnblogs.com/bobo-show/p/4679697.html 按里面的创建项目并测试，不行，没有弹窗的效果，二是页面跳转 研究了一下AjaxOptions，几经尝试也没效果。...
【问题求助】做一个漂浮窗口
web886521的专栏
09-11 720
问： 小弟js学习还没有到位，但是想做一个漂浮窗口，需要高手提供一下代码，放在什么位置说明一下，就是一个可以移动的漂浮窗口，可以上下左右规则飘动的. 尽可能的使用一点 注释，感谢   答： 【传智播客】 王老师 漂浮广告 var x = 50,y = 60 var xin = true,
鼠标滑过列表文字显示图片及详细信息信息信息
weixin_34021089的博客
06-30 360
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CnNorco2010.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o...
web前端和PHP开发面试题
02-20
近年来，前端框架如React、Vue、Angular也成为了面试的热点，掌握一种或多种框架的基本原理和使用方法是非常重要的。 PHP是服务器端脚本语言，主要用于后端开发，与前端进行数据交互。PHP面试中，常见的知识点包括...
Java开发常见专业术语
weixin_42408447的博客
05-10 1万+
1.脚本 脚本（Script），是使用一种特定的描述性语言，依据一定的格式编写的可执行文件。 2.http协议 HTTP协议，即超文本传输协议(Hyper text transfer protocol)。是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。 3.B/S结构和C/S结构 B/S（Browser/Server）：指浏览器和服务器架构。 C/S（Client/Server）：指客户端和服务器架构 4.报文 报文
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 5008
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
mvc下,3种窗口弹出设置的方法
10-27
想做页面美化，特别是在一个页面中，只占了很小一块的页面，想做成弹出窗口样式，稍微总结了下：
jQuery弹出层 可移动层 提示框 浮动层
01-22
注意：那个如果你的模板有CSS文件的话，就要直接引入到本页面就行了，这个简化版不能在别的框架弹出层的，所以也就没有了那个cssurl属性了，也没有target 属性了
悬浮导航栏
qq_33265437的博客
02-04 660
今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果，最终实现的效果如下图： 具体实现步骤如下： 根据我前面的文章所讲的RecyclerView的基本使用，我们先来完成基本的recyclerView： 第一步：布局里写一个RecyclerView 第二步：实例化 recyclerView = (RecyclerView) findView
Asp.net MVC+Bootstrap3的悬浮式登录框效果
weixin_30347335的博客
07-15 379
1.引用Bootstarp3 @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/bootstrap") 2.登陆代码 @using AquaWeb.Models @model LoginViewModel @{ ViewBag.Title = "登录"; } <div...
js跟随鼠标的详细信息
乐居猫
12-15 601
鼠标跟随提示框
阿总阿总自己总结，八戒八戒傻得可爱
xxmzumeng的专栏
03-17 2万+
我分明out了 总是用.doc取代博文。哦哦   需要注意的问题   html：1、map地图的应用                                  coords="0,0,82,126"         alt="菜园子"          href="../../example/html/sun.html">
lua游戏开发中的MVC框架实现与结构详解
在lua开发中实现MVC框架是一个常见的设计模式，它有助于组织代码结构，提高代码的可维护性和重用性。MVC，全称Model-View-Controller，是一种软件设计模式，将应用程序划分为三个核心部分： 1. Model（模型）: 这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值