发布最近写的jquery.popup插件

最新推荐文章于 2024-03-29 09:43:30 发布

skytalemcc

最新推荐文章于 2024-03-29 09:43:30 发布

阅读量1.6k

点赞数

分类专栏： jQuery 文章标签： stylesheet class tree asp.net jquery input

jQuery 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

由于Asp.Net Mvc 不支持ViewState，也不支持Asp.net Ajax服务器端控件，导致以前写的部门选择控件不能正常使用，搜索jquery的插件也没找到可以使用的插件，所以自己动手写一个jquery.popup插件

完整源代码及示例下载：jquery.popup.rar

下拉框选择控件，该插件需要引用jquery.dimensions插件，结合jquery.treeview可以支持树状结构的下拉框

先看看效果如下：

jquery.popup.js代码如下：

使用方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta name="author" content="Bolik" />

<meta content="Copyright 2006-2008 Bolik" name="copyright" />

<meta name="description" content="WorkItem Tracking System" />

<meta name="keywords" content="wit, WorkItem, WorkItemTracking, Ajax, Web2.0, MVC" />

<%   1: --<meta http-equiv="Pragma" content="no-cache" />--
%>

<meta name="robots" content="none" />

<link charset="utf-8" rel="stylesheet" type="text/css" href="Common.css" />

<link  charset="utf-8" rel="stylesheet" type="text/css" href="jquery.popup.css"/>

<link charset="utf-8" rel="stylesheet" type="text/css" href="jquery.treeview.css" />

<script type="text/javascript" charset="utf-8" src="jquery.js"></script>   1:
   2:   <script type="text/javascript" charset="utf-8" src="jquery.treeview.js">
   1: </script>
   2:   <script type="text/javascript" charset="utf-8" src="jquery.cookie.js">
   1: </script>
   2:   <script type="text/javascript" charset="utf-8" src="jquery.dimensions.js">
   1: </script>
   2:   <script type="text/javascript" charset="utf-8" src="jquery.popup.js">
   1: </script>
   2: </head>
   3: <body>
   4:   <div>
   5:     <input id="popupDemo1" type="text" class="popup" />
   6:     <input id="popupDemo2" type="text" class="popup" />
   7:     <input id="TreeViewPopup" type="text" />
   8:     <script type="text/javascript">
   9:       jQuery(function($){
  10:             $("input.popup").popup('<a href="#" id="demo1">demo1Text</a><br /><a href="#" id="demo2">demo2Text</a>');
  11:             $("input#TreeViewPopup").popup(' <ul class="treeview-popup"><li><a href="#" id="node_100">Europe</a><ul><li><a href="#" id="node_101">Norway</a><ul><li><a href="#" id="node_102">Rogaland</a><ul><li class="tree_sheet.gif"><a href="#" id="node_103">Stavanger</a></li><li class="tree_sheet.gif"><a href="#" id="node_104">Haugesund</a></li></ul></li><li class="tree_sheet.gif"><a href="#" id="node_105">Hordaland</a></li>            <li class="tree_sheet.gif"><a href="#" id="node_106">Oslo</a></li>          </ul>        </li>        <li><a href="#" id="node_107">United Kingdom</a>          <ul>            <li><a href="#" id="node_108">London</a></li>            <li><a href="#" id="node_109">Manchester</a></li>            <li><a href="#" id="node_110">Oxford</a></li>          </ul>        </li>        <li><a href="#" id="node_111">Sweden</a></li>        <li><a href="#" id="node_112">Denmark</a></li>        <li><a href="#" id="node_113">Germany</a></li>      </ul>    </li>    <li><a href="#" id="node_114">Asia</a></li>    <li><a href="#" id="node_115">Africa</a><ul><li><a href="#" id="node_116">Tanzania</a></li><li><a href="#" id="node_117">Kenya</a></li></ul></li><li><a href="#" id="node_118">America</a><ul><li class="tree_sheet.gif"><a href="#" id="node_119">Canada</a></li><li><a href="#" id="node_120">United States</a></li><li class="tree_sheet.gif"><a href="#" id="node_121">Mexico</a></li><li><a href="#" id="node_122">Argentina</a></li></ul></li></ul>');
  12:             $(".treeview-popup").treeview({
  13:             persist: "cookie",
  14:             cookieId: "treeview-popup"
  15:         });
  16:         });
  17:
</script>