当前位置:  编程技术>WEB前端
本页文章导读:
    ▪弹出 悬浮层, 上传图片控件       A.aspx<script src="/blog_article/js/RestoreImage.js" type="text/javascript"></script><script type="text/javascript"> function show_classify_div() { var iWidth = document.documentElement.clientWidth; var iHeight = document.doc.........
    ▪javaScript设计模式探究【1】      　　　　这段时间，有空没空的看了一下博客园里一个博友-汤姆大叔的深入理解javascript系列，也挺有收获的，因为面试的临近，感觉自己唯一的优势可能就是javascript这一块了，所以就加强加.........
    ▪JQueryEasyUI学习笔记（二）      欢迎大家转载，转载请注明出处！希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！今天说说EasyUI的基本使用以及easyloader的使用：EasyU.........

[1]弹出 悬浮层, 上传图片控件
    来源:    发布时间: 2013-11-15
 A.aspx<script src="/blog_article/js/RestoreImage.js" type="text/javascript"></script>
<script type="text/javascript">

function show_classify_div() {
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
var oShow = document.getElementById('classify_div');
var bgObj = document.createElement("div");
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
bgObj.setAttribute("id", "classify_divbg");
bgObj.style.width = Math.max(document.body.scrollWidth, iWidth) + "px";
bgObj.style.height = document.body.clientHeight + "px";
document.body.appendChild(bgObj);
oShow.style.display = 'block';
oShow.style.left = (iWidth - oShow.clientWidth) / 2 + document.documentElement.scrollLeft + "px";
//oShow.style.top = (iHeight-oShow.clientHeight)/2+scrolltop+"px";

oShow.style.top = Math.max(70, (iHeight - oShow.clientHeight) / 2 + scrolltop) + "px";

var oClose = document.createElement("close_div");
oClose.innerHTML = "<img src='/blog_article/images/close.png' title='关闭'>"; //×
oShow.appendChild(oClose);
oClose.onclick = function () {
oShow.style.display = 'none';
oShow.removeChild(this);
document.body.removeChild(bgObj);
}
btn_Image.onclick = function () {
oShow.style.display = 'none';
oShow.removeChild(this);
document.body.removeChild(bgObj);

}
}
</script> -----------------  <script language="javascript" type="text/javascript">
function showdiv() {
document.getElementById("bg").style.display = "block";
document.getElementById("show").style.display = "block";
}
function hidediv() {
var newimage = $(".jquery-bitmapcutter-newimg")[0].src
document.getElementById("getimage").setAttribute("src", newimage);
document.getElementById("bg").style.display = 'none';
document.getElementById("show").style.display = 'none';
}

function postimagess() {
var newimage = $(".jquery-bitmapcutter-newimg")[0].src
alert(newimage);
var str2 = newimage.charAt(50);
alert(str2);
if (str2 == "=") {
document.getElementById("bg").style.display = "block";
}
}

function postget() {
document.getElementById("bg").style.display = "block";
}


//
var popUpWin = 0;
function PopUpWindow(URLStr, left, top, width, height, newWin, scrollbars) {
if (typeof (newWin) == "undefined")
newWin = false;

if (typeof (left) == "undefined")
left = 100;

if (typeof (top) == "undefined")
top = 0;

if (typeof (width) == "undefined")
width = 800;

if (typeof (height) == "undefined")
height = 760;

if (newWin) {
open(URLStr, '', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=' + scrollbars + ',resizable=yes,copyhistory=yes,width=' + width + ',height=' + height + ',left=' + left + ', top=' + top + ',screenX=' + left + ',screenY=' + top + '');
return;
}

if (typeof (scrollbars) == "undefined") {
scrollbars = 0;
}

if (popUpWin) {
if (!popUpWin.closed) popUpWin.close();
}
popUpWin = open(URLStr, 'popUpWin', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=' + scrollbars + ',resizable=yes,copyhistory=yes,width=' + width + ',height=' + height + ',left=' + left + ', top=' + top + ',screenX=' + left + ',screenY=' + top + '');
popUpWin.focus();
}

</script>
<script src="/blog_article/js/UploadImageJs/zDialog.js" type="text/javascript"></script>

----------

 

<body>
<form id="form1" runat="server">
<%-- ////--%>
<div id="classify_div" >
<div >
<!--当前照片-->
<div id="CurruntPicContainer" runat="server">
<div >
<b>当前照片</b></div>
<div >
<asp:Image ID="imgphoto" runat="server" ImageUrl="~/image/man.GIF" />
</div>
</div>
<!--Step 2-->
<div id="Step2Container" runat="server" visible="false">
<div >
<b>裁切头像照片</b></div>
<div >
您可以拖动照片以裁剪满意的头像</div>
<div id="Canvas" >
<div id="ImageDragContainer">
<asp:Image ID="ImageDrag" runat="server" ImageUrl="~/image/blank.jpg" Css
ToolTip="" />
</div>
<div id="IconContainer">
<asp:Image ID="ImageIcon" runat="server" ImageUrl="~/image/blank.jpg" Css
ToolTip="" />
</div>
</div>
<div >
<table>
<tr>
<td id="Min">
<img alt="缩小" src="/blog_article/image/_c.gif" onmouseover="this.src='image/_c.gif';" onmouseout="this.src='/blog_article/image/_h.gif';"
id="moresmall" />
</td>
<td>
<div id="bar">
<div >
</div>
</div>
</td>
<td id="Max">
<img alt="放大" src="/blog_article/image/c.gif" onmouseover="this.src='image/c.gif';" onmouseout="this.src='/blog_article/image/h.gif';"
id="morebig" />
</td>
</tr>
</table>
</div>

<%-- <input id="btnRes" type="button" onclick="showNew()" value="恢复默认" />--%>
<div >
<asp:Button ID="btn_Image" runat="server" Text="保存头像" OnClick="btn_Image_Click" />
<input id="Button1" type="button" onclick="showNew()" value="恢复默认" />
</div>
<div >
<%-- <div>--%>
图片实际宽度：
<asp:TextBox ID="txt_width" runat="server" Text="1"></asp:TextBox><br />
图片实际高度：
<asp:TextBox ID="txt_height" runat="server" Text="1"></asp:TextBox><br />
距离顶部：
<asp:TextBox ID="txt_top" runat="server" Text="82"></asp:TextBox><br />
距离左边：
<asp:TextBox ID="txt_left" runat="server" Text="73"></asp:TextBox><br />
截取框的宽：
<asp:TextBox ID="txt_DropWidth" runat="server" Text="120"></asp:TextBox><br />
截取框的高：
<asp:TextBox ID="txt_DropHeight" runat="server" Text="120"></asp:TextBox><br />
放大倍数：
<asp:TextBox ID="txt_Zoom" runat="server"></asp:TextBox>
</div>
</div>
</div>
<div >
<!--Step 1-->
<div id="Step1Container">
<div >
<b>更换照片</b></div>
<div id="uploadcontainer">
<div >
请选择新的照片文件，文件需小于2.5MB</div>
<div >
<asp:FileUpload ID="fuPhoto" runat="server" ToolTip="选择照片" /></div>
<div >
<asp:Button ID="btnUpload" runat="server" Text="上 传" OnClick="btnUpload_Click" /></div>
</div>
</div>
</div>
</div>
<%-- /
    
[2]javaScript设计模式探究【1】
    来源:    发布时间: 2013-11-15

　　　　这段时间，有空没空的看了一下博客园里一个博友-汤姆大叔的深入理解javascript系列，也挺有收获的，因为面试的临近，感觉自己唯一的优势可能就是javascript这一块了，所以就加强加强，去图书馆借了一本javascript设计模式，挺薄的一本书，放在书架上挺不显眼的，书架上各种外表光鲜亮丽的javascript书，都看的凌乱了，只是看到设计模式那四个大字，所以就借了来，刚开始只是那么随意的翻了那么一两章，就令我有一种豁然开朗之感，远比书架上那些看似很牛逼的书好的多，现在看书的口味也开始有点叼了，书怎么样，翻一翻就能感受出来。后来一看是图灵程序设计丛书，一时觉得外国人果然牛逼，那个翻译也挺用功的，有些地方斟酌的很仔细，推荐一下《javascript设计模式》---Ross harmes  Dustin Diaz著

         现在也发现个问题，看的书如果不做一些笔记，过了一段时间，就没什么印象了，倒是有点习惯这种一边看书，然后一边总结发博文，跟大家分享一下的做法了。其实要成为javascript大牛这条路挺崎岖的，个人感觉比成为C++/Java这条路更困难，因为由于脚本语言的定位，本身让它去实现非常复杂的逻辑功能就不太现实，即使有，也不是很容易能接触到的，另外由于它的灵活性，所以掌控它就不显得那么简单了，总的来说需要经验，还需要能够给你一个平台。其他语言学起来难道不累吗？也累吧，语言并不能代表什么，要更多的往深层次的东西思考，例如设计模式。当然像我这样的菜鸟，要走的路还有很长很长，加油，一步步来呗。总有爬到高出的时候。

        

//1.javascript里最简单，最常见的完成任务方式
function startAnimation(){
...
}
function stopAnimation(){
...
}

//2.使用prototype

var Anim = function(){
...
};
Anim.prototype.start = function(){
...
}
Anim.prototype.stop = function(){
...
}

//3.将类的定义封装在一条声明中
var Anim = function(){
...
}
Anim.prototype = {
start: fucntion(){
...
} ,
stop: function(){
...
}
};

//4.使用Function.prototype.method用于为类添加新方法
Function.prototype.method = function(name,fn){
this.prototype[name] = fn ;
};
var Anim = function(){
...
};
Anim.method('starrt',function(){
...
});
Anim.method('stop', function(){
...
});

//5.链式调用
Function.prototype.method = function(name,fn){
this.prototype[name] = fn ;
return this;
};
var Anim = function(){
...
};
Anim.method('starrt',function(){
...
}).
method('stop', function(){
...
});

　　　不知道大家看完上面的5例代码有什么感受，反正我觉得挺惊艳的，可能语法什么的我都学过，但是从没有想过可以这么用。尤其是第五种，记得不错的话，JQuery应该大量的用到了这种链式调用的方式。

        1 接口

       在javascript中模仿接口的三种方法：注释法，属性检查法和鸭式辨型法

        1.1 注释法--用注释法最简单，但是效果最差，只是增加了一段注释而已，对性能没有影响，但是没有错误检查。

/*
interface Composite{
function add(child);
function remove(child);
functiongetChild(index);
}
interface FormItem{
function save();
}
*/
var CompositeForm = function(id, method,action){//iimplements Composite, FormItem
...
};
//Implement the Composite interface
CompositeForm.prototype.add = function(child){
...
};
CompositeForm.prototype.remove = function(child){
...
};
CompositeForm.prototype.getChild = function(index){
...
};
//Implement the FormItem interface
COmpositeForm.prototype.save = function(){
...
};

　　　1.2 属性检查模仿接口--所有类都明确地声明自己实现了哪些接口，任何一个要求其啊承诺书属于特定类型的函数都可以对这个属性进行检查，并在所需接口未在声明之列时抛出一个错误，但是这种方法并未确保类真正实现了自称实现的接口。需要一些额外工作，对性能略有影响。

/*
interface Composite{
function add(child);
function remove(child);
functiongetChild(index);
}
interface FormItem{
function save();
}
*/
var CompositeForm = function(id,method,action){
this.implementsInterfaces = ['Composite', 'FormItem'];
...
};

function addForm(formInstance){
if(!implements(formInstance,'Composite','FormItem')){
throw new Error("Object does not implements a required interface:");
}
}
//The implememts function, which checks to see if an object declares that it
//implements the required interfaces.
function implements(object){
for(var i = 1; i<arguments.length;i++){
var interfaceName =
    
[3]JQueryEasyUI学习笔记（二）
    来源:    发布时间: 2013-11-15

欢迎大家转载，转载请注明出处！

希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！

今天说说EasyUI的基本使用以及easyloader的使用：

EasyUI的基本使用

 

1 <head>
2 <title>EasyUI的基本使用</title>
3 <link href="/blog_article/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" />
4 <!--easyui最全的样式包也可单独引用你想使用的样式包-->
5 <link href="/blog_article/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" />
6 <!--easyui自带图片样式包，也可自行添加-->
7 <script src="/blog_article/jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script>
8 <!--我使用的是easyui 1.3.2，基于jquery-1.8.0-->
9 <script src="/blog_article/jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
10 <!--easyui的js包-->
11 <script src="/blog_article/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
12 <!--easyui的中文语言包，默认是英文-->
13 <script type="text/javascript">
14 $(function () {
15 //第二种使用方法：
16 //使用js方式，使用JQuery选择器选择到要操作的div，然后添加各种样式等等
17 $("#dd").dialog({
18 width: 400,
19 height: 200,
20 modal: true,
21 title: "我的第二个Dialog！",
22 iconCls: 'icon-save'//easyui图片样式
23 });
24 });
25 </script>
26 </head>
27 <body>
28 <!--第二种使用方式：-->
29 <div id="dd">
30 我的第一个Dialog。
31 </div>
32 <!--第一种基本使用方式（以Dialog为例）： 直接观看在官网下载的包，里面的Demo，最新的EasyUI都是这种直接在Html标签中进行操作，想使用哪种样式的EasyUI就直接
33 easyui + ‘-’ + 框架名称，data-options中写你要选择的属性，属性在EasyUI的API中讲解的很详细，比如
34
    
最新技术文章:
 




特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3