Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

* finish task #2243:change search drop menu UI.

Browse Source
This commit is contained in:
Catouse
2015-05-07 15:27:21 +08:00
parent 4f8eb1d30e
commit cd464d2a0f
10 changed files with 124 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/product/lang/en.php
+1 -1
View File
@@ -24,7 +24,7 @@ $lang->product->close = "Close";
$lang->product->select = '--select product--';
$lang->product->mine = 'I charge : ';
$lang->product->other = 'Other : ';
$lang->product->closed = 'Closed»';
$lang->product->closed = 'Closed';
$lang->product->basicInfo = 'Basic info';
$lang->product->otherInfo = 'Other info';
module/product/lang/zh-cn.php
+1 -1
View File
@@ -24,7 +24,7 @@ $lang->product->close = "关闭";
$lang->product->select = '--请选择产品--';
$lang->product->mine = '我负责：';
$lang->product->other = '其他：';
$lang->product->closed = '已关闭»';
$lang->product->closed = '已关闭';
$lang->product->basicInfo = '基本信息';
$lang->product->otherInfo = '其他信息';
module/product/model.php
+1 -1
View File
@@ -63,7 +63,7 @@ class productModel extends model
setCookie("lastProduct", $productID, $this->config->cookieLife, $this->config->webRoot);
$currentProduct = $this->getById($productID);
$output = "<a id='currentItem' href=\"javascript:showDropMenu('product', '$productID', '$currentModule', '$currentMethod', '$extra')\">{$currentProduct->name} <span class='icon-caret-down'></span></a><div id='dropMenu'></div>";
$output = "<a id='currentItem' href=\"javascript:showDropMenu('product', '$productID', '$currentModule', '$currentMethod', '$extra')\">{$currentProduct->name} <span class='icon-caret-down'></span></a><div id='dropMenu'><i class='icon icon-spin icon-spinner'></i></div>";
return $output;
}
module/product/view/ajaxgetdropmenu.html.php
+7 -19
View File
@@ -3,22 +3,8 @@
<?php js::set('method', $method);?>
<?php js::set('extra', $extra);?>
<input type='text' class='form-control' id='search' value='' placeholder='<?php echo $this->app->loadLang('search')->search->common;?>'/>
<script>
var existsVal = '';
$('#dropMenu #search').bind('keyup', function(evt)
{
var k = evt.keyCode;
var value = $(this).val();
// backspace and delete.
if((k === 8 || k === 46) && existsVal == '') return;
if((k !== 8 && k !== 46) && existsVal == value) return;
existsVal = value;
searchItems($(this).val(), "product", productID, module, method, extra)
});
</script>
<div id='searchResult'>
<div id='defaultMenu'>
<div id='defaultMenu' class='search-list'>
<ul>
<?php
$iCharges = 0;
@@ -52,10 +38,12 @@ $('#dropMenu #search').bind('keyup', function(evt)
?>
</ul>
<?php if($closeds):?>
<div class='text-right actions'><a id='more' href='javascript:switchMore()'><?php echo $lang->product->closed;?></a></div>
<?php endif;?>
<div>
<?php echo html::a($this->createLink('product', 'index', "locate=no&productID=$productID"), "<i class='icon-cubes mgr-5px'></i> " . $lang->product->allProduct)?>
<?php if($closeds):?>
<div class='pull-right actions'><a id='more' href='javascript:switchMore()'><?php echo $lang->product->closed;?> <i class='icon-angle-right'></i></a></div>
<?php endif;?>
</div>
</div>
<div id='moreMenu'>
module/product/view/ajaxgetmatcheditems.html.php
+11 -9
View File
@@ -1,9 +1,11 @@
<?php if(!$products) echo sprintf($lang->product->noMatched, $keywords);?>
<ul>
<?php
foreach($products as $product)
{
echo "<li>" . html::a(sprintf($link, $product->id), "<i class='icon-cube'></i> " . $product->name, '', "class='$product->status'"). "</li>";
}
?>
</ul>
<div class='search-list'>
<ul>
<?php if(!$products) echo "<li class='no-result-tip'>" . sprintf($lang->product->noMatched, $keywords) . '</li>';?>
<?php
foreach($products as $product)
{
echo "<li>" . html::a(sprintf($link, $product->id), "<i class='icon-cube'></i> " . $product->name, '', "class='$product->status'"). "</li>";
}
?>
</ul>
</div>
module/project/model.php
+1 -1
View File
@@ -120,7 +120,7 @@ class projectModel extends model
setCookie("lastProject", $projectID, $this->config->cookieLife, $this->config->webRoot);
$currentProject = $this->getById($projectID);
$output = "<a id='currentItem' href=\"javascript:showDropMenu('project', '$projectID', '$currentModule', '$currentMethod', '$extra')\">{$currentProject->name} <span class='icon-caret-down'></span></a><div id='dropMenu'></div>";
$output = "<a id='currentItem' href=\"javascript:showDropMenu('project', '$projectID', '$currentModule', '$currentMethod', '$extra')\">{$currentProject->name} <span class='icon-caret-down'></span></a><div id='dropMenu'><i class='icon icon-spin icon-spinner'></i></div>";
return $output;
}
module/project/view/ajaxgetdropmenu.html.php
+1 -14
View File
@@ -3,22 +3,9 @@
<?php js::set('method', $method);?>
<?php js::set('extra', $extra);?>
<input type='text' class='form-control' id='search' value='' placeholder='<?php echo $this->app->loadLang('search')->search->common;?>'/>
<script>
var existsVal = '';
$('#dropMenu #search').bind('keyup', function(evt)
{
var k = evt.keyCode;
var value = $(this).val();
// backspace and delete.
if((k === 8 || k === 46) && existsVal == '') return;
if((k !== 8 && k !== 46) && existsVal == value) return;
existsVal = value;
searchItems(value, "project", projectID, module, method, extra);
});
</script>
<div id='searchResult'>
<div id='defaultMenu'>
<div id='defaultMenu' class='search-list'>
<ul>
<?php
$iCharges = 0;
module/project/view/ajaxgetmatcheditems.html.php
+11 -9
View File
@@ -1,9 +1,11 @@
<?php if(!$projects) echo sprintf($lang->project->noMatched, $keywords);?>
<ul>
<?php
foreach($projects as $project)
{
echo "<li>" . html::a(sprintf($link, $project->id), "<i class='icon-cube'></i> " . $project->name, '', "class='$project->status'"). "</li>";
}
?>
</ul>
<div class='search-list'>
<ul>
<?php if(!$projects) echo "<li class='no-result-tip'>" . sprintf($lang->project->noMatched, $keywords) . '</li>';?>
<?php
foreach($projects as $project)
{
echo "<li>" . html::a(sprintf($link, $project->id), "<i class='icon-cube'></i> " . $project->name, '', "class='$project->status'"). "</li>";
}
?>
</ul>
</div>
www/js/my.full.js
+76 -4
View File
@@ -96,13 +96,77 @@ function showDropMenu(objectType, objectID, module, method, extra)
var li = $('#currentItem').closest('li');
if(li.hasClass('show')) {li.removeClass('show'); return;}
var $dropMenu = $('#dropMenu');
if(!li.data('showagain'))
{
li.data('showagain', true);
$(document).click(function() {li.removeClass('show');});
$('#dropMenu, #currentItem').click(function(e){e.stopPropagation();});
li.click(function(e){e.stopPropagation();});
$dropMenu.on('keydown', '#search', function(e){
var code = e.which;
var $this = $('#searchResult > .search-list > ul > li.active');
if(code === 38) // up
{
$this.removeClass('active');
if($this.length)
{
var $prev = $this.prev('li');
while($prev.length && $prev.hasClass('heading'))
{
$prev = $prev.prev('li');
}
if($prev.length)
{
$prev.addClass('active');
return;
}
}
$('#searchResult > .search-list > ul > li:not(.heading):last').addClass('active');
}
else if(code === 40) // down
{
$this.removeClass('active');
if($this.length)
{
var $next = $this.next('li');
while($next.length && $next.hasClass('heading'))
{
$next = $next.next('li');
}
if($next.length)
{
$next.addClass('active');
return;
}
}
$('#searchResult > .search-list > ul > li:not(.heading):first').addClass('active');
}
else if(code === 13) // enter
{
if($this.length) window.location.href = $this.children('a').attr('href');
}
}).on('change keyup paste input propertychange', '#search', function(){
var $search = $(this);
var searchKey = $search.val();
if(searchKey === $dropMenu.data('lastSearchKey')) return;
clearTimeout($dropMenu.data('lastSearch'));
$dropMenu.data('lastSearch', setTimeout(function()
{
$dropMenu.data('lastSearchKey', searchKey);
searchItems(searchKey, objectType, objectID, module, method, extra);
}, 200));
}).on('mouseenter', '#searchResult .search-list > ul > li', function(){
$('#searchResult > .search-list > ul > li.active').removeClass('active');
$(this).addClass('active');
});
}
$.get(createLink(objectType, 'ajaxGetDropMenu', "objectID=" + objectID + "&module=" + module + "&method=" + method + "&extra=" + extra), function(data){ $('#dropMenu').html(data).find('#search').focus();});
$.get(createLink(objectType, 'ajaxGetDropMenu', "objectID=" + objectID + "&module=" + module + "&method=" + method + "&extra=" + extra), function(data)
{
$dropMenu.html(data).find('#search').focus();
$('#searchResult > .search-list > ul > li:not(.heading)').removeClass('active').first().addClass('active');
});
li.addClass('show');
}
@@ -120,7 +184,12 @@ function showDropMenu(objectType, objectID, module, method, extra)
*/
function showDropResult(objectType, objectID, module, method, extra)
{
$.get(createLink(objectType, 'ajaxGetDropMenu', "objectID=" + objectID + "&module=" + module + "&method=" + method + "&extra=" + extra), function(data){ $('#dropMenu').html(data); setTimeout(function(){$("#dropMenu #search").focus();}, 300);});
$.get(createLink(objectType, 'ajaxGetDropMenu', "objectID=" + objectID + "&module=" + module + "&method=" + method + "&extra=" + extra), function(data)
{
$('#dropMenu').html(data);
setTimeout(function(){$("#dropMenu #search").focus();}, 200);
$('#searchResult > .search-list > ul > li:not(.heading)').removeClass('active').first().addClass('active');
});
}
/**
@@ -145,7 +214,10 @@ function searchItems(keywords, objectType, objectID, module, method, extra)
else
{
keywords = encodeURI(keywords);
if(keywords != '-') $.get(createLink(objectType, 'ajaxGetMatchedItems', "keywords=" + keywords + "&module=" + module + "&method=" + method + "&extra=" + extra), function(data){$('#searchResult').html(data);});
if(keywords != '-') $.get(createLink(objectType, 'ajaxGetMatchedItems', "keywords=" + keywords + "&module=" + module + "&method=" + method + "&extra=" + extra), function(data)
{
$('#searchResult').html(data).find('.search-list > ul > li:not(.heading)').removeClass('active').first().addClass('active');
});
}
}
www/theme/default/style.css
+14 -10
View File
@@ -382,27 +382,31 @@ body {font-size: 13px; color:#141414;padding-bottom: 40px;}
/* Drop menu. */
#dropMenu {background: #fff; position:absolute; display:none; font-size:12px; z-index:9999; -moz-box-shadow: 0 6px 12px rgba(0,0,0,0.175); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);border: 1px solid #CBCBCB; border: 1px solid rgba(0, 0, 0, 0.15); top: 36px; border-top: none; min-width: 250px; min-width: 218px\0; padding: 10px 15px;}
#dropMenu > .icon-spin {display: block; text-align: center; padding: 10px;}
#currentItem {border: 1px solid transparent; padding: 1px 6px;}
.show > #dropMenu {display: block;}
.show > #currentItem, .show > #currentItem:hover, #modulemenu .nav > li > .dropdown.open > a {background: #fff; border: 1px solid #CBCBCB; -moz-box-shadow: 0 6px 12px rgba(0,0,0,0.175); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);}
#search {padding: 2px 8px; height: 28px}
#searchResult {display: table; line-height: 20px; color: #808080}
#defaultMenu, #moreMenu {display: table-cell; vertical-align: top; min-width: 218px}
#searchResult > .search-list, #defaultMenu, #moreMenu {display: table-cell; vertical-align: top; min-width: 218px}
#moreMenu {display: none;}
#searchResult.show-more #moreMenu {display: table-cell;}
#defaultMenu > ul, #moreMenu > ul {display: block; position: relative; padding: 0; margin: 10px -15px 0 -15px; max-height: 360px; overflow-x: hidden; overflow-y: auto}
#searchResult ul {display: block; position: relative; padding: 0; margin: 10px -15px 0 -15px; max-height: 360px; overflow-x: hidden; overflow-y: auto}
#moreMenu > ul {margin-left: 15px;}
#defaultMenu > ul > li:first-child, #moreMenu > ul > li:first-child, #searchResult > ul > li:first-child {border-top: 1px dashed #ddd}
#defaultMenu > ul > li, #moreMenu > ul > li,#searchResult > ul > li {display: block; float: none; padding: 2px 15px; border-bottom: 1px dashed #ddd;}
#defaultMenu > ul > li:hover, #defaultMenu > .actions > a:hover, #moreMenu > ul > li:hover, #searchResult > ul > li:hover {background: #f1f1f1}
#defaultMenu > ul > li > a, #moreMenu > ul > li > a, #searchResult > ul > li > a {line-height: 24px; display: block;}
#searchResult ul > li:first-child {border-top: 1px dashed #ddd}
#searchResult ul > li:last-child {border-bottom: 1px dashed #ddd}
#searchResult ul > li {display: block; float: none; padding: 2px 15px;}
#searchResult ul > li:hover, #searchResult ul > li.active {background: #e5e5e5}
#searchResult ul > li > a {line-height: 24px; display: block;}
#searchResult ul > li.active:before {}
#moreMenu > ul > li > a {color: #808080}
#defaultMenu > ul > li > a:hover, #moreMenu > ul > li > a:hover, #searchResult > ul > li > a:hover, #defaultMenu > ul > li.heading:hover {background: none}
#searchResult ul > li > a:hover, #defaultMenu > ul > li.heading:hover, #searchResult li.no-result-tip:hover {background: none}
#searchResult li.no-result-tip {border: none!important;}
#defaultMenu > .actions > a {display: block; text-align: right; margin: 0 -15px; padding-right: 15px; line-height: 30px}
#searchResult.show-more #defaultMenu > ul > li, #defaultMenu > .actions > a {border-right: 1px solid #ddd}
#defaultMenu > .actions > a > i, #defaultMenu > ul > li > a > i, #moreMenu > ul > li > a > i {font-size: 14px; display: inline-block; margin-right: 5px;}
#searchResult > ul {display: block; position: relative; padding: 0; min-width: 218px}
#searchResult > ul > li > a.closed, #searchResult > ul > li > a.done{color:#808080}
#defaultMenu > .actions > a > i, #searchResult ul > li > a > i {font-size: 14px; display: inline-block; margin-right: 5px;}
/*#searchResult > ul {display: block; position: relative; padding: 0; min-width: 218px}*/
#searchResult ul > li > a.closed, #searchResult ul > li > a.done{color:#808080}
#defaultMenu > div {padding-top: 6px;}