Js控制css样式(展开收起为例)

1.JQUERY控制CSS样式:

页面部分:指定ID,指定触发事件

<div id=”img1″ style=”width:500px;float:left;” class=”infonav infonav_hidden”>

              <p>文章标题</p>

              <p>1.文章标题一。</p>

              <p>2.文章标题二。</p>

              <p>3.文章标题三。</p>

 </div>

<div id=”img2″ style=”width:100px;float:left;padding-top:36px;”>

<a  border=”0″ style=”border:none;” href=”javascript:” onclick=”infonav_more_down(0);return false;”><img src=”list1.png”></a>

 </div>

jquery部分:

<script type=”text/javascript” src=”jquery-1.4.min.js” charset=”UTF-8″></script>

<script type=”text/javascript” charset=”UTF-8″>

//点击效果实现展开

function infonav_more_down(index)

{

var inHeight = ($(“#img1”).eq(index).find(“p”).length)*100;//设置要展开后显示的高度,100是可调数字。

if(inHeight > 65)

{

$(“#img1”).eq(index).css({height:inHeight});

$(“#img2”).eq(index).replaceWith(“<div id=”img2″ style=”width:100px;float:left;padding-top:360px;”><a onclick=”infonav_more_up(” index “);return false;” href=”javascript:”><img src=”list2.png”></a></div>”);

}

else

{

return false;

}

}

//点击效果实现收起

function infonav_more_up(index)

{

var infonav_height = 65;//设置要收起后显示的高度,15是可调数字。

$(“#img1”).eq(index).css({height:infonav_height});

$(“#img2”).eq(index).replaceWith(“<div id=”img2″ style=”width:100px;float:left;padding-top:36px;”><a onclick=”infonav_more_down(” index “);return false;” href=”javascript:”><img src=”list1.png”></a></div>”);

}

</script>

//===

addClass() 方法向被选元素添加一个或多个类。
$(selector).addClass(class)
removeClass() 方法从被选元素移除一个或多个类。
$(selector).removeClass(class)
hasClass() 方法检查被选元素是否包含指定的 class。
$(selector).hasClass(class)
find() 再次定位或查找指定元素(含)
.find(class)
attr() 方法设置或返回被选元素的属性值。
$(selector).attr(attribute)
$(selector).attr(attribute,value)
$(selector).attr(attribute,function(index,oldvalue))

 

//===

2.Javascript控制CSS样式:

页面部分:指定ID,指定触发事件

<div id=”img5″ class=”show_brand” style=”display: block;” onclick=”b();”></div>

<div id=”img6″ class=”hide_brand” style=”display: none;” onclick=”a();”></div>

javascript部分:

/* js写法:paddingTop ,css写法:padding-top*/

<script>

function a()

{

document.getElementById(“img1″).style.overflow=”hidden”;

document.getElementById(“img2″).style.paddingTop=”75px”;

document.getElementById(“img5″).style.display=”block”;

document.getElementById(“img6″).style.display=”none”;

}

function b()

{

document.getElementById(“img5″).style.display=”none”;

document.getElementById(“img6″).style.display=”block”;

document.getElementById(“img2″).className=”text”;

}

</script>

<style type=”text/css”>

.text{
position:absolute;
left:700px;
bottom:1px;
}

</style>

 

CI框架文件上传功能

1.建立保存上传文件的文件夹:C:\localhost\test\source

2.指定上传位置:

2.1修改文件.htaccess:

2.2修改文件index.php

图1:

图2::

3.上传页面(V层):

4.实现上传(C层):

4.1参数设置:

获取上传文件信息表:

简单介绍使用CI框架实现用户管理功能

简单介绍使用CI框架实现用户管理功能

一.CI框架:

MVC的实现框架:C控制层,M模型层,V是视图层。

上图controllers是控制层文件夹,models是模型层文件夹,views是视图层文件夹。

二.CI工作流程(以登陆为例):
1.前台页面制作完成后,把前台页面放在views文件夹下(logon.php)。

2.根据前台页面及功能要求,制作控制层的控制器:控制器(就是一个类文件)在controllers文件下建立(login.php),在类文件内写入类(Class Login),类名首字母大写,类继承CI_Controller类。在类内写具体的控制方法。

__construct()方法内重载本方法,并指定模型文件。index()方法指定视图文件(.php文件后缀不写)。在本控制器内构成了MVC的连接。
3.根据控制器的控制方法以及对数据库的操作具体实现,在模型层写数据库操作方法。在models文件下建立模型logon_mdl.php(也是一个类文件)。

在模型文件(logon_mdl.php)建立logon_mdl类,本类必须继承CI_Model。
4.框架安装,名字规则,文件路径,继承关系等按照CI框架要求进行即可。

三.用户管理制作:
1.用户管理:
制作后台是添删改查的规则的具体体现,用户管理属于后台管理用户功能:当管理员登陆账号以后,可以在用户管理界面添加用户,删除用户,编辑用户,查找用户。
2.制作:
制作形式多种多样,对数据库的操作原理都是一样的。CI框架为我们提供了现成的类,直接调用里面的方法即可。

2.1 登录页:

根据前台页面要求,输入用户名与密码,点击登陆后,表单提交到Logon控制器下的select()方法:<?php echo form_open(“/logon/select/”, array(“id” => “logon_form”, “name” => “logon_form”));?>。控制器根据模型的数据库操作方法select()去查询是否存在,如果存在,给session赋值,可以进入页面。否则转回登录页,要求客户重新登录。代码如下:

(登录功能)类文件内置方法:

$this->load->model(“logon_mdl”);//加载模型文件

$this->load->view(“logon”);//加载视图文件

$this->logon_mdl->select()//调用模型文件的select方法

$this->session->set_userdata();//存储session

redirect();//跳转(页面)

$this->session->unset_userdata()//销毁session

$this->session->all_userdata();//获取session数据

$this->db->query($sql);//执行sql语句

2.2 添加功能:
进入页面后,点击添加管理员,根据添加传值:<a href=”<?php echo DOMAINURL;?>/user_list/index/1″ style=”text-decoration: none;color: #000;”>添加管理员</a>。控制器user_list的index方法收到该值后,在页面显示一个添加表单:if(empty($cor)){echo form_open(“/user_list/insert/”, array(“id” => “user_list_form”, “name” => “user_list_form”));}。添加表单提交到控制器user_list的控制方法insert,根据对应的模型方法insert实现数据添加到数据库。

(添加功能)类文件内置方法:

$this->load->model(“user_list_mdl”);//加载模型文件

$this->uri->segment(3);//id传值

$this->user_list_mdl->get_select();//调用模型文件的方法

$this->load->view(“template”, $page);//加载视图文件并传值

$this->db->query($sql, array($data[“Account”],$data[“Password”],$data[“Name”],$data[“CreateTime”]));//执行sql语句

redirect(“/user_list/index”);//调转到其他页

2.3 列表功能:
如果没有点击添加:if(empty($id))。则通过控制器的控制方法指挥模型的数据库操作方法进行数据库内容查询列表(包含编辑和删除链接)

(列表功能)类文件内置方法:(同上)

public function index()

{

$data[“id”]  = $this->uri->segment(3);

$data[“row”]= $this->user_list_mdl->get_select();

$this->show($data);

}

2.4 删除功能:
当点击列表的删除链接时:<a onclick=”return confirm(“确认删除”)” href=”<?php echo DOMAINURL;?>/user_list/delete/<?php echo $i[“ID”];?>” style=”text-decoration: none;color: #000;”>删除</a>,通过控制器user_list模型方法delete,对数据进行删除,转回列表页。

(删除功能)类文件内置方法:

$this->uri->segment(3);//传id

$this->user_list_mdl->delete($data)//调用模型方法

redirect(“/user_list/index”);//调转到其他页面

$this->db->query($sql);//执行sql语句

2.5 更新功能:
当点击列表的更新链接时:<a href=”<?php echo DOMAINURL;?>/user_list/get_update/<?php echo $i[“ID”];?>” style=”text-decoration: none;color: #000;”>更新</a>,根据编辑传值到控制器user_list的方法get_update,得到查询数据显示在页面一个编辑表单if(empty($cor)){

echo form_open(“/user_list/insert/”, array(“id” => “user_list_form”, “name” => “user_list_form”));

}else{

echo form_open(“/user_list/update/”, array(“id” => “user_list_form1”, “name” => “user_list_form1”));

},提交到控制器user_list/的控制方法update,根据对应的模型方法update实现数据编辑,转回到列表。

(更新功能)类文件内置方法:

$this->uri->segment(3);//传ID

$this->user_list_mdl->get_update($data);//调用模型方法

redirect(“/user_list/index”);//调转其他页面

$this->db->query($sql);//执行sql语句

2.6 退出功能:
当点击退出链接时:<a href=”<?php echo DOMAINURL;?>/logon/logout” >退出</a>,执行控制器logon方法logout,销毁session,转到登录页。

(退出功能)类文件内置方法:

$this->session->unset_userdata($unset_sess);//销毁session

redirect();//跳转其他页面

二维码的生成和使用

php生成二维码和QR图片中间加logo

一.二维码定义:

二维码(2-dimensional bar code):又称二维条码,最早起源于日本,它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息数据的一把钥匙。

QR码:(学名为快速响应矩阵码;Quick Response Code)是二维条码的一种,于1994年由日本DENSO WAVE公司发明。QR来自英文Quick Response的缩写,即快速反应,因为发明者希望QR码可以让其内容快速被解码[1]。QR码最常见于日本,为目前日本最流行的二维空间条码。QR码比较普通条码可以存储更多数据。

声明:1.QR码呈正方形,常见的是黑白两色。在3个角落,印有较小,像“回”字的的正方图案。这3个是帮助解码软件定位的图案,用户不需要对准,无论以任何角度扫描,数据仍可正确被读取。

2.QR码有容错能力,QR码图形如果有破损,仍然可以被机器读取内容,最高可以到7%~30%面积破损仍可被读取。

错误修正容量

L水平      7%的字码可被修正
M水平      15%的字码可被修正
Q水平      25%的字码可被修正
H水平      30%的字码可被修正

3.读取方式:利用30万像素以上的照相手机,搭配手机内的QR码解码软件,对着QR码一照,解码软件会自动解读此信息,显示于手机屏幕上面。目前也有运用到Webcam的镜头来解码,有些人认为未来所有有镜头的科技产品,都会被导入此QR码的机制。

 

二.php生成二维码的2种方式
1.google开放api

<?php
//不足:不能变化颜色,只是黑色二维码
//==在浏览器输入$png地址,可以看到一个黑色二维码(不含LOGO)==
$size =”100×100″;//这并不是生成图片的真实尺寸,最大尺寸

$data =”www.baidu.com”;

$png = “http://chart.googleapis.com/chart?chs=”.$size.”&cht=qr&chl=”.$data.”&chld=L|1&choe=UTF-8″;
/*
生成二维码(不含logo):
chs生成二维码尺寸/
cht=qr这是说图表类型为qr也就是二维码/
chl=XXXX 为要生成的二维码数据/
chld=L|4 L代表默认纠错水平,1表二维码边界空白大小,可自行调节/
choe=UTF-8这是说内容的编码格式为UTF-8.
*/

//==========生成LOGO的二维码===============
$logo =”./1.jpg”;//中间logo图(已经存在的图片)

$QR = imagecreatefrompng($png);    //根据给定的二维码图片文件名$png取得的图像,二维码图像

$logo = imagecreatefromstring(file_get_contents($logo));//根据字符串得来的图像,LOGO图像

$QR_width = imagesx($QR);    //取得二维码图像宽度
$QR_height = imagesy($QR);    //取得二维码图像高度

$logo_width = imagesx($logo);    //取得LOGO图像宽度
$logo_height = imagesy($logo);    //取得LOGO图像高度

$logo_qr_width = $QR_width/5;    //目标宽度
$scale = $logo_width/$logo_qr_width;        //等比例
$logo_qr_height = $logo_height/$scale;//等比例关系。$QR_width,$logo_width,$logo_height(已知量),求的目标高度

$from_width = ($QR_width-$logo_qr_width)/2;//通过计算的距离,作为定位点坐标数据

imagecopyresampled($QR, $logo, $from_width, $from_width, 0, 0, $logo_qr_width, $logo_qr_height, $logo_width, $logo_height);
/*
一。目标图象连接资源,
源图象连接资源,
目标 X 坐标点,
目标 Y 坐标点,
源的 X 坐标点。
源的 Y 坐标点,
目标宽度,
目标高度,
源图象的宽度,
源图象的高度
http://cn2.php.net/manual/zh/function.imagecopyresampled.php

二。生成中间带logo的二维码:
imagecopyresized()将于源的宽度$logo_width和高度$logo_height位置(0,0)并将其放置在目标的宽度$logo_qr_width和高度$logo_qr_height矩形区域,它是在位置($from_width,$from_width)的矩形区域。
如果源和目标坐标,宽度和高度不同,适当的伸展或收缩的图像片段将进行。坐标是指在左上角。
http://www.111cn.net/phper/24/php-imagecopyresized.htm
*/

header(“Content-type: image/png”);
imagepng($QR);//浏览器输出
imagedestroy($QR);
?>

2.php类库

<?php
//优点:通过修改类文件的方法,可以改变背景颜色和条码颜色,
include “./phpqrcode.php”;//引用类文件

$value=”222222″;//为要生成的二维码数据

$errorCorrectionLevel = “Q”;//二维码纠错能力大小

$matrixPointSize = 20;//二维码图片大小

QRcode::png($value, “5.png”, $errorCorrectionLevel, $matrixPointSize);//生成二维码       5.png是生成的二维码图片(不含logo)

//====同上====
$QR = “5.png”;//生成的二维码图片
$logo = “1.jpg”;//已经存在的图片

$QR = imagecreatefromstring(file_get_contents($QR));//根据字符串得来的图像
$logo = imagecreatefromstring(file_get_contents($logo));
$QR_width = imagesx($QR);//取得图像宽度
$QR_height = imagesy($QR);
$logo_width = imagesx($logo);
$logo_height = imagesy($logo);
$logo_qr_width = $QR_width / 5;
$scale = $logo_width / $logo_qr_width;
$logo_qr_height = $logo_height / $scale;
$from_width = ($QR_width – $logo_qr_width) / 2;
imagecopyresampled($QR, $logo, $from_width, $from_width, 0, 0, $logo_qr_width, $logo_qr_height, $logo_width, $logo_height);
header(“Content-type: image/png”);
imagepng($QR);//浏览器输出
imagedestroy($QR);
?>