Skip to content

Commit

Permalink
增加扩展模型,实现复杂属性管理
Browse files Browse the repository at this point in the history
完善电商属性增删查改
  • Loading branch information
qinggan committed Feb 3, 2018
1 parent 3d76b93 commit 616ae92
Show file tree
Hide file tree
Showing 123 changed files with 4,931 additions and 2,392 deletions.
123 changes: 123 additions & 0 deletions README-CN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
![SelectPageLogo](https://terryz.github.io/image/logo/SelectPage.png)
# SelectPage

> 支持autocomplete、键盘操作、分页、标签多选等多功能的选择器插件

## 插件运行效果预览

*多选Tags模式*

![SelectPage1](https://terryz.github.io/image/SelectPage1.png "SelectPage")

*单选模式*

![SelectPage](https://terryz.github.io/image/SelectPage.png "SelectPage")


## 入门指南、DEMO、文档

*项目GitHub地址:*

[https://github.com/TerryZ/SelectPage](https://github.com/TerryZ/SelectPage)

*插件官方首页(入门指南、DEMO、文档):*

[https://terryz.github.io](https://terryz.github.io)


### 如果您觉得项目还不错,还请给项目( [Github](https://github.com/TerryZ/SelectPage) / [码云](https://gitee.com/TerryZ/selectpage) )加个Star,同时欢迎Follow [Github个人主页](https://github.com/TerryZ)

<br><br><br><br>


## 什么是SelectPage

SelectPage是一个基于jQuery开发的多功能下拉分页选择器,作为一个功能强大的表单控件,它一定会有很多缺点和不足,欢迎您 [提交](https://github.com/TerryZ/SelectPage/issues) 对项目的意见和建议,让我们一起让SelectPage变得更好

### 功能特点


* 基于jQuery、Bootstrap2、3开发

* 也可应用于无任何UI框架的原生HTML环境

* Autocomplete输入自动查找功能

* 结果列表分页展示

* 允许使用静态json数据源或ajax动态请求的数据源

* 使用键盘快速操作基本功能及分页功能

* 多项选择以标签(Tag)形式展现

* 结果列表自动判断屏幕边缘,避免内容超出可视范围

* 丰富的参数设置及功能API调用

浏览器兼容:IE8+、Chrome、Firefox等

插件基于jQuery开发,可在Bootstrap2、3环境下使用,亦可在原生无UI框架的环境下直接使用

## 为什么要有SelectPage

有时候我们需要有一个插件,它可以输入关键字进行快速查找,可以下拉进行选择,可以在展示大量数据时进行分页显示,可以使用键盘进行快速操作,可以适应各种UI环境,可以被灵活定制,而上述的情况就真的出现在现实项目的需求里了

这就是为什么会有SelectPage插件的原因

## 怎么使用SelectPage

[Github](https://github.com/TerryZ/SelectPage)[码云](https://gitee.com/TerryZ/selectpage) 上下载最新版本,解压后并放入需要使用的项目中

### 引用文件

```html
<!-- 基础环境引用说明 -->
<!-- Bootstrap的UI框架基础样式 -->
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<!-- 插件使用了部分font-awesome的图标,所以需要引入该样式 -->
<link rel="stylesheet" href="font-awesome.min.css" type="text/css">
<!-- jQuery,Bootstrap的基础脚本引用 -->
<script type="text/javascript" src="bootstrap.min.js" >< /script>
<script type="text/javascript" src="jquery.min.js" >< /script>
<!-- 插件使用的样式表文件,根据使用环境的Bootstrap版本进行引用 -->
<!-- Bootstrap2使用 -->
<link rel="stylesheet" href="selectpage.css" type="text/css">
<!-- Bootstrap3使用 -->
<link rel="stylesheet" href="selectpage.bootstrap3.css" type="text/css">
<!-- 非Bootstrap生态下引用该样式 -->
<link rel="stylesheet" href="selectpage.base.css" type="text/css">
<!-- 以上的样式文件根据实际使用的环境进行引用,引用其中一项即可 -->
<!-- 插件核心脚本 -->
<script type="text/javascript" src="selectpage.js" >< /script>
```
### HTML页面元素设置
```html
<!-- 设置文本框为插件基本元素 -->
<input type="text" id="selectPage" >
```
### 脚本初始化插件
```js
//定义数组,在服务端返回的数据也以该格式返回:Array[{Object},{...}]
var tag_data = [
{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//初始化插件
$('#selectPage').selectPage({
showField : 'desc',
keyField : 'id',
data : tag_data
});
```
16 changes: 9 additions & 7 deletions css/admin.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("../images/arrow-select.png") no-repeat scroll right center transparent;
background:url("../images/arrow-select.png") no-repeat scroll right center transparent;
padding-right: 14px !important;
}
select::-ms-expand { display: none; }
Expand Down Expand Up @@ -97,8 +97,8 @@ ul.admin_panel li.hover{background-position:0 -93px;}
.list tr.end{background:none}
.list td{cursor:default;max-width:400px;overflow:hidden;word-break:break-all}
.list td.hover{background:#F3F3F3;}
.list tr:hover td{background:#F3F3F3}

.list tr:hover td{background:#2A2A2A;color:#fff;}
.list tr:hover td a{color:#fff;}


.list2{margin:5px 3px 0 0;}
Expand Down Expand Up @@ -672,7 +672,8 @@ ul.list_cate li{float:left;margin:0 5px 5px 0;}
/* ICONS 新版图标 */
.ico,.status0,.status1,.status2
{
background:url('../images/icon.gif') right bottom no-repeat;
background-repeat:no-repeat;
background-position:center center;
width:16px;
height:16px;
overflow:hidden;
Expand All @@ -681,9 +682,10 @@ ul.list_cate li{float:left;margin:0 5px 5px 0;}
}

/* 状态属性 */
.status0{background-position:-16px 0;}
.status1{background-position:0 0;}
.status2{background-position:-64px 0;}
.status0{background-image:url('../images/status0.png');}
.status1{background-image:url('../images/status1.png');}
.status2{background-image:url('../images/status2.png');}


/* 页面 JS 切换涉及到的样式 */
ul.group{border-bottom:1px solid #e1e1e1;padding:0 20px;height:35px;margin-bottom:10px;list-style:none}
Expand Down
62 changes: 47 additions & 15 deletions css/css.php
Original file line number Diff line number Diff line change
@@ -1,25 +1,57 @@
<?php
/***********************************************************
Filename: css/css.php
Note : CSS样式集合器,用于合并多个CSS
Version : 4.0
Web : www.phpok.com
Author : qinggan <[email protected]>
Update : 2013年10月17日
***********************************************************/
/**
* CSS样式集合器,用于合并多个CSS
* @作者 qinggan <[email protected]>
* @版权 深圳市锟铻科技有限公司
* @主页 http://www.phpok.com
* @版本 4.x
* @授权 http://www.phpok.com/lgpl.html 开源授权协议:GNU Lesser General Public License
* @时间 2018年01月20日
**/

error_reporting(E_ALL ^ E_NOTICE);
function_exists("ob_gzhandler") ? ob_start("ob_gzhandler") : ob_start();
header("Content-type: text/css; charset=utf-8");
define("ROOT",str_replace("\\","/",dirname(__FILE__))."/");
$file = $_GET["file"];
if(!$file) $file = "style.css";
$list = explode(",",$file);
foreach($list AS $key=>$value)
{
$type = isset($_GET['type']) ? $_GET['type'] : 'default';
if(!$type || ($type && !in_array($type,array('default','admin','open')))){
$type = 'default';
}

//后台首页涉及到的样式文件
$file = array();

//后台首页
if($type == 'admin'){
$file[] = 'admin-index.css';
$file[] = 'window.css';
$file[] = 'artdialog.css';
$file[] = 'icomoon.css';
}

//后台弹窗口
if($type == 'open'){
$file[] = 'open.css';
$file[] = 'artdialog.css';
$file[] = 'form.css';
$file[] = 'smartmenu.css';
//使用 selectpage 下拉菜单
$file[] = 'selectpage.css';
}

//后台桌面窗口
if($type == 'default'){
$file[] = 'admin.css';
$file[] = 'artdialog.css';
//使用 selectpage 下拉菜单
$file[] = 'selectpage.css';
}
$file = array_unique($file);
foreach($file as $key=>$value){
$value = basename($value);
if(is_file(ROOT.$value) && strtolower(substr($value,-3)) == "css")
{
if(is_file(ROOT.$value)){
echo file_get_contents(ROOT.$value);
echo "\n";
}
}
exit;
26 changes: 22 additions & 4 deletions css/open.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@ a{color:#000;text-decoration: none;}
.w80{width:80px;}
.w90{width:90px;}
.w110{width:110px;}
.w99{width:99%;}
.h33{height:33px;}
.hide{display:none;}
.hidden{display:none;}

td{word-break:break-all;}

.hand{cursor: pointer;}
.clear{clear:both;height:0;line-height:0;overflow:hidden;}
Expand Down Expand Up @@ -45,7 +50,7 @@ input[type=text],input[type=password]{
input.select{margin:0;padding:0;border:1px solid #9FAFBB;height:22px;width:70px;}
select{padding:3px;}
select {
border: solid 1px #acacac;
border: solid 1px #E5E5E5;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
Expand Down Expand Up @@ -117,8 +122,10 @@ table.list{border-collapse:collapse;}
table.list th{padding:0;border-bottom:2px solid #E5E5E5;height:25px;background:#D1D1D1;}
table.list th.lft{text-align:left;}
table.list tr:nth-child(2n+1){background:#F1F1F1}
table.list tr:hover{background:#F9F9F9;}
table.list td{padding:3px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
table.list tr:hover{background:#2A2A2A;color:#fff;}
table.list tr:hover a{color:#fff;}

table.list td{padding:3px;}
table.list td.break{word-wrap:break-word;word-break:break-all;white-space:normal;padding:5px;}
table.list th.id{width:50px;}
table.list tr.on{background:#FFCC99;}
Expand Down Expand Up @@ -302,4 +309,15 @@ div.cate_9{background:#AD78E9;}
.res_preview ul li.picture{text-align:left;}
.res_preview ul li.picture img{max-width:100%;}
.res_preview ul li.video{text-align:center;}
.res_preview ul li:last-child{border-bottom:0;}
.res_preview ul li:last-child{border-bottom:0;}


/*附件选择页*/
ul.filelist{list-style:none;padding:0;margin:0}
ul.filelist li{float:left;margin:3px 5px;height:75px;width:296px;padding:1px;border:1px solid #ccc;cursor:pointer;}
ul.filelist li:hover{background:#efefef;}
ul.filelist li .ico{float:left;width:75px;height:75px;text-align:center;position:relative;z-index: 2;}
ul.filelist li .ico .checkbox{position:absolute;width:20px;height:20px;background:#fff;top:1px;left:1px;z-index:1;}
ul.filelist li .note{float:left;width:220px;overflow:hidden;}
ul.filelist li .note .info{line-height:22px;overflow:hidden;height:22px;}
ul.filelist li img.img{width:73px;height:73px;text-align:center;padding:1px;}
Loading

0 comments on commit 616ae92

Please sign in to comment.